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

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