O nosso amigo iFrame - Speaker Deck

Slide 1

Slide 1 text

O nosso amigo Jaydson Gomes - 7Masters 2013

Slide 2

Slide 2 text

Jaydson Gomes Terra BrazilJSRSJS JavaScriptHTML5

Slide 3

Slide 3 text

Agenda ● Especificação ● HTML5 ● Cases

Slide 4

Slide 4 text

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 e um , ou um e um , mas não um e um . podem ser usados normalmente no documento.

Slide 5

Slide 5 text

Especificação Same Origin Policy!

Slide 6

Slide 6 text

Especificação Attributes 4.01: align frameborder height longdesc marginheight marginwidth scrolling width

Slide 7

Slide 7 text

HTML5 Attributes 5: src srcdoc name sandbox seamless

Slide 8

Slide 8 text

HTML5 srcdoc Conteúdo sem “src”, ou seja, não há necessidade de um arquivo HTML!

Slide 9

Slide 9 text

HTML5 sandbox Permite adicionar um conjunto de restrições extras sobre o conteúdo de um iframe.

Slide 10

Slide 10 text

HTML5 sandbox * Não permite a navegação em outros contextos * Não permite navegação ao top-level * Impede plugins * 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

Slide 11

Slide 11 text

HTML5 sandbox allow-same-origin allow-top-navigation allow-scripts allow-forms

Slide 12

Slide 12 text

HTML5 seamless Browser renderiza o iframe de maneira que o mesmo pareça fazer parte do documento

Slide 13

Slide 13 text

True Cases

Slide 14

Slide 14 text

True Cases Evil document.write()

Slide 15

Slide 15 text

True Cases

Slide 16

Slide 16 text

True Cases LocalStorage Cross-domain

Slide 17

Slide 17 text

True Cases

Slide 18

Slide 18 text

GlobalStorage HTML PostMessage() cross-domain www.terra.com gs.terra.com

Slide 19

Slide 19 text

True Cases * Cross-domain

Slide 20

Slide 20 text

True Cases

Slide 21

Slide 21 text

Obrigado!

Slide 22

Slide 22 text

Referências https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe http://www.w3.org/wiki/HTML/Elements/iframe