M

MLOG

Italiano

Svela i segreti del CORS e impara ad abilitare richieste cross-domain sicure. Questa guida completa copre dalle basi alle configurazioni avanzate per comunicazioni web fluide e sicure.

Demistificare il CORS: Guida Completa alla Condivisione delle Risorse tra Origini Diverse

Nel web interconnesso di oggi, le applicazioni hanno spesso bisogno di accedere a risorse da origini diverse. È qui che entra in gioco il Cross-Origin Resource Sharing (CORS). Il CORS è un meccanismo di sicurezza cruciale che regola il modo in cui i browser web gestiscono le richieste da un'origine (dominio, protocollo e porta) a un'origine diversa. Comprendere il CORS è essenziale per ogni sviluppatore web per creare applicazioni web sicure e funzionali.

Cos'è la Same-Origin Policy?

Prima di approfondire il CORS, è importante comprendere la Same-Origin Policy (SOP). La SOP è un meccanismo di sicurezza fondamentale implementato nei browser web. Il suo scopo è impedire a script dannosi su un sito web di accedere a dati sensibili su un altro sito web. Un'origine è definita dalla combinazione di protocollo (es. HTTP o HTTPS), dominio (es. example.com) e numero di porta (es. 80 o 443). Due URL sono considerati della stessa origine se condividono lo stesso protocollo, dominio e porta.

Esempio:

La SOP limita l'accesso degli script a risorse di origine diversa, a meno che non siano in atto misure specifiche, come il CORS, per consentirlo.

Perché il CORS è Necessario?

Sebbene la Same-Origin Policy sia vitale per la sicurezza, può anche essere restrittiva. Molte applicazioni web moderne si basano sul recupero di dati da server diversi, come API o reti di distribuzione di contenuti (CDN). Il CORS fornisce un modo controllato per allentare la SOP e consentire richieste cross-origin legittime, mantenendo al contempo la sicurezza.

Consideriamo uno scenario in cui un'applicazione web ospitata su http://example.com deve recuperare dati da un server API ospitato su http://api.example.net. Senza CORS, il browser bloccherebbe questa richiesta a causa della SOP. Il CORS consente al server API di specificare esplicitamente quali origini sono autorizzate ad accedere alle sue risorse, permettendo all'applicazione web di funzionare correttamente.

Come Funziona il CORS: Le Basi

Il CORS funziona attraverso una serie di header HTTP scambiati tra il client (browser) e il server. Il server utilizza questi header per informare il browser se è autorizzato ad accedere alla risorsa richiesta. L'header HTTP chiave coinvolto è Access-Control-Allow-Origin.

Scenario 1: Richiesta Semplice

Una "richiesta semplice" è una richiesta GET, HEAD o POST che soddisfa criteri specifici (ad esempio, l'header Content-Type è uno tra application/x-www-form-urlencoded, multipart/form-data o text/plain). In questo caso, il browser invia la richiesta direttamente al server, e il server risponde con l'header Access-Control-Allow-Origin.

Richiesta del Client (da http://example.com):

GET /data HTTP/1.1
Host: api.example.net
Origin: http://example.com

Risposta del Server (da http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "data": "Some data from the server"
}

In questo esempio, il server risponde con Access-Control-Allow-Origin: http://example.com, indicando che le richieste da http://example.com sono consentite. Se l'origine nella richiesta non corrisponde al valore nell'header Access-Control-Allow-Origin (o se l'header non è presente), il browser bloccherà la risposta e impedirà allo script lato client di accedere ai dati.

Scenario 2: Richiesta Preflight (per Richieste Complesse)

Per richieste più complesse, come quelle che utilizzano metodi HTTP come PUT, DELETE, o quelle con header personalizzati, il browser esegue una richiesta "preflight" utilizzando il metodo HTTP OPTIONS. Questa richiesta preflight chiede al server il permesso prima di inviare la richiesta effettiva. Il server risponde con degli header che specificano quali metodi, header e origini sono consentiti.

Richiesta Preflight del Client (da http://example.com):

OPTIONS /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

Risposta del Server (da http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 3600

Spiegazione degli Header:

Se la risposta preflight del server indica che la richiesta è consentita, il browser procede con la richiesta effettiva. Altrimenti, il browser blocca la richiesta.

Richiesta Effettiva del Client (da http://example.com):

PUT /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
X-Custom-Header: some-value
Content-Type: application/json

{
  "data": "Some data to be updated"
}

Risposta del Server (da http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "status": "Data updated successfully"
}

Header CORS Comuni

Ecco un'analisi degli header CORS chiave che devi comprendere:

Il CORS in Diversi Linguaggi Lato Server

L'implementazione del CORS comporta tipicamente la configurazione della tua applicazione lato server per inviare gli header CORS appropriati. Ecco alcuni esempi di come farlo in vari linguaggi e framework:

Node.js con Express

Puoi usare il pacchetto middleware cors:

const express = require('express');
const cors = require('cors');

const app = express();

// Abilita il CORS per tutte le origini (USARE CON CAUTELA IN PRODUZIONE)
app.use(cors());

// In alternativa, configura il CORS per origini specifiche
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Python con Flask

Puoi usare l'estensione Flask-CORS:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# In alternativa, configura il CORS per origini specifiche
# CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "This is CORS-enabled for all origins!"}

if __name__ == '__main__':
    app.run(debug=True)

Java con Spring Boot

Puoi configurare il CORS nella tua applicazione Spring Boot usando annotazioni o classi di configurazione:

Usando le Annotazioni:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com") // Consente richieste da http://example.com
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "This is CORS-enabled for http://example.com!";
    }
}

Usando la Configurazione:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/data")
                .allowedOrigins("http://example.com") // Consente richieste da http://example.com
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP

 "This is CORS-enabled for http://example.com!");
echo json_encode($data);
?>

CORS e Considerazioni sulla Sicurezza

Mentre il CORS abilita le richieste cross-origin, è cruciale implementarlo in modo sicuro. Ecco alcune considerazioni importanti:

Risoluzione dei Problemi CORS

I problemi di CORS possono essere frustranti da risolvere. Ecco alcuni problemi comuni e come risolverli:

Strumenti di Debug:

Scenari CORS Avanzati

Sebbene i concetti di base del CORS siano relativamente semplici, ci sono alcuni scenari più avanzati da considerare:

Best Practice per il CORS

Per garantire un'implementazione del CORS sicura ed efficiente, segui queste best practice:

Conclusione

Il CORS è un meccanismo di sicurezza critico che abilita richieste cross-origin controllate nelle applicazioni web. Comprendere come funziona il CORS e come configurarlo correttamente è essenziale per ogni sviluppatore web. Seguendo le linee guida e le best practice descritte in questa guida completa, puoi creare applicazioni web sicure e funzionali che interagiscono senza problemi con risorse di origini diverse.

Ricorda di dare sempre la priorità alla sicurezza e di evitare configurazioni CORS eccessivamente permissive. Considerando attentamente le implicazioni di sicurezza delle tue impostazioni CORS, puoi proteggere le tue applicazioni e i tuoi dati da accessi non autorizzati.

Speriamo che questa guida ti abbia aiutato a demistificare il CORS. Buona programmazione!

Demistificare il CORS: Guida Completa alla Condivisione delle Risorse tra Origini Diverse | MLOG