Logotipo HTML5 na tela
DavidMartynHunt / Flikr / CC BY 2.0

O elemento iframe incorpora outras páginas da web diretamente na página atual. O HTML5 apresenta três novos atributos a este elemento para ajudar a resolver as questões de segurança e usabilidade da implementação do iframe HTML4.

Html5 Iframe: O atributo ‘sandbox’

O atributo sandbox do elemento iframe é um recurso de segurança útil para iframes. Quando você o coloca em um elemento iframe, o agente do usuário desabilita recursos que possam representar um risco de segurança para o site e seus usuários.

Por exemplo:

<iframe sandbox = "" >

instrui o navegador a não permitir todos os recursos que possam representar um risco à segurança – portanto, nenhum plug-in, formulários, scripts, links externos, cookies, armazenamento local e acesso à página no mesmo site.

Em seguida, usando os valores de palavra-chave da sandbox , reative alguns dos recursos. Essas palavras-chave são:

  • allow-forms: Permite o envio do formulário.
  • allow-same-origin: Permite que scripts acessem conteúdo como cookies do mesmo domínio de origem.
  • allow-scripts : permite que os scripts sejam executados neste IFRAME.
  • allow-top-navigation : permite que os links iframe e scripts para o destino “_top”

Não defina as palavras  chave allow-scripts e allow-same-origin juntas no mesmo iframe. Se você fizer isso, a página incorporada poderá remover o atributo sandbox, negando seus benefícios de segurança.

O atributo ‘srcdoc’

O atributo srcdoc oferece ao web designer mais controle sobre os iframes, bem como mais segurança. 

Em vez de vincular a uma página da web em um URL diferente, o web designer coloca o HTML que deve ser exibido em um iframe dentro do atributo srcdoc.

Ao colocar o HTML que é criado por uma fonte não confiável, como um formulário, em um iframe, você pode colocar o conteúdo não confiável em uma caixa de proteção e ainda exibi-lo na página. 

Os comentários do blog são um exemplo. A maioria dos blogs oferece apenas um número limitado de tags HTML que os comentaristas podem usar em seus comentários. 

Mas, ao colocar esses comentários em um iframe em área restrita usando o atributo srcdoc, os comentários podem ser mais robustos e, ao mesmo tempo, proteger o site como um todo.

Segurança e Iframes

Os dois atributos acima fornecem segurança para seus elementos iframe, mas não são uma defesa contra todos os sites maliciosos. 

Se o site malicioso puder convencer os visitantes do site a acessar o conteúdo hostil diretamente (por exemplo, digitando a URL no navegador), eles ainda poderão ser atacados.

Se possível, defina o conteúdo que está no iframe em sandbox como o tipo MIME text / html-sandboxed.

Html5 Iframe: O atributo ‘perfeito’

O atributo seamless é um atributo booleano que informa ao navegador para exibir o iframe como se fosse parte do documento pai. 

Se você deseja que seu iframe seja exibido perfeitamente, basta incluir este atributo no elemento:

<iframe seamless>

Mas tornar o iframe contínuo é mais do que apenas a aparência, é também a forma como a página interage com o quadro. Algumas dicas:

  • Os links no iframe serão abertos na janela pai, a menos que a página do iframe tenha o destino “_SELF” definido.
  • CSS no iframe será adicionado à cascata de todo o documento.
  • O elemento raiz da página do iframe é considerado filho do iframe .
  • A largura e a altura do iframe são definidas de maneira semelhante a como outros elementos de nível de bloco seriam definidos.
  • Quando o documento pai é visualizado por uma ferramenta de renderização de fala, como um leitor de tela, o iframe é lido sem ser anunciado como um documento separado.

Quaisquer scripts no documento pai afetariam o documento iframe da mesma maneira. 

Por exemplo, se um script listasse todos os frames da página, os links no iframe também seriam listados.

Em outras palavras, o atributo seamless faz muito mais do que apenas remover as bordas do iframe

Se você for definir um iframe para ser contínuo, deve ter certeza do conteúdo para não adicionar nenhum risco de segurança ao seu site ao incorporar um site malicioso.

Deixe uma resposta

Exit mobile version