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.

crossorigin.me is just a simple proxy site.

A CORS proxy is a service that allows developers (probably you) to access resources from other websites, without having to own that website.

The basic idea:

  • There are headers that come along with network requests. Be it the browser requesting an image with <img>, an Ajax request, the src of an <iframe>, whatever.
  • One of those headers is Access-Control-Allow-Origin
  • Browsers use that sometimes to determine what you can and can't do with that request data, largely for security reasons
  • If the Access-Control-Allow-Origin has the value that matches the domain you're using it on (or is a *) permission is granted to do whatever.

I'm sure it's more nuanced than that, but that's the idea.

Sometimes people have CORS issues on CodePen. Assets hosted right on CodePen (through our Asset Hosting PRO feature) are served with proper CORS headers, but even then sometimes there are weird browser bugs. We've seen people have luck passing files through CrossOrigin.me, so if you've experienced anything like this, might as well try it. The most common annoyance is people trying to draw images to <canvas>.

To use, just put the full URL to the resource after the last slash in http://crossorigin.me/, like: