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.

Here’s the plan: On June 1, 2017 all of CodePen will be served over HTTPS.

Of course, ever since we launched, all the sensitive pages of CodePen (like log in, sign up, and anything dealing with your account or payment) have always been HTTPS. This change is for the rest of the site.

Given that this is the right way forward for the web, it’s fair to wonder why we’re not making this change right this minute.

Here’s why: this is a breaking change for some Pens, so we want to give plenty of notice before switching over completely.

What Will Change

Beginning June 1, 2017:

  • Every page on CodePen will be served over HTTPS.
  • Requests that come in over HTTP will be redirected to HTTPS.
  • We’ll attempt to request an HTTPS version of any content linked via HTTP. If an HTTPS version is available, we’ll load that content over HTTPS. If not, the content may fail to load (more details below).

How will this affect my Pens?

Most Pens on CodePen have at least one external resource. For example, a JavaScript library like jQuery, a CSS framework like Bootstrap, or images from a host outside of CodePen.

If all of the resources in your Pens are already linked via HTTPS, nothing will change.

If your Pens include some resources that are not linked via HTTPS, we’ll request an HTTPS version of the resource from the server when your Pen loads. If an HTTPS version of your resource is available, it will load as usual.

If a resource in your Pen is linked over HTTP, and no HTTPS version is available on the server, the browser will handle it differently depending on what kind of content it is.

  • If it’s “active” content, like scripts, iframes, AJAX requests, etc., the browser will block it completely, and display Mixed Content errors in the console.
  • If it’s “passive” display content, like images, audio, and video files, the resource will load, but the browser will display Mixed Content errors in the console, and may warn visitors that the page includes insecure content.

For more information on what browsers consider “passive” and “active” content, see “How to fix a website with blocked mixed content” at MDN.

What about Projects?

We’ve been forcing HTTPS on Projects since its launch, so nothing changes there.

CodePen Asset Hosting

PRO members’ hosted assets are served over HTTPS by default and will not be impacted by this change.

A long time ago (many years), we did not default to HTTPS for our hosted Assets, so it’s possible you have some assets linked up over HTTP somewhere. But, you still won’t be impacted, because our hosted Assets work over HTTPS. So, we’ll automatically upgrade the request to HTTPS and you shouldn’t notice.

Examples

This Pen links up an HTTP version of jQuery, but it will still be OK, because CDNjs supports HTTPS at the otherwise same URL. The request will be upgraded and it will work.
Note that until June 1, 2017, the above example would be broken over HTTPS, because we aren’t upgrading requests until then, but it is already possible optionally view a Pen over HTTPS.
These insecure assets will work right now over HTTP, but will start to fail when we start forcing HTTPS, assuming they are hosted somewhere that doesn’t offer an HTTPS version of the same asset.