iframe sandbox: ogni token, con una demo interattiva | We.Inc
Attiva e disattiva ogni token di iframe sandbox e guarda script, form, popup e alert funzionare o bloccarsi. Ogni token spiegato.
Un attributo sandbox vuoto blinda un iframe: niente script, niente invio di form, niente popup, niente alert e un'origine opaca che fallisce ogni controllo same-origin. Ogni token allow- che aggiungi restituisce un singolo permesso. Attiva i token qui sotto per vedere esattamente cosa si rompe, poi copia l'insieme minimo che serve al tuo embed.
Casi d'uso comuni e i token di cui hanno bisogno
Contenuto incorporato
Valore sandbox consigliato
Anteprima HTML statica che hai generato
sandbox (vuoto)
Demo interattiva o output di un code playground
sandbox="allow-scripts"
Form di terze parti che invia le risposte
sandbox="allow-scripts allow-forms allow-same-origin" (solo per un'origine diversa)
L'attributo sandbox è la misura di sicurezza più economica che puoi aggiungere a un iframe che mostra contenuti non scritti da te: HTML degli utenti, uno spazio pubblicitario, l'anteprima di una pagina generata. La parte difficile è capire di quali token ha bisogno un certo embed, perché quando ne manca uno di solito fallisce in silenzio. Il frame dal vivo qui sotto esegue test reali, così vedi ogni errore invece di tirare a indovinare. Per le basi sull'incorporare contenuti, parti dalla nostra guida su iframe HTML e video.
Spunta i token nell'elenco. Il frame a destra si ricarica con esattamente quel valore sandbox, mostrato sopra come codice da copiare.
Con allow-scripts disattivato, il frame mostra solo la sua riga di riserva, perché al suo interno non può essere eseguito nulla.
Attiva allow-scripts e il frame indica la propria origine, poi offre pulsanti per inviare un form, aprire un popup e mostrare un alert.
Ogni pulsante riporta se il browser ha permesso l'azione. Aggiungi il token corrispondente e premilo di nuovo per confrontare.
Parti da un sandbox vuoto e aggiungi i token uno alla volta finché l'embed funziona. Toglierli da un elenco lungo è molto più difficile da ragionare.
Non combinare mai allow-scripts e allow-same-origin per contenuti serviti dalla tua stessa origine. La pagina nel frame potrebbe rimuovere il proprio sandbox.
Per l'HTML scritto dagli utenti preferisci srcdoc o un sottodominio separato, così anche un errore nei token non può raggiungere i cookie del tuo sito principale.
Il sandbox da solo non limita fotocamera, microfono o funzionalità simili. Affiancagli l'attributo allow per la permissions policy.
Se i link nel frame devono aprire schede normali, aggiungi allow-popups-to-escape-sandbox, altrimenti la nuova scheda eredita le stesse restrizioni.
Domande frequenti
Cosa fa un attributo sandbox vuoto?
Applica tutte le restrizioni insieme. Il documento nel frame non può eseguire script, inviare form, aprire popup o finestre modali, navigare la finestra principale, bloccare il puntatore o l'orientamento, avviare download, e viene trattato come proveniente da un'origine unica che non coincide mai con nessun'altra.
Perché allow-scripts con allow-same-origin è pericoloso?
Quando il documento nel frame è sulla stessa origine della tua pagina, questi due token insieme permettono al suo script di risalire e cancellare l'attributo sandbox, quindi alla fine non è più sicuro di un normale iframe. La coppia va bene per contenuti da un'origine davvero diversa, che comunque non può toccare la tua pagina.
Il mio form in sandbox non fa nulla quando premo invio. Perché?
Senza allow-forms il form viene comunque visualizzato, ma inviarlo non attiva nessuna validazione e non manda dati a nessun server. Aggiungi allow-forms. Se il form si basa anche su cookie o storage del proprio sito, avrà bisogno anche di allow-same-origin.
Un iframe in sandbox può reindirizzare tutta la mia pagina?
No, a meno che tu non aggiunga allow-top-navigation, oppure allow-top-navigation-by-user-activation, che lo permette solo dopo che la persona ha cliccato dentro il frame. Escludendoli entrambi impedisci a un embed di sostituire la tua pagina con un altro sito.
Il sandbox basta per mostrare HTML non fidato in sicurezza?
È il livello principale, non l'unico. Servi i contenuti non fidati da un'origine separata o con srcdoc, tieni disattivato allow-same-origin quando gli script sono attivi, e aggiungi una Content-Security-Policy al documento nel frame se controlli come viene servito.
Come cambia le cose l'origine opaca
Senza allow-same-origin, il documento nel frame riceve un'origine speciale che fallisce sempre la same-origin policy. Il suo self.origin vale la stringa "null".
Questa sola regola disattiva molte cose, perché la pagina nel frame non conta più come parte del proprio sito. I widget che dipendono dai propri cookie o dallo stato salvato spesso si rompono proprio qui, ed è per questo che tanti chiedono allow-same-origin.
I fallimenti silenziosi sono la norma
Un popup bloccato non genera errori: window.open restituisce semplicemente null. Un alert bloccato ritorna subito senza mostrare nulla. Un form bloccato resta lì fermo. Quando un embed si comporta male, controlla la console del browser per il frame prima di dare la colpa al codice dell'embed.
Ecco perché la demo in questa pagina riporta i risultati dentro il frame: vedi lo stesso comportamento silenzioso che incontrerebbe un embed reale.
sandbox, allow e CSP hanno compiti diversi
sandbox limita cosa può fare il documento nel frame. L'attributo allow imposta una permissions policy per funzionalità come fotocamera, schermo intero o geolocalizzazione. La Content-Security-Policy, inviata dal server della pagina nel frame, limita quali script e risorse carica.
Un embed accurato di contenuti non fidati usa tutti e tre, e la parte frame-ancestors della CSP risolve la domanda opposta: chi può inserire una pagina in un frame.
Tutti i token di sandbox
I token sono separati da spazi e non distinguono maiuscole e minuscole. Tutto ciò che non è elencato resta bloccato.
I token di sandbox e cosa consente ciascuno
Token
Consente
Eseguire script, ma non aprire finestre popup
Mantenere l'origine reale del documento invece di una opaca
Inviare form (altrimenti vengono visualizzati ma non inviano nulla)
Usare alert(), confirm(), print() e prompt()
Aprire finestre con window.open() o target="_blank"
Lasciare che quelle nuove finestre si aprano senza sandbox
Scaricare file da link o navigazione
Navigare la pagina di primo livello
Navigare la pagina di primo livello, solo dopo un clic
Aprire protocolli non http come mailto:
Usare la Pointer Lock API
Bloccare l'orientamento dello schermo
Avviare una sessione di presentazione
Richiedere cookie non partizionati tramite la Storage Access API
Schemi pronti da copiare
Anteprima di HTML utente con script disattivati
Il pulsante nel frame ha un gestore onclick, ma con un sandbox vuoto non viene mai eseguito.
Widget di terze parti su un'altra origine
Il widget esegue il proprio script e invia il suo form, e i link possono aprire schede vere. Non può reindirizzare la tua pagina.
Le stesse restrizioni inviate come header di risposta
Un server può mettere in sandbox la propria pagina con la CSP, che si applica anche quando la pagina viene aperta direttamente invece che in un frame.
Attiva i token e prova il frame
Il frame qui sotto è un documento srcdoc. allow-same-origin non è disponibile qui, perché un frame srcdoc condividerebbe allora l'origine di questa pagina, proprio la combinazione da cui mettono in guardia i consigli.
Gli script sono bloccati, quindi in questo frame non può essere eseguito nulla.
Token
Attributo attuale
Eseguire script, ma non aprire finestre popup
Mantenere l'origine reale del documento invece di una opaca
Inviare form (altrimenti vengono visualizzati ma non inviano nulla)
Usare alert(), confirm(), print() e prompt()
Aprire finestre con window.open() o target="_blank"
Lasciare che quelle nuove finestre si aprano senza sandbox
Scaricare file da link o navigazione
Navigare la pagina di primo livello
Navigare la pagina di primo livello, solo dopo un clic
Aprire protocolli non http come mailto:
Usare la Pointer Lock API
Bloccare l'orientamento dello schermo
Avviare una sessione di presentazione
Richiedere cookie non partizionati tramite la Storage Access API
Frame di prova sandbox
Gli script sono stati eseguiti. L'origine di questo frame è: {v}
Invia form
Apri popup
Mostra alert
Form inviato.
Il form non è stato inviato.
Popup aperto (e richiuso).
Popup bloccato: window.open ha restituito null.
L'alert è stato mostrato.
Alert bloccato: è ritornato subito senza essere mostrato.