Jaydson Gomes: O Nosso Amigo iFrame

•

0 j'aime•1,018 vues

iMasters

7Masters JavaScript | Jaydson Gomes

Technologie

O nosso amigo
<iFrame>
Jaydson Gomes - 7Masters 2013

Jaydson Gomes
Terra BrazilJSRSJS
JavaScriptHTML5

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.

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><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

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

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

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

Contenu connexe

Tendances

Spring Security e Spring Boot Aula - 2018André Luiz Forchesatto

.NET Core + MongoDB + Selenium: extração de dados de páginas Web - Databases SPRenato Groff

Zend FrameworkAdler Medrado

Diego Narducci - React + AngularDiego Narducci

Framework web 02 - 2016André Luiz Forchesatto

AngularjsJonata de Souza

Zend Framework em Exemplosxbacon

Mini Curso Zend FrameworkAdler Medrado

Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3André Luiz Forchesatto

Java Web Fácil com VRaptorFrederico Maia Arantes

Panorama atual do PHPAdler Medrado

Desenvolvendo Aplicações com Zend FrameworkDomingos Teruel

Ferramentas Livres Para Desenvolvimento com PHPAdler Medrado

Jquery - Apresentação e aplicação práticaTeles Maciel

React - Biblioteca Javascript para criação de UICleiton Francisco

MVC & Zend FrameworkRodrigo Bonoto

Aula parte 2 de JSF 2.2André Luiz Forchesatto

Entendendo a Arquitetura MVC do Zend FrameworkGedvan Dias

Jsandreluizlc

Spring dataAndré Luiz Forchesatto

Tendances (20)

Spring Security e Spring Boot Aula - 2018

.NET Core + MongoDB + Selenium: extração de dados de páginas Web - Databases SP

Zend Framework

Diego Narducci - React + Angular

Framework web 02 - 2016

Angularjs

Zend Framework em Exemplos

Mini Curso Zend Framework

Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3

Java Web Fácil com VRaptor

Panorama atual do PHP

Desenvolvendo Aplicações com Zend Framework

Ferramentas Livres Para Desenvolvimento com PHP

Jquery - Apresentação e aplicação prática

React - Biblioteca Javascript para criação de UI

MVC & Zend Framework

Aula parte 2 de JSF 2.2

Entendendo a Arquitetura MVC do Zend Framework

Spring data

En vedette

Agências Criativas XXL, que vantagens?Brandlift Group

A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...SlideShare

How to Use Social Media to Influence the WorldSean Si

2015 Upload Campaigns Calendar - SlideShareSlideShare

What to Upload to SlideShareSlideShare

Getting Started With SlideShareSlideShare

En vedette (6)

Agências Criativas XXL, que vantagens?

A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...

How to Use Social Media to Influence the World

2015 Upload Campaigns Calendar - SlideShare

What to Upload to SlideShare

Getting Started With SlideShare

Similaire à Jaydson Gomes: O Nosso Amigo iFrame

HTML - HyperText Markup Language - 2Israel Messias

Curso de Desenvolvimento de Sistemas Web - (X)HTMLFabio Moura Pereira

HTML+&+CSS++Fundamentos.pdfCesar Braz

Html5 Aula 6Jose Berardo

Apoio1020 apostila htmlReinaldo Vieira dos Santos

CSS3 e Html5 - O que há de novo / parte 1Flavia Siqueira

Curso de HTML5 CSS3 e JSLuis Gustavo Almeida

Padroes Webhellequin

Diazo para todosSimples Consultoria

JSF e outras tecnologias Java Web - IMES.javaEduardo Bregaida

Programacao para Web I 03 HTMLDESIGN DIGITAL UNIARA 2012

Html5Alan Pereira

Melhorando A Performance Da Sua Aplicação WebMaurício Linhares

Visão Geral do HTML5 e do Internet Explorer 9Rodrigo Kono

Componentizando a Web com PolymerStefan Horochovec

CODE N' TELL 17/02/2014Rodrigo Donini

Html completoEMSNEWS

ZF Básico - 1. IntroduçãoMarcos Bezerra

Aula de HTML5 - DevCampos - www.devcampos.com.brDevCampos

