How To Fix Mixed Content

3 min read

Mixed content can often be the next security challenge for you to address with your website after you’ve installed an SSL certificate.

Instead of seeing the reassuring green lock (or similar) symbol in the address bar of their web browser, visitors are seeing some form of warning, even though your site address now starts with HTTPS.

 

firefox mixed content warnings

chrome mixed content warning

What’s going on?

Why are Internet Explorer, Chrome, Firefox and other browsers appearing to treat your website as only partially secure?  Why are some versions of browsers occasionally giving a message to visitors such as “this site has insecure content” or “only secure content is displayed”?

The issue is mixed content.

Fortunately, it’s an issue you can readily correct (although if you have a larger site, it can be a tedious process).

What is Mixed Content?

When visitors go to a website protected by SSL encryption, they’re expecting a secure connection.  But a site with mixed content isn’t actually a fully secure site, even though it has an SSL certificate.

Mixed content occurs when the HTML file (code) of your website page is loaded over a secure HTTPS connection, but other subresources used by the site and referenced in that code (such as images, videos, stylesheets or scripts) are pulled from an HTTP connection.

The use of subresources is very common in modern websites.

The content on the page is ‘mixed’ because there’s both secure and non-secure content mixed together.

Even though there is an SSL certificate on the site, the non-secure content is still vulnerable.  This means your website is not fully secure (in particular, it’s vulnerable to so-called man-in-the-middle attacks) and this is what web browsers are warning your visitors about.

Types of Mixed Content

There are two types of mixed content: ‘mixed active content’ (also called ‘mixed scripting’ sometimes) and ‘mixed passive content.’  Neither is good, but mixed is definitely worse.

Let’s address the less dangerous one first.  Passive mixed content is more common.  It’s when the subresource being accessed through your HTML isn’t a script.  So it’s an unsecured audio file or image or video file.

A hacker could intercept requests for unsecured images and replace them with other images, for instance.  And they can monitor where and what your visitors are looking at.  It’s not a fully secure environment and so browsers are warning visitors.

Unfortunately, this type of passive mixed content is so common on the web that browsers make the decision not to block these sites because that would cut off too much of the web.

Active mixed content is less common but more dangerous for users.  The HTML of your site is loading a script from an unsecured location.

A hacker could intercept and rewrite content,  take over full control of your entire website, steal passwords and other user information and load malware onto the user’s computer.

This type of mixed content is dangerous enough that instead of offering the normal warning visual cues indicating mixed content, many browsers will simply block access to the entire site.  Again, this is not a good situation for your site to be in.

Identifying and Correcting Mixed Content

To avoid mixed content issues, make sure all content on your website is served via HTTPS and not HTTP.

To manually locate HTTP URLs in your HTML, open the source code of the page on your website.

Search for “src=http” in the search function.  URLs with insecure HTTP addresses will be highlighted.

You can also use the free online resource SSL-check or, if you have a WordPress site, a dedicated plugin such as SSL Insecure Content Fixer.

After you’ve located content that’s being served via HTTP, you’ll first want to make sure that the content is also available via HTTPS.

Simply copy the HTTP URL found in your code into the address bar of your web browser and add ‘S’ to make it an ‘HTTPS” URL.  Then hit enter.  If you’re able to access that resource with the HTTPS URL, it also exists via that secure environment.

Now you need to simply add that ‘S’ into your HTML to make the URL HTTPS in your sites code.  Once all HTTP URLs have been changed in your website’s code, your troubles with mixed content should be behind you.

2018-05-27T22:20:30+00:00