Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

There are certain URLs on CodePen that require something called a Referer header.

From MDN:

The Referer request header contains the address of the previous web page from which a link to the currently requested page was followed. The Referer header allows servers to identify where people are visiting them from and may use that data for analytics, logging, or optimized caching, for example.

(Note the obnoxious misspelling of the word “Referrer”? That’s just how it is.)

As an example of what a Referer header is, say you’re on that MDN page, and you click over to CodePen. That request to the CodePen servers will have headers, and among them, likely a Referer header which will tell us the site you just came from.

We don’t do all that much with that. It’s somewhat interesting from an analytics perspective (we use Google Analytics), but it’s not some vitally important business information, nor do we store that data to try and build up some secret creepy data store about you.

But as I said, there are a few URLs on CodePen that require it.

Why?

We need it as a form of security.

No surprise to y’all, you can write code on CodePen. You can make full-blown websites with HTML, CSS, and JavaScript and look at them, right on codepen.io. That’s great for developers, but it’s also appealing to certain segments of bad people (criminals, really). If there is something bad you can do client side, these folks try it. They build spammy landing pages pointing to other nefarious websites. They build phishing landing pages. They include tracking scripts.

Fortunately, there are all kinds of protections against this. Here’s a few:

• Anonymous Pens can only be viewed in the editor and are not indexed for search.
• Full page view is only available to registered members who have verified their email address. Registration sometimes involves a captcha as well.
• The only view without any CodePen UI is Debug View, which has its own slew of restrictions that make it undesirable to criminals.

There are some secret views on CodePen as well. These views behave a lot like the unrestricted Debug View, but are even more restricted.

I say “secret”, but of course, you can just look at the src of the <iframe> and see it yourself. But, we make sure that URL isn’t of any use outside of how it’s being used in grids on CodePen itself.

A Complication: Blocked Referer Headers

Referer headers can be blocked. For example, perhaps you use a browser extension like Referer Control to do that intentionally. You might do that to thwart tracking scripts (totally understandable). Or perhaps you use a security-focused browser that does this as one of it’s features.

If your browser is not providing a referer header, Pens in the grid and in embeds will show an error.

New UI for Blocked Referer Headers

For a long time, we simply 404’d requests that were missing Referrer headers, which was a bit confusing. It almost looked as if the original owner of the Pen or Project had deleted the code. It certainly didn’t explain what was happening, even though on our end we knew exactly what was happened.

Now if you have blocked Referer headers, you’ll see an error message like this:

Same for embeds, which have the same requirement: