O nosso amigo iFrame

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

O nosso amigo iFrame

O nosso amigo iFrame

Jaydson Gomes

More Decks by Jaydson Gomes

Other Decks in Programming

Featured

Transcript