Il criterio della stessa origine è una funzionalità di sicurezza del browser che limita il modo in cui documenti e script su un'origine possono interagire con le risorse su un'altra origine.
Un browser può caricare e visualizzare risorse di più siti contemporaneamente. Potresti avere aprire contemporaneamente più schede oppure un sito potrebbe incorporare più iframe da siti diversi. In assenza di limitazioni alle interazioni tra questi e uno script viene compromesso da un utente malintenzionato, lo script potrebbe esporre tutti gli elementi nel browser di un utente.
Il criterio della stessa origine impedisce che ciò accada bloccando l'accesso in lettura a di risorse caricate da un'origine diversa. "Ma aspetta" dici: "Carico immagini e script da altre origini sempre." I browser consentono ad alcuni tag incorporare risorse da un'origine diversa. Questo criterio è principalmente un retaggio storico e può esporre il sito a vulnerabilità come clickjacking utilizzando iframe. Puoi limitare la lettura multiorigine di questi tag utilizzando uno strumento di sicurezza del contenuto Norme.
Cosa si considera della stessa origine?
Un'origine è definita dallo schema (noto anche come protocollo, ad esempio
HTTP o HTTPS), porta (se specificata) e host. Quando tutti e tre gli elementi sono uguali
per due URL, sono considerati della stessa origine. Ad esempio:
http://www.example.com/foo è la stessa origine di
http://www.example.com/bar
ma non https://www.example.com/bar
perché lo schema è diverso.
Cosa è consentito e cosa è bloccato?
In genere, è consentito incorporare una risorsa multiorigine, durante la lettura di un risorsa multiorigine è bloccata.
| iframe |
Generalmente l'incorporamento multiorigine è consentito (a seconda dell'istruzione X-Frame-Options), ma non la lettura multiorigine (ad esempio, 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 dei moduli in una destinazione multiorigine.
|
| immagini | È consentito l'incorporamento di immagini multiorigine. 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 l'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: DevSite - Valutazione Think and Check
Come impedire il clickjacking
Un attacco chiamato "clickjacking" incorpora un sito in un iframe e si sovrappone
pulsanti trasparenti che rimandano a una destinazione diversa. Gli utenti vengono ingannati
pensare di accedere alla tua applicazione e inviare dati a
gli aggressori.
Per impedire ad altri siti di incorporare il tuo sito in un iframe, aggiungi un contenuto
norme di sicurezza con frame-ancestors
istruzione
alle intestazioni HTTP.
In alternativa, puoi aggiungere X-Frame-Options alle intestazioni HTTP
MDN
per l'elenco di opzioni.
Conclusione
Speriamo che tu ti senta un po' sollevato dal fatto che i browser lavorino sodo per tenere sotto controllo la sicurezza sul web. Anche se i browser cercano di essere sicuri bloccando l'accesso alle risorse, a volte potresti voler accedere alle risorse multiorigine diverse 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 fonti attendibili.