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

A 20 minute version for dotjs of my iframe abuse talk

Transcript

1. <iframe> A less than useful look at the abuse the iframe takes. Remy Sharp • @rem • Left Logic
2. 2007: detect globals 2008: jsbin 2010: jsconsole 2011: responsivepx
3. 2008: 1.jsbin.com
4. 2010: 2.jsbin.com
5. 2012: 3.jsbin.com
6. framesets
7. Amazingly still work! two frames side by side
8. document.body = frameset
9. Scott Isaacs @ Microsoft 1997
10. iframe support dropped in XHTML 1.1 Lack of <object> support in IE7 meant iframes stuck around.
11. 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); });
12. iframe must be in DOM to start writing to it var window = iframe.contentWindow || iframe.contentDocument.parentWindow;
13. 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();
14. Load won't fire until .close is called - though content loads
15. Take a generated iframe out of the DOM, it'll reset
16. Dynamic iframes don't behave like regular windows !
17. The "stick it in an iframe" bit
18. Auto-play! Missing <bgsound> on mobile? <iframe src="muzak.mp3"></iframe> iOS 4 only :(
19. Site doesn't have JSON API? Put their HTML embed in an iframe and scrape away!
20. Detecting globals
21. Mobile WebView (PhoneGap, Chrome for iOS, etc)
22. Click-jacking Watch out!
23. Preventable in IE9+ via X-Frame-Options: SAMEORIGIN
24. Damn you mobile version <meta name="viewport" ...>
25. "Damn flash-ad is showing through the dropdown!"
26. Sync loading can be offloaded to iframes, as it won't block the parent frame.
27. Factory reset a Samsung S3? <iframe src="tel:*2767*3855%23"></iframe>
28. x-frame comms
29. For bi-directional non- sockets comms
30. Used in jsconsole's remote
31. your mobile site add <script> iframe origin: jsconsole.com jsconsole.com postMessage & onmessage EventSource Ajax post
32. Set "base" origin via document.domain
33. iframe a.com – iframe b.com — iframe a.com Deep communication http://bit.ly/cross-domain-barrier
34. Passing data before load event via: window.name
35. Sandboxing iframe return "clean" object
36. Enable appcache on unknown urls
37. •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
38. Future / Now / Good Parts • postMessage/onMessage • seamless • srcdoc • sandbox="allow-same-origin allow-forms allow-scripts" http://benvinegar.github.com/seamless-talk/
39. In the next episode: setTimeout! Remy Sharp • @rem • Left Logic leftlogic.com/hiring