Iframe

O que é Iframe?

Um iframe (abreviação de “inline frame”) é um elemento HTML que permite incorporar outra página HTML dentro de uma página web. Em outras palavras, um iframe cria uma “janela” dentro da página principal que pode exibir o conteúdo de outra URL. É uma maneira comum de incorporar vídeos, mapas, documentos, e outros tipos de conteúdo de fontes externas.

A sintaxe básica para um iframe é a seguinte:

<iframe src="URL_da_página_a_ser_incorporada" width="largura" height="altura"></iframe>

Principais usos e características dos iframes:

1. Incorporação de Conteúdo Externo: Iframes são frequentemente usados para incorporar vídeos do YouTube, mapas do Google Maps, documentos do Google Docs, ou outros conteúdos de sites de terceiros.

2. Sandboxing: Iframes podem ser configurados com o atributo sandbox para restringir o comportamento do conteúdo embutido. Por exemplo, você pode evitar que o iframe execute scripts ou envie formulários.

3. Comunicação entre Iframes e a Página Principal: Usando a API de postMessage, é possível estabelecer comunicação entre a página principal e o conteúdo carregado dentro do iframe, permitindo interações complexas.

4. Segurança: Enquanto iframes são úteis, eles podem apresentar riscos de segurança, como ataques de clickjacking. Para mitigar esses riscos, você pode usar cabeçalhos de segurança como X-Frame-Options e Content Security Policy (CSP).

5. Estilo e Responsividade: Iframes podem ser estilizados e ajustados para serem responsivos com CSS, embora possa ser desafiador dependendo do conteúdo incorporado.

Exemplo básico de um iframe:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>

Neste exemplo, um vídeo do YouTube é incorporado na página web. O atributo src define a URL do vídeo, enquanto width e height definem as dimensões do iframe. O atributo frameborder controla a borda do iframe, e allowfullscreen permite que o vídeo seja exibido em tela cheia.

Quais são os atributos do iFrame?

Aqui estão os principais atributos do iframe:

Atributos Principais do <iframe>

1. src

• Define a URL do documento que será carregado dentro do iframe.
• Exemplo:
  <iframe src="https://www.exemplo.com"></iframe>

2. width

• Define a largura do iframe. Pode ser em pixels (ex: 500) ou porcentagem (ex: 100%).
• Exemplo:
  <iframe src="https://www.exemplo.com" width="600"></iframe>

3. height

• Define a altura do iframe. Também pode ser em pixels ou porcentagem.
• Exemplo:
  <iframe src="https://www.exemplo.com" height="400"></iframe>

4. name

• Define um nome para o iframe, que pode ser usado como destino de links ou formulários.
• Exemplo:
  <iframe src="https://www.exemplo.com" name="meuIframe"></iframe> <a href="https://www.outro-site.com" target="meuIframe">Abrir no iframe</a>

5. title

• Fornece uma descrição acessível do iframe para leitores de tela e ferramentas de acessibilidade.
• Exemplo:
  <iframe src="https://www.exemplo.com" title="Descrição do conteúdo do iframe"></iframe>

6. allow

• Define permissões para recursos como câmera, microfone, geolocalização, etc.
• Exemplo:
  <iframe src="https://www.exemplo.com" allow="camera; microphone"></iframe>

7. sandbox

• Restringe as permissões do conteúdo carregado no iframe, aumentando a segurança.
• Valores comuns:
  • allow-scripts: Permite a execução de scripts.
  • allow-forms: Permite o envio de formulários.
  • allow-same-origin: Permite que o conteúdo seja tratado como sendo da mesma origem.
  • allow-popups: Permite a abertura de pop-ups.
• Exemplo:
  <iframe src="https://www.exemplo.com" sandbox="allow-scripts allow-forms"></iframe>

8. loading

• Controla o carregamento do iframe. Pode ser:
  • eager: Carrega o iframe imediatamente (padrão).
  • lazy: Adia o carregamento até que o iframe esteja próximo à área visível da tela.
• Exemplo:
  <iframe src="https://www.exemplo.com" loading="lazy"></iframe>

9. referrerpolicy

• Define como o referenciador (referrer) é enviado ao carregar o iframe.
• Valores comuns:
  • no-referrer: Não envia o referenciador.
  • origin: Envia apenas a origem (domínio) como referenciador.
• Exemplo:
  <iframe src="https://www.exemplo.com" referrerpolicy="no-referrer"></iframe>

10. frameborder (obsoleto em HTML5)
    • Define se uma borda deve ser exibida ao redor do iframe.Valores: 0 (sem borda) ou 1 (com borda).Recomendação: Use CSS (border: none;) em vez desse atributo.Exemplo:
    <iframe src="https://www.exemplo.com" frameborder="0"></iframe>
11. scrolling (obsoleto em HTML5)
    • Controla a exibição de barras de rolagem no iframe.Valores: yes, no, auto.Recomendação: Use CSS (overflow: hidden;) em vez desse atributo.Exemplo:
    <iframe src="https://www.exemplo.com" scrolling="no"></iframe>
