What is Mixed Content?

< More Blogs

Mixed content on a web page occurs when the original HTML document is served over HTTPS but then one or more asset (images, scripts, stylesheets, etc) is loaded over HTTP.

Why is mixed content a problem?

HTTPS is important, it's designed to help keep you and your users safe from attack. Loading a web page over HTTPS just isn't enough; the resources that your pages load are just as important as the page itself.

It's quite simple: having assets loaded over HTTP reduces the security of your website.

HTTPS benefits

The S in HTTPS stands for Secure. The protocol encrypts traffic back and forth between the server and the user. Without it your connection is not secure, and data can be sniffed by any would-be attacker. HTTPS alone isn't a guarantee that your website and users are safe, but not using it is a serious safety issue. The biggest benefit of HTTPS is that it helps prevent eavesdropping of data from others on the network.

How can I check for mixed content?

Well the obvious answer is to use Janitor. We have Mixed Content Checking built in as one of our checks. We'll crawl your website and report back any pages that are loading mixed content.

You can do it yourself too, but it's a manual process that can be quite time consuming. If you're using Chrome, open up dev tools (F12), and click the 'Console tab'. Chrome takes mixed content seriously, so it will alert the browser of it in the console.

Mixed-content-http-https-example
Mixed-content-http-https-example-error

Obviously visiting every web page on your website is going to take a while, and you're not going to want to do it every time you make any sort of change on your website, which is why Janitor will make your life a lot easier.

External libraries cause mixed content too

It's important to understand all assets that you load onto your website, and make sure you trust them. Often external libraries, especially older ones, will be loaded over HTTP rather than HTTPS. Some libraries even load in other libraries as dependencies, so although the library you're loading may be over HTTPS, the dependency may not be. It can get confusing, which is why we recommend using our tool to just do it for you.

Reputation damaging, and bad for your rankings

Google want the best experience for the people they pass to your website. If they find that you're serving mixed content to your users then they'll almost certainly penalise your rankings because of it. Chrome, and other browsers, will show a warning to your users if you have mixed content on the page. If you're an ecommerce or revenue-generating website this can have devastating effects on your conversion rate.

If you want to find out more about mixed content, and see some example code that can cause some problems then Google's Web Fundamentals series has a great article on mixed content.