La policy della stessa origine è una funzionalità di sicurezza del browser che limita il modo in cui i documenti e gli script di un'origine possono interagire con le risorse di un'altra origine.
Un browser può caricare e visualizzare risorse di più siti contemporaneamente. Potresti avere più schede aperte contemporaneamente o un sito potrebbe incorporare più iframe di siti diversi. Se non esistono limitazioni alle interazioni tra queste risorse e uno script viene compromesso da un utente malintenzionato, lo script potrebbe esporre tutto ciò che si trova 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", dirai, "io carico immagini e script da altre origini continuamente". I browser consentono ad alcuni tag di incorporare risorse da un'origine diversa. Questa policy è per lo più un artefatto storico e può esporre il tuo sito a vulnerabilità come il clickjacking tramite iframe. Puoi limitare la lettura multiorigine di questi tag utilizzando una Content Security Policy.
Cosa si intende per 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, questi vengono considerati della stessa origine. Ad esempio,
http://www.example.com/foo ha la stessa origine di
http://www.example.com/bar,
ma non di https://www.example.com/bar
perché lo schema è diverso.
Cosa è consentito e cosa è bloccato?
In genere, l'incorporamento di una risorsa multiorigine è consentito, mentre la lettura di una risorsa multiorigine è bloccata.
| Iframe |
L'incorporamento multiorigine è solitamente consentito (a seconda della direttiva X-Frame-Options), ma la lettura multiorigine (ad esempio l'utilizzo di JavaScript per accedere a un documento in un iframe) non lo è.
|
| CSS |
Il CSS multiorigine può essere incorporato utilizzando un elemento <link> o un @import in un file CSS. Potrebbe essere necessaria l'intestazione Content-Type corretta.
|
| forms |
Gli URL multiorigine possono essere utilizzati come valore dell'attributo action degli elementi del modulo. Un'applicazione web può scrivere i dati dei moduli in una destinazione multiorigine.
|
| immagini | È consentito incorporare immagini multiorigine. Tuttavia, la lettura dei dati delle 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, ma l'accesso ad alcune API (come le richieste di recupero multiorigine) potrebbe essere bloccato. |
TODO: DevSite - Think and Check assessment
Come prevenire il clickjacking
Un attacco chiamato "clickjacking" incorpora un sito in un iframe e sovrappone
pulsanti trasparenti che rimandano a una destinazione diversa. Gli utenti vengono indotti a pensare di accedere alla tua applicazione mentre inviano dati agli utenti malintenzionati.
Per impedire ad altri siti di incorporare il tuo sito in un iframe, aggiungi una Content Security Policy con l'istruzione frame-ancestors alle intestazioni HTTP.
In alternativa, puoi aggiungere X-Frame-Options alle intestazioni HTTP. Consulta MDN per un elenco di opzioni.
Conclusione
Speriamo che tu ti senta un po' più sollevato sapendo che i browser si impegnano molto per essere i guardiani della 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, scopri di più sulla condivisione delle risorse tra origini (CORS) e su come indicare al browser che il caricamento delle risorse tra origini è consentito da origini attendibili.