iframe sandbox: todos os tokens, com demonstração ao vivo | We.Inc
Ative e desative cada token do sandbox do iframe e veja scripts, formulários, popups e alertas começarem ou pararem de funcionar. Todos os tokens explicados.
Um atributo sandbox vazio tranca o iframe por completo: nada de scripts, envio de formulários, popups ou alertas, e uma origem opaca que falha em toda verificação de mesma origem. Cada token allow- que você adiciona devolve um poder. Ative os tokens abaixo para ver exatamente o que quebra e depois copie o menor conjunto de que o seu embed precisa.
Usos comuns e os tokens de que precisam
O que você incorpora
Valor de sandbox sugerido
Prévia de HTML estático que você gerou
sandbox (vazio)
Demo interativa ou saída de um playground de código
sandbox="allow-scripts"
Formulário de terceiros que envia as respostas
sandbox="allow-scripts allow-forms allow-same-origin" (só para uma origem diferente)
O atributo sandbox é o ganho de segurança mais barato que você pode adicionar a um iframe que exibe conteúdo que você não escreveu: HTML de usuários, um espaço de anúncio, a prévia de uma página gerada. A parte difícil é saber quais tokens um embed precisa, porque a falta de um costuma falhar em silêncio. O frame ao vivo abaixo executa testes reais, então você vê cada falha em vez de adivinhar. Para o básico sobre embeds, comece pelo nosso guia de iframe e vídeo em HTML.
Marque tokens na lista. O frame à direita recarrega com exatamente esse valor de sandbox, exibido acima dele como código para copiar.
Com allow-scripts desligado, o frame mostra só a linha de fallback, porque nada dentro dele pode ser executado.
Ligue allow-scripts e o frame informa a própria origem, depois oferece botões para enviar um formulário, abrir um popup e mostrar um alerta.
Cada botão informa se o navegador permitiu a ação. Adicione o token correspondente e clique de novo para comparar.
Comece com um sandbox vazio e adicione tokens um de cada vez até o embed funcionar. Remover tokens de uma lista longa é mais difícil de entender.
Nunca combine allow-scripts e allow-same-origin para conteúdo servido pela sua própria origem. A página no frame consegue então remover o próprio sandbox.
Prefira srcdoc ou um subdomínio separado para HTML escrito por usuários, assim nem um erro nos tokens alcança os cookies do seu site principal.
O sandbox sozinho não limita câmera, microfone ou recursos parecidos. Use o atributo allow para a permissions policy junto com ele.
Se links dentro do frame precisam abrir abas normais, adicione allow-popups-to-escape-sandbox, senão a nova aba herda as mesmas restrições.
Perguntas frequentes
O que faz um atributo sandbox vazio?
Aplica todas as restrições de uma vez. O documento no frame não pode executar scripts, enviar formulários, abrir popups ou modais, navegar a janela principal, travar o ponteiro ou a orientação, nem iniciar downloads, e é tratado como vindo de uma origem única que nunca coincide com nenhuma outra.
Por que allow-scripts com allow-same-origin é perigoso?
Quando o documento no frame está na mesma origem da sua página, esses dois tokens juntos deixam o script dele alcançar o pai e apagar o atributo sandbox, então ele acaba tão inseguro quanto um iframe comum. A combinação não tem problema para conteúdo de uma origem realmente diferente, que de qualquer forma não consegue tocar na sua página.
Meu formulário em sandbox não faz nada quando clico em enviar. Por quê?
Sem allow-forms o formulário ainda aparece, mas enviá-lo não dispara validação nem manda dados a um servidor. Adicione allow-forms. Se o formulário também depende de cookies ou armazenamento do próprio site, ele vai precisar de allow-same-origin também.
Um iframe em sandbox pode redirecionar minha página inteira?
Não, a menos que você adicione allow-top-navigation, ou allow-top-navigation-by-user-activation, que só permite isso depois que a pessoa clica dentro do frame. Deixar os dois de fora impede que um embed troque sua página por outro site.
O sandbox basta para exibir HTML não confiável com segurança?
Ele é a camada principal, não a única. Sirva conteúdo não confiável de uma origem separada ou via srcdoc, mantenha allow-same-origin desligado quando os scripts estiverem ligados e adicione uma Content-Security-Policy ao documento no frame se você controla como ele é servido.
Como a origem opaca muda as coisas
Sem allow-same-origin, o documento no frame recebe uma origem especial que sempre falha na política de mesma origem. O self.origin dele vale a string "null".
Essa única regra desliga muita coisa, porque a página no frame deixa de contar como parte do próprio site. Widgets que dependem dos próprios cookies ou de estado salvo costumam quebrar aqui, e é por isso que tantos pedem allow-same-origin.
Falhas silenciosas são a regra
Um popup bloqueado não lança erro; window.open simplesmente retorna null. Um alerta bloqueado retorna na hora sem mostrar nada. Um formulário bloqueado simplesmente fica parado. Quando um embed se comporta mal, confira o console do navegador para o frame antes de culpar o código do próprio embed.
É por isso que a demo desta página mostra os resultados dentro do frame: você vê o mesmo comportamento silencioso que um embed real encontraria.
sandbox, allow e CSP fazem trabalhos diferentes
O sandbox limita o que o documento no frame pode fazer. O atributo allow define uma permissions policy para recursos como câmera, tela cheia ou geolocalização. A Content-Security-Policy, enviada pelo servidor da página no frame, limita quais scripts e recursos ela carrega.
Um embed cuidadoso de conteúdo não confiável usa os três, e a parte frame-ancestors da CSP decide a pergunta inversa: quem pode colocar uma página em um frame.
Todos os tokens do sandbox
Os tokens são separados por espaço e não diferenciam maiúsculas de minúsculas. Tudo o que não estiver listado continua bloqueado.
Tokens do sandbox e o que cada um permite
Token
Permite
Executar scripts, mas não abrir janelas popup
Manter a origem real do documento em vez de uma opaca
Enviar formulários (sem ele, aparecem mas não enviam nada)
Usar alert(), confirm(), print() e prompt()
Abrir janelas com window.open() ou target="_blank"
Deixar essas novas janelas abrirem sem o sandbox
Baixar arquivos a partir de links ou navegação
Navegar a página principal
Navegar a página principal, só depois de um clique
Abrir protocolos que não são http, como mailto:
Usar a Pointer Lock API
Travar a orientação da tela
Iniciar uma sessão de apresentação
Pedir cookies não particionados pela Storage Access API
Padrões para copiar
Prévia de HTML de usuário com scripts desligados
O botão dentro do frame tem um handler onclick, mas com um sandbox vazio ele nunca é executado.
Widget de terceiros em outra origem
O widget executa o próprio script e envia o formulário, e os links podem abrir abas reais. Ele não consegue redirecionar sua página.
As mesmas restrições enviadas como header de resposta
Um servidor pode colocar a própria página em sandbox com CSP, o que vale mesmo quando a página é aberta diretamente em vez de dentro de um frame.
Ative tokens e teste o frame
O frame abaixo é um documento srcdoc. allow-same-origin não é oferecido aqui, porque um frame srcdoc passaria a compartilhar a origem desta página, exatamente a combinação contra a qual as dicas alertam.
Os scripts estão bloqueados, então nada neste frame pode ser executado.
Tokens
Atributo atual
Executar scripts, mas não abrir janelas popup
Manter a origem real do documento em vez de uma opaca
Enviar formulários (sem ele, aparecem mas não enviam nada)
Usar alert(), confirm(), print() e prompt()
Abrir janelas com window.open() ou target="_blank"
Deixar essas novas janelas abrirem sem o sandbox
Baixar arquivos a partir de links ou navegação
Navegar a página principal
Navegar a página principal, só depois de um clique
Abrir protocolos que não são http, como mailto:
Usar a Pointer Lock API
Travar a orientação da tela
Iniciar uma sessão de apresentação
Pedir cookies não particionados pela Storage Access API