iFrames são parte do padrão HTML há muito tempo. No entanto, no HTML 4.0, eles foram agrupados junto com os frames agora depreciados na variante Frameset-HTML. Os frames não são mais considerados no HTML5, mas os iFrames embutidos sim.
Através dos iFrames é possível incorporar outras páginas da web. O navegador renderiza outro arquivo HTML dentro da página atual. O conteúdo da janela do iFrame pode ser formatado individualmente.
Quando se fala em iFrames, a segurança dessa técnica HTML deve ser considerada novamente. Um problema aqui é a presença de códigos maliciosos que podem ser injetados despercebidamente em páginas da web através de iFrames. Isso é, naturalmente, uma grande irritação.
No entanto, em HTML5, existem mecanismos de segurança correspondentes que podem contornar esses problemas. Mais detalhes serão abordados no decorrer deste tutorial. Antes de usar iFrames, é importante considerar que eles podem representar uma potencial ameaça, especialmente porque os novos atributos de segurança ainda não são suportados por todos os navegadores.
No HTML5, os iFrames fazem parte do padrão fixo e trazem alguns atributos adicionais. O exemplo a seguir mostra como definir iFrames.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
O resultado no navegador seria o seguinte:
O elemento iframe é atribuído ao atributo src. Este src contém o valor da página a ser exibida. Pode ser um arquivo local ou, como no exemplo mostrado, a chamada de um recurso externo.
Os atributos width e height determinam a largura e altura do iFrame. Se o conteúdo incorporado for maior que o tamanho especificado do iFrame, barras de rolagem serão exibidas.
Entre as tags de abertura e fechamento de <iframe>, podem ser definidos conteúdos arbitrários. Entretanto, esses conteúdos só seriam visíveis em navegadores que não reconhecem o elemento iframe.
Novos atributos foram introduzidos para iFrames em HTML5, principalmente relacionados ao comportamento da chamada Política de Mesma Origem.
Nos navegadores, a Política da Mesma Origem garante que uma página da web incorporada não pode ser manipulada durante a exibição. Esta função de segurança é muito útil. No entanto, nem sempre é ideal. Portanto, em HTML5, foi introduzido o atributo sandbox, por meio do qual é possível informar explicitamente aos navegadores quais permissões atribuir ao conteúdo incorporado de uma página externa em um iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames com o atributo sandbox não têm acesso ao DOM da página web incorporada. Além disso, eles não podem executar scripts nem armazenar cookies. Essas restrições podem ser removidas por meio de diversos valores de sandbox.
Diferentes valores podem ser atribuídos ao atributo sandbox. Com allow-forms, a página da web incorporada pode solicitar informações do usuário por meio de formulários. Os usuários não sabem que o formulário não está na página atual.
Se for especificado allow-some-origin, a página da web incorporada é tratada como se fosse do mesmo host. Esse valor anula a Política de Mesma Origem.
O valor allow-top-navigation permite que o conteúdo incorporado altere o conteúdo do contexto de navegação superior.
E ainda temos o allow-script. Com isso, a página da web incorporada pode conter JavaScript que pode manipular a página de incorporação.
Aqui está um exemplo de como uma instrução sandbox correspondente poderia ser:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Além disso, é possível atribuir vários valores. Eles devem ser separados por espaços. Aqui está mais um exemplo:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
Normalmente, os iFrames são projetados para incorporar conteúdo externo. No entanto, também é possível incluí-los.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Este atributo tem seus próprios efeitos. Por exemplo, os destinos de referência no documento incluído – se nada contrário for definido – são exibidos na janela do navegador onde o elemento iframe foi definido (quando incorporado normalmente, os destinos de referência – se nada mais for definido – são exibidos na janela do iFrame).
O seamless é atualmente suportado apenas pelo Google Canary, a versão de desenvolvedor desse navegador.
O outro efeito está relacionado aos estilos. Os estilos da página de inclusão também se aplicam ao documento incluído. (Ao incorporar normalmente, as especificações de estilo nos estilosheets não são aplicadas).
Um novo atributo foi introduzido. Com srcdoc, o conteúdo a ser incluído pode ser definido diretamente. Veja o exemplo a seguir:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>Neste caso, o atributo src está ausente, que normalmente indica o arquivo a ser incluído.
O conteúdo fornecido via srcdoc é tratado como se viesse de um servidor externo, portanto está sujeito à Same Origin Policy. Esse comportamento é interessante, por exemplo, no contexto das definições de scripts. Qualquer código HTML e JavaScript é permitido, mas as aspas e o símbolo "E" devem ser escritos como " e &, respectivamente.
Também é possível definir uma página diretamente aqui para exibir o conteúdo desejado.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
Não é necessário que seja um arquivo HTML completo. O seguinte exemplo também é possível:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
No navegador, isso será exibido da seguinte forma:
Portanto, trata-se de uma sintaxe HTML comum, sem scripts, etc.
Alguns atributos que costumavam ser utilizados para estilização visual, como scrolling, marginwidth e marginheight, não são mais permitidos no HTML5. Esses atributos são substituídos pelo CSS.
