Your SlideShare is downloading. ×
Jaydson Gomes: O Nosso Amigo iFrame
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Jaydson Gomes: O Nosso Amigo iFrame

702
views

Published on

7Masters JavaScript | Jaydson Gomes

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
702
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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