12. allowfullscreen
    • Permite que o iframe seja exibido em tela cheia.Exemplo:
    <iframe src="https://www.exemplo.com" allowfullscreen></iframe>
13. srcdoc
    • Permite definir o conteúdo HTML diretamente no atributo, em vez de carregar uma URL externa.Exemplo:
    <iframe srcdoc="<p>Este é um conteúdo embutido.</p>"></iframe>
14. importance (experimental)
    • Define a prioridade de carregamento do iframe.
    • Valores: high, low, auto.
    • Exemplo:
      <iframe src="https://www.exemplo.com" importance="high"></iframe>

Exemplo Completo de Uso

Aqui está um exemplo de iframe com vários atributos:

<iframe
  src="https://www.exemplo.com"
  width="600"
  height="400"
  title="Exemplo de iframe"
  name="meuIframe"
  allow="camera; microphone"
  sandbox="allow-scripts allow-forms"
  loading="lazy"
  referrerpolicy="no-referrer"
  allowfullscreen
></iframe>

Boas Práticas

• Acessibilidade: Sempre use o atributo title para descrever o conteúdo do iframe.
• Segurança: Use o atributo sandbox para restringir permissões e evitar riscos de segurança.
• Desempenho: Use loading="lazy" para iframes que não precisam ser carregados imediatamente.
• Responsividade: Use CSS para garantir que o iframe se ajuste a diferentes tamanhos de tela.

Considerações de Segurança:

É importante observar que os iframes podem representar riscos de segurança se não forem usados com cuidado. Eles podem ser usados para:

• Ataques de Cross-Site Scripting (XSS): Permitir que scripts maliciosos sejam executados no documento pai.
• Ataques de Clickjacking: Enganar os usuários para que cliquem em elementos ocultos no iframe.
• Vazamento de Dados: Expor dados confidenciais do documento pai ao documento incorporado.

Para mitigar esses riscos, é essencial implementar medidas de segurança adequadas, como:

• Restrição de Origens: Limitar as origens dos documentos que podem ser incorporados em iframes.
• Validação de Entrada: Validar as entradas do usuário para evitar ataques de XSS.
• Monitoramento de Atividade: Monitorar a atividade do iframe para detectar comportamentos suspeitos.

Os iframes são uma ferramenta poderosa para incorporar conteúdo externo e adicionar funcionalidades à página web, mas devem ser usados com cuidado para garantir a segurança e a integridade do site.

Qual a diferença de iframe e frame?

A diferença entre iframe e frame está principalmente no contexto de uso e na evolução do HTML. Enquanto ambos permitem a incorporação de conteúdo de outras páginas web, eles têm propósitos e comportamentos distintos. Aqui estão as principais diferenças:

1. iframe (Inline Frame)

• Uso atual: Muito utilizado em HTML5 e versões anteriores. O iframe é amplamente aceito e ainda é considerado uma prática válida para incorporar conteúdo externo em uma página web, como vídeos, mapas e outros sites.
• Posicionamento: O iframe é um elemento inline, o que significa que pode ser usado dentro de um bloco de conteúdo como parágrafos ou divs.
• Funcionalidade: Ele permite carregar outra página da web dentro de uma página existente, mantendo o layout principal intacto. Pode ser usado para integrar vídeos do YouTube, formulários de outros sites, Google Maps, etc.
• Exemplo de uso:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

2. frame (Frameset)

• Uso descontinuado: O elemento frame foi usado em conjunto com o elemento <frameset> para dividir uma página em várias seções, cada uma carregando um documento HTML diferente. Essa abordagem foi usada principalmente em versões antigas de HTML (até HTML4), mas foi descontinuada no HTML5 devido a problemas de usabilidade, acessibilidade e SEO.
• Posicionamento: frame não é um elemento inline. Ele era usado dentro de um <frameset>, que dividia a janela do navegador em várias “janelas” ou subdocumentos.
• Funcionalidade: O <frameset> substituía o uso do <body> em uma página HTML e permitia que várias páginas fossem carregadas dentro de uma única janela do navegador, cada uma em sua própria área. Isso criava layouts complexos, mas muitas vezes resultava em interfaces confusas.
• Exemplo de uso:

<frameset cols="50%,50%">
  <frame src="page1.html">
  <frame src="page2.html">
</frameset>

Resumo das diferenças:

Em resumo, o iframe é o método moderno e preferido para embutir conteúdo externo, enquanto o uso de frames foi descontinuado e substituído por abordagens mais flexíveis e acessíveis como o uso de div e CSS para criar layouts.

Paulo M Luft

Na Agência Metamídia eu ajudo empresas a ter mais visibilidade para seu negócio, entender melhor seus clientes e trazer mais resultados. Formado em Comunicação Social – Publicidade e Propaganda, Web Design programação e pós-graduação em Marketing.