Iframes Problem Fixed

2007 Nov 26 - Gabrys

As I stated before, we decided to put all OpenSocial widgets in dedicated iframes (loaded from a different domain) in order to sandbox theirs JavaScript code from wiki pages.

The problem was how to resize the iframe to the height of its content.

One possible solution (pure JavaScript, working and probably one of the best):

  • A wiki page includes a OpenSocial widget as an iframe
    • wiki URL: mygreatwiki.wikdot.com
    • widget iframe URL: os.wikidot.com/widgets/somewidget/and/parameters
  • The widget iframe creates an inner-iframe inside, not visible on the screen
    • URL of the inner iframe must contain the height of the content of the widget iframe (which equals to the height of the widget — suppose it's 265 pixels)
    • URL must be from the same domain as the parent wiki page
    • inner iframe URL example: mygreatwiki.wikidot.com/resize-iframe.html/265
  • mygreatwiki.wikidot.com/resize-iframe.html reads height from its URL and calls parent.parent.resizeIframe(265, and some other parameters) which happens to be in the same domain as the inner iframe (actually the domain is a wiki domain!), resulting passing XSS security protection
  • wiki page resizes the widget iframe as the result of the resizeIframe() call from the inside iframe

It may sound quite complicated at first, but it is a simple idea that just works.

You can check a similar solution at: http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/

Don't forget to comment this blog item.

Backlinks

Recent Posts

Comments

Add a new comment
Unless stated otherwise Content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License