How to Easily Get Rid of All Mixed Content Errors

Mixed Content Errors?

Do you have mixed content errors on any pages of your site after changing from HTTP to HTTPS? This is caused by your page or a JavaScript script in your page requesting a resource over HTTP. After you’ve searched your site’s files and database for links that use HTTP, you should have gotten them all. However, sometimes scripts on your page will request resources that you’re not aware of. Occasionally there will even be an HTTP request. This was what happened to me recently when I switched my site over to HTTPS. A script was getting loaded that was subsequently requesting an insecure resource. Fortunately, you can get rid of all mixed content errors quickly and finally with this one line of code:

<meta HTTP-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Put this in between the head tags in your header template to get rid of mixed content errors on the entire site. Alternatively, you can put it in the head section of any individual pages that have mixed content errors.

A Word of Caution

This is not magic. It upgrades all HTTP requests to HTTPS before the browser can make them. This means that if there isn’t an HTTPS version of the resource available, the request will fail and you won’t get the resource. Read more here.

If you’re trying to serve your site over HTTPS, this is how it has to be. If you don’t want mixed content errors, you simply cannot load insecure resources. I hope this helps. It certainly helped me get rid of my last few mixed content errors when I switched to HTTPS.