How to Fix Mixed Content Issue of Your Website?

If the images are not appearing on your website and you’re getting an error “This page is trying to load scripts from unauthenticated sources” then this article is for you. Below we will share the easiest way to fix this Mixed Content Error.

One of the most common reasons for getting this type of error is ‘Mixed Content Error‘. Mixed Content Error appears when you allow the use of http content on https pages. So any content that appears on the http site, will get blocked by the browser saying ‘Unsafe Script‘.

Images and SSL Certificate

If you are wondering how your website’s images are connected to SSL Certificate, then you must read out the below paragraph.

When you allow the use of both http and https on your website, then there is a possibility that your images may get load on the http site and it get blocked by the browser.

Yes, it will load the entire website without any images. Next, when you allow the browser to load the unsafe content, it will load the entire website properly. Thus your images are getting blocked by the browser saying it unsafe content.

How to Check the Blocked Content?

It is very easy to check the blocked content on your website. You can take the help of developer tool available in the browser. Enable the developer tool and load the website, the list of blocked content will start appearing on the screen.

Here, it is important to note that developers tool will not display the blocked content of the entire website. Instead, it will display the blocked content of that particular web page only.

You are getting this error because, Mixed Content are allowed on your website.

How to fix Mixed Content Error?

It is very easy to fix the mixed content error on your website. All you need to do is load the blocked content on https site. Once you stop using http on your website, the problem will get resolved automatically.

Assuming you are using CloudFlare for your website, you can force to use https for your entire site. It will not allow your website to use both http and https. Instead, it will force your entire website to load on a https.

Follow the below steps to force your website to use https on the entire site.

• Login to CloudFlare Account
• Go to Crypto
• Set to ‘Full’ as shown in below image

Mixed Content Problem will arise if it is set to ‘Flexible‘, that mean it can use both http and https as well.

Next, SSL Certificate is set to ‘Full’ but still, images are not getting load completely. If this is the case then make sure you had not installed any conflicting plugins or modules.

For Example, if you had installed W3 Total Cache on your WordPress Website, then you need to follow the below additional steps to fix this issue.

• Login to your WordPress Account
• Go to W3 Total Cache admin page
• Go to ‘Extension‘ as shown in below image

• Go to CloudFlare Setting
• At the bottom of the page, select ‘Full’ form the option available.

That’s it. It will now use https for the entire website and your image will start appearing on the website.

So, over all this problem is caused by allowing use of both http and https. You need to ensure that you do not select the ‘flexible‘ option at any stage of installing the website or blog. If you allow the use of both content then there is chance that you may face the problem of mixed content.

Now, its your turn. If you had resolved this problem by any other means then please share the same with us. Further, feel free to write to us if you face any problem in using this techniques. We will be happy to help you out. You can also share your message in the below comment box.