English 中文 العربية 日本語 Português

HTML: iframes HTML

Última atualização: 2026-09-08

<iframe> (inline frame) permite incorporar outra página HTML dentro da página atual. Seja incorporando vídeos, mapas ou outras páginas web, iframes são uma ferramenta indispensável no desenvolvimento web.

Tags nesta seção: <iframe> <a> <embed> <object> <param>

1. Conceitos Básicos de iframe

Use <iframe src="URL"></iframe> para incorporar outra página web na página atual. Os atributos width e height controlam as dimensões de exibição:

▶ Exemplo

▶ Experimente

2. Atributos de iframe Explicados

Os iframes fornecem vários atributos para controlar o comportamento de incorporação:

O atributo name combinado com target permite que os links abram dentro de um iframe:

▶ Exemplo

▶ Experimente
💡 Acessibilidade em Primeiro Lugar: O atributo title não é opcional para iframes — os leitores de tela o anunciam para ajudar usuários com deficiência visual a entender o conteúdo incorporado. Mesmo que não seja visível na página, sempre adicione um title significativo a cada iframe.

3. Segurança de iframe — O Atributo sandbox

O atributo sandbox impõe restrições adicionais ao conteúdo dentro de um iframe e é uma medida de segurança importante. Ele pode restringir o envio de formulários, pop-ups, execução de scripts e outros comportamentos:

HTML 
<!-- Sandbox mais rigoroso: desativa todos os recursos avançados -->
<iframe src="https://example.com" sandbox=""></iframe>

<!-- Permite scripts, mas bloqueia envio de formulários e pop-ups -->
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

<!-- Permite scripts e formulários, mas ainda bloqueia pop-ups, navegação, etc. -->
<iframe src="https://example.com"
sandbox="allow-scripts allow-forms"></iframe>

4. Incorporação de Conteúdo de Terceiros

O uso mais comum de iframes na prática é incorporar conteúdo de serviços de terceiros, como vídeos do YouTube e mapas do Google:

▶ Exemplo

▶ Experimente

Ao incorporar conteúdo de terceiros, as plataformas geralmente fornecem código iframe pronto em suas opções de compartilhamento/incorporação — basta copiar e colar. Certifique-se de incluir o atributo title e loading="lazy" para otimizar o desempenho de carregamento.

5. Comunicação entre iframe e Página Pai

Quando o iframe e a página pai compartilham a mesma origem (mesmo protocolo, domínio e porta), você pode acessar diretamente o DOM um do outro via JavaScript. Para cenários entre origens, o HTML5 fornece a API postMessage para comunicação segura:

HTML 
<!-- Página pai envia uma mensagem -->
<iframe src="https://outro-dominio.com/pagina"
id="myFrame" title="Página entre origens"></iframe>
<script>
var frame = document.getElementById('myFrame');
frame.contentWindow.postMessage('Olá, iframe!', 'https://outro-dominio.com');
</script>

<!-- Dentro do iframe, recebendo a mensagem (deve estar na página incorporada) -->
<script>
window.addEventListener('message', function(event) {
// Sempre verifique a origem!
if (event.origin !== 'https://dominio-pai.com') return;
console.log('Recebido:', event.data);
});
</script>
🔒 Dica de Segurança: Ao usar postMessage, nunca confie em nada além de event.origin. Sempre verifique a fonte da mensagem para evitar enviar dados confidenciais para domínios não confiáveis.

Tags nesta seção: <iframe> <a> <embed> <object> <param>

❓ Perguntas Frequentes

P Quais são os riscos de segurança do iframe?
R Riscos principais：1）Clickjacking — atacantes incorporam sua página em um site malicioso, induzindo usuários a clicar; 2）Scripting entre sites — conteúdo incorporado pode executar JavaScript malicioso; 3）Vazamento de dados — iframes maliciosos podem roubar informações do usuário. Proteções：use sandbox para restringir funcionalidades, allow para controle preciso de permissões, cabeçalho X-Frame-Options para evitar incorporação.
P Por que o iframe afeta o SEO?
R Mecanismos de busca têm capacidade limitada de indexar conteúdo de iframe：1）Texto, links e imagens dentro de iframes podem não contar para o SEO da página pai; 2）Iframes aumentam o tempo de carregamento da página, afetando pontuações do Core Web Vitals; 3）A experiência mobile pode ser prejudicada. Recomendação：mantenha conteúdo importante na página principal, não em iframes; use iframes apenas para incorporar vídeos, mapas e outros conteúdos de terceiros.
P O que o atributo sandbox faz?
R sandbox cria uma "sandbox" para o iframe, desabilitando todas as operações perigosas por padrão (scripts, formulários, popups, etc.). Você pode habilitar permissões gradualmente：sandbox="allow-scripts" permite JavaScript, sandbox="allow-forms" permite envio de formulário, sandbox="allow-same-origin" permite acesso a cookies. Múltiplas permissões são separadas por espaço. Recomendação：sempre use sandbox, só habilite permissões que realmente precisa.
P Qual é a diferença entre iframe e <embed>/<object>?
R <iframe> é especificamente para incorporar páginas HTML, com suporte completo a recursos (sandbox, postMessage, etc.). <embed> e <object> incorporam conteúdo não-HTML (como PDF, Flash, SVG). No HTML5, <embed> é uma tag vazia; <object> pode conter conteúdo de fallback (<param> e fallback). Recomendação：use <iframe> para páginas web, <embed> ou <object> para PDFs.

📖 Resumo

📝 Exercícios

  1. Incorpore Seu Primeiro Vídeo: Encontre um vídeo no YouTube, copie o código de incorporação e cole no seu arquivo HTML. Certifique-se de adicionar o atributo title e loading="lazy".
  2. Experimento com Sandbox: Crie um iframe, comece com sandbox="" (o modo mais rigoroso) e, em seguida, ative gradualmente allow-scripts e allow-forms, observando como o comportamento muda.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%