When everyone starts web development for the first time, they hear iframes are terrible! Don’t use them, they’re slow and weird there’s nothing they could ever be good for!
There’s a good reason that we’re taught this. Embedding an iframe in your webpage is similar to having two different browser tabs open. The iframe has it’s own DOM and loading events that aren’t shared with the parent window, this can lead to clunky behaviours when interacting with the iframe. Scrolling on mobile is often the major concern.
An example of an iframe in a HTML page:
If iframes are so bad, why would I use one?
The simple answer is, when you need to run untrusted third party code in your webpage.
We most often see this today in the form of display ads. There is probably one somewhere on your webpages right now. Another use would be websites like Codepen and The Big Crunch where you can write and save HTML/CSS/Javascript code that other users on these websites can see.
Iframes can use Javascript to access elements between the two DOMs if they are hosted in the same domain, this is very dangerous if the iframe is untrusted. Which has the potential risks of malicious activity such as redirecting the user to a malicious website or stealing someone’s authentication. At The Big Crunch we run our website on earlyaccess.bigcrunch.io and serve our iframes from rur.bigcrunch.io. This separation means that users can’t write code that can escape the iframe.
More to come on iframe sandboxing, communication between iframes, scrolling and interactions.
Top comments (0)