O nosso amigo
<iFrame>
Jaydson Gomes - 7Masters 2013
Jaydson Gomes
Terra BrazilJSRSJS
JavaScriptHTML5
Agenda
● Especificação
● HTML5
● Cases
Especificação
HTML inline frame element:
* Representa outro contexto de navegação
* Outra página HTML embedada
* HTML 4.01 diz que um documento deve ter um <head> e
um <body>, ou um <head> e um <frameset>, mas não um
<body> e um <frameset>. <Iframes> podem ser usados
normalmente no documento.
Especificação
Same Origin Policy!
Especificação
Attributes 4.01:
align frameborder height longdesc
marginheight marginwidth scrolling width
HTML5
Attributes 5:
src srcdoc name sandbox seamless
HTML5
srcdoc
Conteúdo sem “src”, ou
seja, não há necessidade
de um arquivo HTML!
HTML5
sandbox
Permite adicionar
um conjunto de
restrições extras
sobre o conteúdo
de um iframe.
HTML5
sandbox
* Não permite a navegação em outros contextos
* Não permite navegação ao top-level
* Impede plugins <embed><object><applet>
* Impede que um iframe filho possua seamless
* Força uma origem única, impedindo acesso a mesma origem
* Bloqueia submissão de formulários e execução de scripts
* Bloqueia auto-trigger
HTML5
sandbox
allow-same-origin allow-top-navigation
allow-scripts allow-forms
HTML5
seamless
Browser
renderiza o
iframe de
maneira que o
mesmo pareça
fazer parte do
documento
True Cases
True Cases
Evil document.write()
True Cases
True Cases
LocalStorage Cross-domain
True Cases
GlobalStorage
HTML
PostMessage()<iframe>
cross-domain
www.terra.com
gs.terra.com
True Cases
* Cross-domain
True Cases
Obrigado!
Referências
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
http://www.w3.org/wiki/HTML/Elements/iframe

Jaydson Gomes: O Nosso Amigo iFrame