Indice dei contenuti dell'articolo:
Nel mondo moderno del web, la sicurezza è una delle principali preoccupazioni per gli sviluppatori e gli amministratori di sistema. Una delle funzionalità di sicurezza che spesso viene sottovalutata ma è fondamentale è quella dei CORS, o Cross-Origin Resource Sharing. Questa funzionalità è particolarmente rilevante per le aziende che si occupano di hosting e sistemistica, specialmente quelle che utilizzano server web come NGINX. In questo articolo, esploreremo in dettaglio cosa sono i CORS a livello di header HTTP e a cosa servono, con un focus particolare su come implementarli in un ambiente NGINX.
Cos’è CORS?
CORS, acronimo di “Cross-Origin Resource Sharing” (Condivisione delle Risorse tra Origini Diverse), è un protocollo di sicurezza web implementato nei browser moderni per controllare e gestire le richieste di risorse tra domini web diversi. In termini più semplici, CORS è un insieme di regole e header HTTP che permettono a un sito web di accedere a risorse su un altro sito web senza violare la politica della stessa origine (Same-Origin Policy).
La Politica della Stessa Origine (Same-Origin Policy)
Per comprendere appieno l’importanza dei CORS, è fondamentale capire la politica della stessa origine. Questa è una misura di sicurezza implementata nei browser per limitare le interazioni tra domini diversi. Secondo questa politica, script eseguiti su una pagina web possono accedere solo a risorse provenienti dallo stesso dominio, protocollo e porta da cui è stata caricata la pagina stessa. Ad esempio, se un sito web su http://dominioA.com tenta di fare una richiesta AJAX a http://dominioB.com, la richiesta verrà bloccata a meno che dominioB.com non fornisca le adeguate autorizzazioni CORS.
Tipi di Risorse
CORS è applicabile a una varietà di risorse web, tra cui:
- File JavaScript
- Fogli di stile CSS
- Immagini e video
- Font
- API RESTful e dati JSON
Funzionamento dei CORS
Quando una risorsa da un dominio A tenta di accedere a una risorsa su un dominio B, il browser invia una richiesta HTTP al dominio B. Questa richiesta include diversi header CORS, come Origin, che indica da quale dominio proviene la richiesta. Il server su dominio B può quindi rispondere con i propri header CORS, come Access-Control-Allow-Origin, per indicare se la richiesta è autorizzata o meno.
Se la richiesta è autorizzata, il browser procede con l’operazione. In caso contrario, il browser blocca la richiesta e solitamente segnala un errore nella console di sviluppo, informando che la richiesta è stata bloccata a causa della politica della stessa origine.
CORS Preflight
In alcuni casi, prima di inviare la richiesta “reale”, il browser invia una richiesta preliminare chiamata “preflight” utilizzando il metodo HTTP OPTIONS. Questo serve per verificare se la richiesta successiva è sicura da effettuare. Il server risponde a questa richiesta preliminare con gli header CORS appropriati, indicando se la richiesta originale è permessa.
CORS è insomma un meccanismo essenziale che permette una maggiore interattività e integrazione tra siti web, pur mantenendo alti standard di sicurezza. Attraverso un insieme di header HTTP e regole ben definite, CORS offre un modo per aggirare in modo sicuro le restrizioni imposte dalla politica della stessa origine, rendendo il web un ambiente più flessibile e sicuro.
Perché è Importante ?
Nell’era moderna del web, le applicazioni sono spesso distribuite su più domini o servizi. Ad esempio, potreste avere un’applicazione front-end ospitata su dominioA.com che interagisce con un back-end API su dominioB.com. In un mondo ideale, vorreste che queste due parti dell’applicazione potessero comunicare liberamente tra loro per fornire un’esperienza utente fluida e funzionale. Tuttavia, la realtà è un po’ più complicata a causa di una misura di sicurezza implementata nei browser chiamata “politica della stessa origine” (Same-Origin Policy).
La politica della stessa origine è stata introdotta per proteggere gli utenti da potenziali attacchi di tipo Cross-Site Request Forgery (CSRF), Cross-Site Scripting (XSS) e altri tipi di vulnerabilità di sicurezza che potrebbero sorgere quando siti web di origine diversa interagiscono tra loro. In pratica, questa politica impedisce a una pagina web di fare richieste ad un altro dominio senza esplicita autorizzazione. Quindi, senza un meccanismo come CORS, il browser bloccherebbe qualsiasi tentativo del front-end su dominioA.com di fare richieste al back-end su dominioB.com.
Questo diventa un problema significativo quando si tratta di applicazioni web moderne che richiedono un alto grado di interattività e funzionalità dinamiche. Ad esempio, se avete un negozio online con un carrello che necessita di verificare la disponibilità di un prodotto in tempo reale, o un’applicazione di social media che deve caricare i post da un server API, la limitazione imposta dalla politica della stessa origine potrebbe rappresentare un ostacolo insormontabile.
Ecco dove entra in gioco CORS. Con CORS, è possibile impostare regole specifiche sul server back-end che permettono al front-end di interagire con esso nonostante siano ospitati su domini diversi. Questo non solo migliora la funzionalità e l’usabilità delle applicazioni web, ma lo fa in un modo che mantiene alte le misure di sicurezza. In altre parole, CORS offre il miglior equilibrio tra sicurezza e funzionalità, permettendo agli sviluppatori di costruire applicazioni web ricche e interattive senza compromettere la sicurezza dell’utente finale.
CORS a Livello di Header HTTP
I CORS funzionano aggiungendo nuovi header HTTP che permettono ai server di descrivere quali origini sono permesse ad accedere alle risorse su un server web. Alcuni degli header CORS più comuni includono:
Access-Control-Allow-Origin: Specifica quali origini possono accedere alla risorsa.Access-Control-Allow-Methods: Specifica i metodi HTTP che possono essere usati quando si accede alla risorsa.Access-Control-Allow-Headers: Specifica gli header che possono essere usati quando si effettua una richiesta HTTP.
Implementazione CORS in NGINX
NGINX è uno dei web server più popolari e offre un’elevata flessibilità per configurare le impostazioni CORS. Ecco un esempio di come potete configurare CORS in NGINX:
location /api/ {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
}
}
In questo esempio, abbiamo utilizzato la direttiva location per specificare che le regole CORS si applicano solo alle richieste che puntano alla risorsa /api/. Abbiamo poi utilizzato la variabile $request_method per applicare differenti set di header CORS a seconda del metodo HTTP utilizzato.
Considerazioni di Sicurezza
Mentre l’uso del carattere jolly * nell’header Access-Control-Allow-Origin è conveniente per permettere a qualsiasi origine di accedere alle vostre risorse, è anche una pratica potenzialmente pericolosa dal punto di vista della sicurezza. È consigliabile specificare esplicitamente quali origini sono autorizzate.
Conclusione
I CORS sono un elemento fondamentale per la sicurezza e la funzionalità nel moderno sviluppo web. Essi permettono una comunicazione sicura tra domini diversi, superando le limitazioni imposte dalla politica della stessa origine. L’implementazione di CORS in NGINX è relativamente semplice ma richiede una comprensione dettagliata degli header HTTP e delle potenziali implicazioni per la sicurezza. Speriamo che questo articolo vi abbia fornito le informazioni necessarie per implementare efficacemente e in modo sicuro i CORS nel vostro ambiente NGINX.
