O nosso amigo iFrame

Palestra dada no 7Masters, sobre iFrames!

1. O nosso amigo <iFrame> Jaydson Gomes - 7Masters 2013
2. Jaydson Gomes Terra BrazilJSRSJS JavaScriptHTML5
3. Agenda • Especificação • HTML5 • Cases
4. 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.
5. Especificação Same Origin Policy!
6. Especificação Attributes 4.01: align frameborder height longdesc marginheight marginwidth scrolling width
7. HTML5 Attributes 5: src srcdoc name sandbox seamless
8. HTML5 srcdoc Conteúdo sem “src”, ou seja, não há necessidade de um arquivo HTML!
9. HTML5 sandbox Permite adicionar um conjunto de restrições extras sobre o conteúdo de um iframe.
10. 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
11. HTML5 sandbox allow-same-origin allow-top-navigation allow-scripts allow-forms
12. HTML5 seamless Browser renderiza o iframe de maneira que o mesmo pareça fazer parte do documento
13. True Cases
14. True Cases Evil document.write()
15. True Cases
16. True Cases LocalStorage Cross-domain
17. True Cases
18. GlobalStorage HTML PostMessage() <iframe> cross-domain www.terra.com gs.terra.com
19. True Cases * Cross-domain
20. True Cases
21. Obrigado!
22. Referências https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe http://www.w3.org/wiki/HTML/Elements/iframe