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

C8b387c489181844b3ffc704fadc0f14?s=47 Remy Sharp
December 02, 2013

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

A 20 minute version for dotjs of my iframe abuse talk

C8b387c489181844b3ffc704fadc0f14?s=128

Remy Sharp

December 02, 2013
Tweet

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