iframe: a less than useful look at the abuse the iframe takes

Slide 1

Slide 1 text

A less than useful look at the abuse the iframe takes. Remy Sharp • @rem • Left Logic

Slide 2

Slide 2 text

2007: detect globals 2008: jsbin 2010: jsconsole 2011: responsivepx

Slide 3

Slide 3 text

2008: 1.jsbin.com

Slide 4

Slide 4 text

2010: 2.jsbin.com

Slide 5

Slide 5 text

2012: 3.jsbin.com

Slide 6

Slide 6 text

framesets

Slide 7

Slide 7 text

Amazingly still work! two frames side by side

Slide 8

Slide 8 text

document.body = frameset

Slide 9

Slide 9 text

Scott Isaacs @ Microsoft 1997

Slide 10

Slide 10 text

iframe support dropped in XHTML 1.1 Lack of support in IE7 meant iframes stuck around.

Slide 11

Slide 11 text

Foundation of early comet techniques 2000/2006 var iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.head.appendChild(iframe); iframe.src = '/live-stream'; require('http').createServer(function (req, res) { res.writeHead(200, { 'content-type': 'text/html' }); res.write(sendPadding()); setInterval(function () { res.write(getLiveData()); }, 1000); });

Slide 12

Slide 12 text

iframe must be in DOM to start writing to it var window = iframe.contentWindow || iframe.contentDocument.parentWindow;

Slide 13

Slide 13 text

function iframe() { var iframe = document.createElement('iframe'); document.body.appendChild(iframe); return iframe.contentWindow || iframe.contentDocument.parentWindow; } var window = iframe(), document = window.document; document.open(); document.write(myAwesomeHTML); document.close();

Slide 14

Slide 14 text

Load won't ﬁre until .close is called - though content loads

Slide 15

Slide 15 text

Take a generated iframe out of the DOM, it'll reset

Slide 16

Slide 16 text

Dynamic iframes don't behave like regular windows !

Slide 17

Slide 17 text

The "stick it in an iframe" bit

Slide 18

Slide 18 text

Auto-play! Missing on mobile? iOS 4 only :(

Slide 19

Slide 19 text

Site doesn't have JSON API? Put their HTML embed in an iframe and scrape away!

Slide 20

Slide 20 text

Detecting globals

Slide 21

Slide 21 text

Mobile WebView (PhoneGap, Chrome for iOS, etc)

Slide 22

Slide 22 text

Click-jacking Watch out!

Slide 23

Slide 23 text

Preventable in IE9+ via X-Frame-Options: SAMEORIGIN

Slide 24

Slide 24 text

Damn you mobile version

Slide 25

Slide 25 text

"Damn ﬂash-ad is showing through the dropdown!"

Slide 26

Slide 26 text

Sync loading can be oﬄoaded to iframes, as it won't block the parent frame.

Slide 27

Slide 27 text

Factory reset a Samsung S3?

Slide 28

Slide 28 text

x-frame comms

Slide 29

Slide 29 text

For bi-directional non- sockets comms

Slide 30

Slide 30 text

Used in jsconsole's remote

Slide 31

Slide 31 text

your mobile site add iframe origin: jsconsole.com jsconsole.com postMessage & onmessage EventSource Ajax post

Slide 32

Slide 32 text

Set "base" origin via document.domain

Slide 33

Slide 33 text

iframe a.com – iframe b.com — iframe a.com Deep communication http://bit.ly/cross-domain-barrier

Slide 34

Slide 34 text

Passing data before load event via: window.name

Slide 35

Slide 35 text

Sandboxing iframe return "clean" object

Slide 36

Slide 36 text

Enable appcache on unknown urls

Slide 37

Slide 37 text

•Request / == "app chrome" •All other urls include iframe to light manifest page •Manifest says: FALLBACK: /* / •Therefore: any request to an unknown url, the "app chrome" will load via the fallback

Slide 38

Slide 38 text

Future / Now / Good Parts • postMessage/onMessage • seamless • srcdoc • sandbox="allow-same-origin allow-forms allow-scripts" http://benvinegar.github.com/seamless-talk/

Slide 39

Slide 39 text

In the next episode: setTimeout! Remy Sharp • @rem • Left Logic leftlogic.com/hiring