Internet has now become an important part of over half the population in this world. And with that, the need for secure communication over internet is more important than ever before. Secure communication channel over Internet is achieved via HTTPS protocol the help of SSL certificates. It is best to stay clear of websites or blogs that do not have a valid SSL certificate as secure HTTPS connection is not possible with such websites. Major web browsers like Google Chrome, Firefox and Edge warn it’s users of such insecure websites. However, sometimes even if you have enabled HTTPS on your website, you might have noticed mixed content error. In this article, I will guide you on how to fix identify and fix mixed content errors on your site.
Before you dive into this article, I would like to stress the importance of HTTPS or SSL on websites. Without HTTPS, any third party will be able interfere in the communication between a user and your website. These third parties could be hackers or Internet Service Providers or even trying to snoop data or even inject spammy or pop ups ads on your website without your consent or knowledge.
As a blogger, your primary goal should be to retain users on your site. If your visitors are pestered with spammy pop-up ads because your website didn’t have SSL, people are going to leave your site with a bad impression on you and your website.
Nowadays, it is possible to implement HTTPS on websites without additional costs. Blogger platform provides free SSL / HTTPS for blogs on its platform.
Read: Get Free SSL on Blogger
If you have a self-hosted WordPress blog, contact your hosting provider to install free SSL.
So if you don’t have HTTPS or SSL in your website, get it done. If your friend or favorite blogger does not have HTTPS on their blog, share this article with them and ask them to enable HTTPS on their blog.
Now let’s head on to the main topic of this article.
What is Mixed Content?
Such websites are not fully secure and it is possible for a third party to malform your website. So it is very important to fix this issue.
How to Identify Mixed Content Resources?
Figuring out where these resources are loaded by manually going through the code of your website can be a difficult task. Thankfully there is a much easier way to identify mixed content on a website with the help of Google Chrome browser.
On your Google Chrome browser, open up the Developer Tools by clicking on
Ctrl + Shift + I on Windows or
Cmd + Shift + I on Mac OS. You could also open Developer Tools by clicking on three dots on top right corner
> More Tools > Developer Tools.
Once the Developer Tools is open, switch to Security tab and then load your website by entering the URL on the address bar of the web browser. You should find the Security tab of Developer Tools populating with all the resources that were loaded and also show any mixed content errors.
On the left section, you can see resources loaded via non-secure origins. Keep a note of the links shown in that section.
Now switch to Elements tab and click
Ctrl + F or
Cmd + F to bring up the search bar. Paste the links your noted above to find the section of code on your website calling that resource.
How to Fix Mixed Content Errors?
Now that we figured the resources causing the mixed content error and figured out the section of code on your website that is calling this resource, it is quite easy to locate and fix the mixed content error.
Locate Non-secure Origin Resource
Depending on the section of code where the non-secure origin resource was called from, we can figure out where to edit your website to fix this issue.
If the mixed content resource was found within a blog post or page, you should edit the respective blog post or page in your blog or website dashboard.
If the mixed content resource was found in the header, sidebar or footer widgets, you should look into the widgets in your blog / website. For Blogger blogs, these widgets can be found in
Layout section in the Blogger dashboard. In the case of WordPress sites, the widgets can be found in
Appearence > Widgets section in WordPress admin dashboard.
If you were not able to find the non-secure origin resource neither in any blog post, pages or widgets, it is possible that the mixed content resource is added in the code of your blog.
If your blog / website is on Blogger platform, go to
Theme > Edit HTML in Blogger dashboard and click
Ctrl + F or
Cmd + F to bring up search bar and look for the non-secure origin link.
If your blog / website in on WordPress platform, go to
Appearence > Theme Editor and look within the files of your WordPress theme.
Replace HTTP with HTTPS
Now that we located the non-secure origin resource, to fix this mixed content error, simply replace
https://. For example, in the case of the screenshot shown above, the non-secure secure has this URL –
http://img.youtube.com. We would modify it like this –
Repeat the same process for all the non-secure origin resources we identified in step 2 – How to identify mixed content resources.
Once you replace all the resources
https:// link, your site would be fully secure and the mixed content error will be fixed.
I hope you found this guide useful in making your website or blog sully secure. If you are running into any issues, feel free to comment down below.