Il criterio della stessa origine è una funzionalità di sicurezza del browser che limita il modo in cui i documenti e gli script su un'origine possono interagire con le risorse di un'altra.
Un browser può caricare e visualizzare risorse da più siti contemporaneamente. Potresti avere più schede aperte contemporaneamente oppure un sito potrebbe incorporare più iframe di siti diversi. Se non esistono limitazioni sulle interazioni tra queste risorse e uno script viene compromesso da un utente malintenzionato, lo script potrebbe esporre qualsiasi elemento nel browser di un utente.
Il criterio della stessa origine impedisce che ciò accada bloccando l'accesso in lettura alle risorse caricate da un'origine diversa. "Ma aspetta," dici, "Carico immagini e script da altre origini sempre". I browser consentono ad alcuni tag di incorporare risorse da un'origine diversa. Questo criterio è principalmente un artefatto storico e può esporre il tuo sito a vulnerabilità come il clickjacking con iframe. Puoi limitare la lettura multiorigine di questi tag utilizzando un Criterio di sicurezza del contenuto.
Cosa è considerato la stessa origine?
Un'origine è definita dallo schema (noto anche come protocollo, ad esempio HTTP o HTTPS), dalla porta (se specificata) e dall'host. Quando tutti e tre sono uguali per due URL, vengono considerati la stessa origine. Ad esempio, http://www.example.com/foo ha la stessa origine di http://www.example.com/bar ma non https://www.example.com/bar perché lo schema è diverso.
Che cosa è consentito e cosa è bloccato?
In genere, è consentito incorporare una risorsa multiorigine, mentre la lettura di una risorsa multiorigine è bloccata.
| iframe |
Di solito è consentito l'incorporamento multiorigine (a seconda dell'istruzione X-Frame-Options), ma non la lettura multiorigine (come l'utilizzo di JavaScript per accedere a un documento in un iframe).
|
| CSS |
Il CSS multiorigine può essere incorporato utilizzando un elemento <link> o @import in un file CSS. Potrebbe essere necessaria l'intestazione Content-Type corretta.
|
| moduli |
Gli URL multiorigine possono essere utilizzati come valore dell'attributo action degli elementi del modulo. Un'applicazione web può scrivere dati del modulo in una destinazione multiorigine.
|
| Immagini | L'incorporamento di immagini multiorigine è consentito. Tuttavia, la lettura dei dati di immagini multiorigine (ad esempio il recupero di dati binari da un'immagine multiorigine utilizzando JavaScript) è bloccata. |
| multimedialità |
I video e audio multiorigine possono essere incorporati utilizzando gli elementi <video> e <audio>.
|
| scrittura | Gli script multiorigine possono essere incorporati; tuttavia, l'accesso a determinate API (ad esempio le richieste di recupero multiorigine) potrebbe essere bloccato. |
DA FARE: Sito per sviluppatori - Test Pensa e verifica
Come prevenire il clickjacking
Un attacco chiamato "clickjacking" incorpora un sito in un elemento iframe e sovrappone
pulsanti trasparenti che rimandano a una destinazione diversa. Gli utenti vengono indotti con l'inganno a pensare di accedere alla tua applicazione e a inviare i dati agli utenti malintenzionati.
Per impedire ad altri siti di incorporare il tuo sito in un iframe, aggiungi un criterio di sicurezza dei contenuti con un'istruzione frame-ancestors alle intestazioni HTTP.
In alternativa, puoi aggiungere X-Frame-Options alle intestazioni HTTP. Consulta MDN per visualizzare l'elenco delle opzioni.
Conclusione
Speriamo che vi sia un po' di sollievo dal fatto che i browser lavorano sodo per tenere sotto controllo la sicurezza sul web. Anche se i browser cercano di essere sicuri bloccando l'accesso alle risorse, a volte vuoi accedere alle risorse multiorigine nelle tue applicazioni. Nella prossima guida scoprirai la condivisione delle risorse tra origini (CORS) e come comunicare al browser che il caricamento delle risorse multiorigine è consentito da origini attendibili.