Changed Domains for Iframe Previews

Note: You probably don't need to know any of this and hopefully didn't even notice it.


We used to use the domain s.codepen.io to render previews of the code you write. In the Pen Editor, Details View, Full Page View, and more. Using a different domain (a subdomain in this case) is a very important security aspect of CodePen. If we were executing the code you write on codepen.io itself, that's essentially one massive XSS vulnerability.

We've now updated those same preview iframes to be an entirely different domain. This provides a little bit more security. For example:

  • Extra-eager password managers won't drop your saved CodePen login and password into Pens that are just demonstrating a <form> design.
  • There was a rare bug where users would get logged out because their cookie-storage would get over-stuffed from unusual Pens putting things there.

At the moment, we're using cdpn.io as the domain name for the iframe previews, but this may change at any time. We've re-architected this so it's easier for us to move around as needed.

The only reason this might affect you is if you happen to be someone who has written code to detect if the Pen is rendering in a preview area or in a grid and do different things. If you were specifically, for example, regexing the domain name of the iframe for the existence of s.codepen.io and other pathing information, that maybe be broken now. I'm afraid we can't promise the domain name previews render at going forward. At the moment, the path /fullpage/ is included in the URL which was used before and is still used now, but even that I wouldn't absolutely count on. And remember, I'm just talking about internal iframe URLs that are never publicly exposed. You'd have to be digging around in DevTools to see them anyway, so this is only relevant for you deep internals hackers anyway 😉

Another thing to be aware of is our no-referrer policy for rendering iframes. These internal URLs are meant to only be rendered inside iframes and by codepen.io itself (otherwise it's a security issue), so we require the request for these URLs to include a referrer. If not, you'll see an error page. We've seen a bit of a rise in people seeing this error. Some are legit (you need to send a referrer, no exceptions). But some are a little trickier to sort out. If you're seeing this particular error, and you think it's a mistake, hit us up in support.

The post Changed Domains for Iframe Previews appeared first on CodePen Blog.