SEO Para Desenvolvedores Umbler

Similaire à Jaydson Gomes: O Nosso Amigo iFrame (20)

HTML - HyperText Markup Language - 2

Curso de Desenvolvimento de Sistemas Web - (X)HTML

HTML+&+CSS++Fundamentos.pdf

Html5 Aula 6

Apoio1020 apostila html

CSS3 e Html5 - O que há de novo / parte 1

Curso de HTML5 CSS3 e JS

Padroes Web

Diazo para todos

JSF e outras tecnologias Java Web - IMES.java

Programacao para Web I 03 HTML

Html5

Melhorando A Performance Da Sua Aplicação Web

Visão Geral do HTML5 e do Internet Explorer 9

Componentizando a Web com Polymer

CODE N' TELL 17/02/2014

Html completo

ZF Básico - 1. Introdução

Aula de HTML5 - DevCampos - www.devcampos.com.br

SEO Para Desenvolvedores

Plus de iMasters

O que você precisa saber para modelar bancos de dados NoSQL - Dani MonteiroiMasters

Postgres: wanted, beloved or dreaded? - Fabio TellesiMasters

Por que minha query esta lenta? - Suellen MoraesiMasters

Relato das trincheiras: o dia a dia de uma consultoria de banco de dados - Ig...iMasters

ORMs heróis ou vilões dentro da arquitetura de dados? - Otávio gonçalvesiMasters

SQL e NoSQL trabalhando juntos: uma comparação para obter o melhor de ambos -...iMasters

Arquitetando seus dados na prática para a LGPD - Alessandra MartinsiMasters

O papel do DBA no mundo de ciência de dados e machine learning - Mauro Pichil...iMasters

Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudiMasters

Use MDD e faça as máquinas trabalharem para você - Andreza LeiteiMasters

Entendendo os porquês do seu servidor - Talita BernardesiMasters

Backend performático além do "coloca mais máquina lá" - Diana ArnosiMasters

Dicas para uma maior performance em APIs REST - Renato GroffeiMasters

7 dicas de desempenho que equivalem por 21 - Danielle MonteiroiMasters

Quem se importa com acessibilidade Web? - Mauricio MaujoriMasters

Service Mesh com Istio e Kubernetes - Wellington Figueira da SilvaiMasters

Erros: Como eles vivem, se alimentam e se reproduzem? - Augusto PascuttiiMasters

Elasticidade e engenharia de banco de dados para alta performance - Rubens G...iMasters

Construindo aplicações mais confiantes - Carolina KarklisiMasters

Monitoramento de Aplicações - Felipe RegalgoiMasters

Plus de iMasters (20)

O que você precisa saber para modelar bancos de dados NoSQL - Dani Monteiro

Postgres: wanted, beloved or dreaded? - Fabio Telles

Por que minha query esta lenta? - Suellen Moraes

Relato das trincheiras: o dia a dia de uma consultoria de banco de dados - Ig...

ORMs heróis ou vilões dentro da arquitetura de dados? - Otávio gonçalves

SQL e NoSQL trabalhando juntos: uma comparação para obter o melhor de ambos -...

Arquitetando seus dados na prática para a LGPD - Alessandra Martins

O papel do DBA no mundo de ciência de dados e machine learning - Mauro Pichil...

Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud

Use MDD e faça as máquinas trabalharem para você - Andreza Leite

Entendendo os porquês do seu servidor - Talita Bernardes

Backend performático além do "coloca mais máquina lá" - Diana Arnos

Dicas para uma maior performance em APIs REST - Renato Groffe

7 dicas de desempenho que equivalem por 21 - Danielle Monteiro

Quem se importa com acessibilidade Web? - Mauricio Maujor

Service Mesh com Istio e Kubernetes - Wellington Figueira da Silva

Erros: Como eles vivem, se alimentam e se reproduzem? - Augusto Pascutti

Elasticidade e engenharia de banco de dados para alta performance - Rubens G...

Construindo aplicações mais confiantes - Carolina Karklis

Monitoramento de Aplicações - Felipe Regalgo

Jaydson Gomes: O Nosso Amigo iFrame

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