Unsecure image linking in Codepen

1

Hi,
I’m looking at the chrome inspect tool and saw that I have errors in my codepen code. It looks like it’s because the image I’m linking for my header is from an http: site when codepen is https: Is this something I should bother with or is it just letting me know it’s coming from an unsecure site?

Here is the error code:
Mixed Content: The page at ‘https://s.codepen.io/boomerang/67ab201072142d5b5e917ef34c6140461466120888824/index.html’ was loaded over HTTPS, but requested an insecure image ‘http://torontovideoproduction.ca/wp-content/forum/uploads/2016/04/Toronto-Video-Production-Header.jpg’. This content should also be served over HTTPS.

2

In general, you want to worry about that HTTPS stuff. Thankfully, it’s really easy to account for. Instead of specifying which protocol you want to use, just place two slashes at the beginning of the URL.

//torontovideoproduction.ca/wp-content/forum/uploads/2016/04/Toronto-Video-Production-Header.jpg

This way, if you’re connected to CodePen via HTTPS, your browser will automatically try to fetch the picture using HTTPS. If you’re just using HTTP, it’ll connect that way as well.

I just tried this out in my own CodePen, and it seems like the server hosting the picture isn’t properly configured for HTTPS, so it’s just failing. It’d be best to download the photo, then host it somewhere yourself that uses encryption (Dropbox is an easy way to do this), but if you really can’t be bothered with that, just keep accessing the photo via HTTP.

1 Like
3

Thanks! I’ll try it with the slashes, then I’ll upload it to dropbox and try to link it from there.

Thanks for your help!

4

Hi,
Tried hosting it on dropbox, but it doesn’t work. I think it’s because dropbox sets it up as a download. Do you know a way to do it with dropbox?

5

Found this by another camper - image hosting in dropbox

1 Like
6

That worked perfectly! Thanks, I’ll host my images there from now on

7

Looks like people beat me to it on the awesome suggestions, but photo bucket is another option.