CodePen is all HTTPS now. Hip hip hooray for security!
One kinda niche-but-cool use case of CodePen is to use the editor to play with stuff, but also be linking to resources right off your local computer. You spin up a local server and point external resources right at your
localhost or whatever you have set up.
I hate to say it, but spinning up a local HTTPS server is a decent amount more complicated than these super quick one-liner things we might be used to.
Here's some guides:
- Jed Schmidt's How to set up stress-free SSL on an OS X development machine
- Nicolas Rollier's Enable SSL in Apache (OSX)
- Jonathan Neal's Local SSL websites on macOS Sierra
- Mike MacCana's Never see localhost HTTPS warnings again
There is a lot of overlap in these approaches, most of which culminating in using Keychain to "Always Trust" a local certificate.
It's work, but you can get it done.
I just ran a (disclaimer: sponsored) post over on CSS-Tricks about Local by Flywheel. It's designed for developing WordPress sites locally, but it really can be used for anything (just delete the WordPress stuff you don't care about from the root directory of a new project). I've found it can make this process a whole bunch easier.
It offers SSL support right in the app. So when you spin up a new site, go over to the SSL tab and click the button to trust the certificate.
I've found this to work really seamlessly and well. With other methods, I've gotten HTTPS working only to find I must have done something wrong as HTTPS "works" but the browser still doesn't fully trust it and spits warnings at me. No warnings here.
To recap here, this is the problem with linking to local resources (or really, any resources) over non-secure HTTP:
But if you run your local server over HTTPS and link to an External Asset that way, it's fine: