O elemento iframe: src e sandbox

O elemento <iframe> incorpora outro documento HTML na página atual. Cada iframe tem seu próprio contexto de navegação, DOM e escopo de JavaScript. O conteúdo dentro de um iframe não pode acessar o DOM da página pai sem permissão explícita.

Defina o atributo src como a URL a ser incorporada: <iframe src="https://example.com" width="800" height="600">. O iframe cria um novo contexto de navegação. O atributo title é obrigatório para acessibilidade: title="Embedded map".

sandbox aplica restrições ao conteúdo do iframe: desativa scripts, formulários, pop-ups e plug-ins por padrão. Adicione permissões específicas para restaurar capacidades: sandbox="allow-scripts allow-same-origin".

allow-scripts: ativa o JavaScript. allow-same-origin: permite que o iframe seja tratado como da mesma origem (necessário para acessar localStorage). allow-forms: permite o envio de formulários. allow-popups: permite window.open(). Conceda somente o mínimo necessário.

iframes de origem cruzada não podem acessar o DOM pai: parent.document gera um erro de segurança. A comunicação entre quadros de origens diferentes usa postMessage: iframe.contentWindow.postMessage(data, origin).

Envie mensagens da página pai para o iframe: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). No iframe, escute as mensagens: window.addEventListener("message", handler). Sempre verifique event.origin antes de processar a mensagem.

loading="lazy" em iframes adia o carregamento até que o iframe esteja próximo da janela de visualização, reduzindo o carregamento inicial da página. É útil para mapas abaixo da área inicialmente visível, vídeos incorporados e widgets de redes sociais que não estão imediatamente visíveis.

Cada iframe carrega um documento HTML, CSS, JavaScript e recursos separados — um custo significativo de recursos. Evite iframes para conteúdo que poderia ser incorporado como um trecho. Faça o carregamento tardio de iframes abaixo da dobra. Considere padrões de fachada (mostre um espaço reservado e carregue ao clicar).

Controle o comportamento de rolagem do iframe: scrolling="no" desativa as barras de rolagem (obsoleto; use CSS overflow: hidden no iframe). A abordagem moderna é definir a altura do iframe para corresponder à altura do conteúdo, eliminando a necessidade de barras de rolagem internas.

O atributo allow concede recursos da Política de Permissões ao iframe: allow="camera; microphone; fullscreen". Isso permite que o iframe solicite acesso à câmera, acesso ao microfone e à API de tela cheia, mesmo quando a origem pai não usa esses recursos.

YouTube e Google Maps fornecem códigos de incorporação de iframe. Eles incluem atributos allow para tela cheia e reprodução automática. Sempre adicione title="Video title" para garantir a acessibilidade a leitores de tela. O atributo sandbox normalmente não é adicionado aos códigos de incorporação de terceiros — consulte a documentação deles para obter orientações de segurança.

O que o atributo sandbox faz com um iframe, por padrão, quando não tem valores?

Os iframes incorporam documentos externos em contextos de navegação isolados. O atributo sandbox restringe os recursos do iframe — conceda apenas as permissões mínimas necessárias. postMessage permite uma comunicação segura entre origens diferentes. O carregamento tardio adia o custo dos recursos de iframes abaixo da dobra. O atributo allow concede recursos da Política de Permissões a incorporações de terceiros confiáveis.