Iframes are just terrible. Here’s how they could be better.

Earlier this year I gave a talk at FullStack conference in London about making iFrames cool again (sorry, you have to log in to see the video — if anyone is listening over at FullStack, it would be really awesome if you could make these videos public!)

Why even bother with iframes?

In a nutshell: iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. There are a metric ton of awesome uses for that other than tracking and advertizing. Nothing else comes close for this purpose; and as a result, I feel we’re not using iframes to their full potential.

There are big problems, though

The talk covered some of the things that iframes (and also popup windows) are really bad at:

  • They’re slow to load, resulting in a pretty terrible user experience.
  • Communication is tricky: messages are fire-and-forget, with no real error handling or responses, or passing any interesting data types
  • Cross-browser issues and implementation differences are common, and less frequently discovered and fixed than other categories of cross-browser bug.
  • Security is problematic, and many other classes of vulnerability need to be taken into account when dealing with cross-browser iframes
  • Popups can only be opened at limited times (usually on a button click), as a prevention mechanism for popup ads
  • Cookie support is limited; with third-party-cookies-disabled mode, and intelligent tracking prevention (ITP) becoming more and more common.
  • Real-estate is limited; by default iframes are constrained to their original size and will not resize to fit any child content. And because they’re sandboxed on the page, it’s not possible to render from within an iframe to another part of the page.
  • Generally speaking: they don’t act like the components we’ve come to know and love, from libraries like React

Are there solutions?

My talk went into how at PayPal, we built zoid to solve some of the major problems with iframes and popups:

  • Automatically resize frames to fit child content
  • Render from inside an iframe to other parts of the page
  • Pass down any kind of data and functions/callbacks as props (just like React), and avoid the nightmare of cross-domain messaging between windows.
  • Make iframes and popups feel like first class (cross-domain) components.

So we’re good?

Yes, and no.

Prevent click-jacking once and for all

There should be a way, from inside an iframe, to check:

  • Are there any elements hovering over the frame
  • Did a click pass through any hovering elements using pointer-events: none?

Provide a way to easily view the domain of an iframe

This could be implemented as a secondary url bar when hovering the cursor over an iframe or focusing on an element inside of it, or something to give the user an idea of the domain they are interacting with at any given time.

Provide a permission mechanism for cookies

Yes, preventing tracking and advertizing is a reasonable goal. No argument from me.

Add a way to pass window references through iframes

This is a little bit more of a technical request; but right now there’s absolutely no way to send a reference to a different window (popup or iframe) through a postMessage.

Allow iframes to be rendered with high priority

Right now iframes are often delayed by browsers behind every other thing. I would love to have some way to set a higher priority, which indicates: the UI loaded in this iframe is really important to the user experience, so please start loading it as soon as possible.

Others?

Right now zoid does a pretty good job at ironing over the cracks in iframes, and solving any problem that it’s possible to solve without browser implementation or api changes.

works for PayPal, as a lead engineer in Checkout. Opinions expressed herein belong to him and not his employer. daniel@bluesuncorp.co.uk