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

Why even bother with iframes?

There are big problems, though

  • They have a terrible reputation; historically they’ve been used pretty much exclusively for advertizing and tracking.
  • 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?

  • Pre-render to avoid the perception of slow rendering
  • 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?

Prevent click-jacking once and for all

  • Is the frame at 100% opacity
  • 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

Provide a permission mechanism for cookies

Add a way to pass window references through iframes

Allow iframes to be rendered with high priority

Others?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store