Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jaydson Gomes: O Nosso Amigo iFrame

957 views

Published on

7Masters JavaScript | Jaydson Gomes

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jaydson Gomes: O Nosso Amigo iFrame

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

×