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. 
   A less than useful look at
   the abuse the iframe takes.
   Remy Sharp • @rem • Left Logic
   

   View Slide

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

   View Slide

3. 2008: 1.jsbin.com
   

   View Slide

4. 2010: 2.jsbin.com
   

   View Slide

5. 2012: 3.jsbin.com
   

   View Slide

6. framesets
   

   View Slide

7. Amazingly still work!
   two frames side by side
   

   View Slide

8. document.body = frameset
   

   View Slide

9. Scott Isaacs @ Microsoft 1997
   

   View Slide

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

    View Slide

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);
    });
    

    View Slide

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

    View Slide

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();
    

    View Slide

14. Load won't fire until .close is
    called - though content loads
    

    View Slide

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

    View Slide

16. Dynamic iframes don't
    behave like regular windows
    !
    

    View Slide

17. The "stick it in an iframe" bit
    

    View Slide

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

    View Slide

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

    View Slide

20. Detecting globals
    

    View Slide

21. Mobile WebView
    (PhoneGap, Chrome for iOS, etc)
    

    View Slide

22. Click-jacking
    Watch out!
    

    View Slide

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

    View Slide

24. Damn you mobile version
    
    

    View Slide

25. "Damn flash-ad is showing
    through the dropdown!"
    

    View Slide

26. Sync loading can be offloaded
    to iframes, as it won't block the
    parent frame.
    

    View Slide

27. Factory reset a Samsung S3?
    
    

    View Slide

28. x-frame comms
    

    View Slide

29. For bi-directional non-
    sockets comms
    

    View Slide

30. Used in jsconsole's remote
    

    View Slide

31. your mobile site
    add <br/>iframe<br/>origin: jsconsole.com<br/>jsconsole.com<br/>postMessage &<br/>onmessage<br/>EventSource<br/>Ajax post<br/>

    View Slide

32. Set "base" origin via
    document.domain
    

    View Slide

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

    View Slide

34. Passing data before load
    event via: window.name
    

    View Slide

35. Sandboxing
    iframe return "clean" object
    

    View Slide

36. Enable appcache on
    unknown urls
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide