Post on 22-Apr-2015
description
O nosso amigo <iFrame>Jaydson Gomes - 7Masters 2013
Jaydson Gomes
Terra BrazilJSRSJS
JavaScriptHTML5
Agenda● Especificação● HTML5● Cases
EspecificaçãoHTML 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çãoAttributes 4.01:align frameborder height longdesc marginheight marginwidth scrolling width
HTML5Attributes 5:src srcdoc name sandbox seamless
HTML5srcdoc
Conteúdo sem “src”, ou seja, não há necessidade de um arquivo HTML!
HTML5sandbox
Permite adicionar um conjunto de restrições extras sobre o conteúdo de um iframe.
HTML5sandbox
* 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
HTML5sandbox
allow-same-origin allow-top-navigation allow-scripts allow-forms
HTML5seamless
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ênciashttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframehttp://www.w3.org/wiki/HTML/Elements/iframe