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...
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><...
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
Upcoming SlideShare
Loading in...5
×

Jaydson Gomes: O Nosso Amigo iFrame

775

Published on

7Masters JavaScript | Jaydson Gomes

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
775
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×