Skip to main content

Compreender os novos elementos "IFRAME" em HTML5

aula 4829 html5 css3 js Novos Elementos de Estrutura para HTML5 header footer nav section article (Pode 2025)

aula 4829 html5 css3 js Novos Elementos de Estrutura para HTML5 header footer nav section article (Pode 2025)
Anonim

O elemento permite incorporar outras páginas da Web diretamente na sua página da Web. Mas ao usar iframes, há alguns problemas de segurança e design que não foram abordados no HTML 4.01. O HTML5 traz três novos atributos para esse elemento para ajudar a resolver essas questões:

O atributo sandbox

o caixa de areia atributo do IFRAME elemento é um recurso de segurança muito útil de iframes. Quando você coloca em um IFRAME element, você está instruindo o agente do usuário a não permitir recursos que possam causar um risco de segurança para o site e seus usuários.

Por exemplo:

sandbox = "" >

Informa ao navegador para não permitir todos os recursos que possam ser um risco de segurança. Especificamente, os plugins não são permitidos. Formulários não podem ser enviados. Sscripts não serão executados e links fora do IFRAME não é permitido. Por último, o acesso a cookies, armazenamento local e outras páginas no mesmo domínio (origem) não são permitidos.

Então, usando o caixa de areia valores de palavras-chave, você pode reativar alguns dos recursos. Essas palavras-chave são:

  • permitir formulários- permitir a submissão do formulário
  • permitir a mesma origem- permite que scripts acessem conteúdo como cookies do mesmo domínio de origem
  • permitir scripts- permite que scripts sejam executados neste IFRAME
  • permitir navegação superior-Permitir o IFRAME links e scripts para o _topo alvo

Não é uma boa ideia definir os dois permitir scripts e permitir a mesma origem palavras-chave juntas no mesmo IFRAME. Se você fizer isso, a página incorporada poderá remover completamente caixa de areia atributo, negando quaisquer benefícios de segurança.

O Atributo srcdoc

o srcdoc atributo é um atributo que fornece ao web designer mais controle sobre os iframes, além de mais segurança. Em vez de vincular a uma página da Web em uma URL diferente, o Web designer coloca o HTML que deve ser exibido em uma IFRAME dentro de srcdoc atributo.

A princípio, você pode estar pensando: “Como isso é diferente de colocar o HTML diretamente na página?” E, de certa forma, não é muito diferente. Mas você tem que ter em mente uma das funções do IFRAME elemento, que é manter os dados não confiáveis ​​separados do resto do site.

Colocando HTML criado por uma fonte não confiável, como um formulário, em um IFRAME você pode "sandbox" o conteúdo não confiável e ainda exibi-lo na página. Comentários do blog são um exemplo. A maioria dos blogs tem apenas um número limitado de tags HTML que os comentaristas podem usar em seus comentários. Mas colocando esses comentários em um sandbox IFRAME usando o srcdoc atributo, os comentários podem ser mais robustos enquanto ainda protegem o site como um todo.

Segurança e Iframes

Os dois atributos acima fornecem segurança para o seu IFRAME elementos, mas eles não são prova contra todos os sites maliciosos. Se o site mal-intencionado puder convencer um usuário a acessar o conteúdo hostil diretamente (como digitar o URL em seu navegador), ele ainda poderá ser atacado.

Se possível, é melhor definir o conteúdo que está no sandbox IFRAME Enquanto o text / html-sandboxed Tipo MIME.

O atributo ininterrupto

o desatado atributo é um atributo booleano que diz ao navegador para exibir o IFRAME como se fosse parte do documento pai. Se você quiser seu IFRAME para exibir sem problemas, basta incluir esse atributo no elemento:

desatado >

Mas fazendo o IFRAME Sem costura é mais do que apenas a aparência, é também como a página interage com o quadro. Por exemplo:

  • Links no IFRAME será aberto na janela pai, a menos que o IFRAME a página tem o alvo _AUTO conjunto.
  • CSS no IFRAME será adicionado à cascata de todo o documento.
  • O elemento raiz do IFRAME página é considerada um filho do IFRAME.
  • A largura e altura do IFRAME são definidos de maneira semelhante a como outros elementos de nível de bloco seriam definidos.
  • Quando o documento pai é visualizado por uma ferramenta de processamento de fala como um leitor de tela, o IFRAME seria lido sem anunciá-lo como um documento separado.
  • Qualquer script no documento pai afetaria o IFRAME documento da mesma maneira. Por exemplo, se um script listou todos os quadros da página, os links no IFRAME seria listado também.

Em outras palavras, o desatado atributo faz muito mais do que apenas remover as fronteiras do IFRAME. Se você vai definir um IFRAME Para ser transparente, você deve ter certeza do conteúdo para não adicionar nenhum risco de segurança ao seu site ao incorporar um site mal-intencionado.