When you hear "Mixed content", you might be confused as to what it means. This article will attempt to explain everything you need to know about mixed content, how to detect it, and how to fix it. Let’s begin.

What is mixed content?

"Mixed content" warnings appear when parts of your website are loaded over the insecure HTTP protocol while other resources are loaded over HTTPS, hence the reference "mixed". Having such warnings on your site will case a grayed-out padlock. It will most definitely hinder the visitor's confidence while browsing on your website, so it's worth taking this seriously and configure your entire site to be loaded via HTTPS. You will most likely observe this event when you have just forced HTTPS redirection on your website. Here are some situations that might lead to that:

• You have an embedded video from an unsecured source, and it is being loaded over HTTP on your site, despite the rest of the content being shown with HTTPS.
• Static content such as images, CSS, JS, and HTML files have been hardcoded in your files and are now loading via HTTP.
• There are HTTP versions of external scripts or fonts loaded on your website.

How to find mixed content?

There is an excellent online tool called "Why No Padlock?" which is very handy when looking for mixed content. Type in your website or the troublesome URL under the "Secure Addresses" text field and click the "Test Page" button underneath. Another way you can do that is by using the developer console accessible on all browsers by pressing "F12" and then pressing the "Console" tab. The mixed content warnings will be typically highlighted in red or yellow, and hovering over the URLs will show you the exact file or source causing this.

How do I fix mixed content?

There are several ways you can do that. Let us go over them:

• You need to check all the files on your website along with your database and replace any URLs hardcoded with HTTP to HTTPS.
• If the is an external script loaded via HTTP, you need to check the method you implemented it(usually via plugins or modules on your site) and either replace this external resource with it's HTTPS counterpart or totally remove it.
• Set a response header for your website that "tells" your browser that all resources have to be loaded over HTTPS. All major browsers comply to this header and will start loading the content over HTTPS. When you visit your website afterward, you will see a green padlock in the browser address bar: To do that, add this directive to your .htaccess file:

<ifModule mod_headers.c>
Header always set Content-Security-Policy "upgrade-insecure-requests;"
</IfModule>

If this seems too overwhelming, please do not hesitate to contact our technical support team. They are really resourceful and could recommend a different approach to tackle the Mixed content on your website.