Fixing Mixed Content Issues 

Once your site is up and running with SSL, there’s a type of issue that commonly arises, called a “mixed content” issue. Some sites don’t end up with any mixed content issues, some sites do. Sometimes they’re rare enough you may not notice, other times they can break existing functionality.

This guide will help you understand mixed content, the effect it has on your site, and how to find and fix it.

What is mixed content?

When a user views a page in their web browser, there are usually dozens (or even hundreds) of files (or assets) that are loaded: an HTML document, CSS files, JavaScript files, images, videos, etc. “Mixed content” occurs when the page is loaded securely over HTTPS, but one or more of the other assets are loaded over HTTP.

What happens if I have mixed content on my site?

It depends. There are two types of mixed content:

  • Active mixed content refers to things like scripts, frames, etc. that include code and run in the user’s browser. Because these assets are executed, they could do a lot of damage if tampered with (because of the insecure connection). Accordingly, most browsers block active mixed content – this usually causes some functionality to break.
  • Passive mixed content refers to things like images, audio files, and videos that are displayed but don’t include code. Because they pose a lower risk, browsers generally allow passive mixed content – but they treat the entire containing page as insecure. Among other things, this means that users won’t see a padlock in the address bar of their browser.

How can I find mixed content on my site?

This is often the hardest part about switching to SSL – finding anywhere there’s mixed content on your site.

To help make it easier, we’ve created a free service called Missing Padlock. Just enter the URL of your site, and we’ll crawl it and find pages with mixed content. It’s not foolproof – there are a few types of mixed content we can’t identify automatically – but it’s a great starting point.

Your web browser can also help you out. If you load a page with mixed content, both Chrome and Firefox will display a message in the Developer Tools console identifying the asset.

Here's what Chrome displays for passive mixed content:

And here's what you'll see for active mixed content in the Chrome Developer Tools Console:

How do I fix mixed content?

Generally there’s just a URL that you need to change from HTTP to HTTPS. For example, if the mixed content asset is an image, you might have an HTML tag like this:

<img src="http://www.test.com/image.jpg" />

You would change the “http” in the URL to “https”, like this:

<img src="https://www.test.com/image.jpg" />

You can also eliminate the protocol altogether, like this:

<img src="https://www.test.com/image.jpg" />

Regardless, the asset on the other site must support HTTPS. So in the example above, you’d want to make sure that www.test.com supports HTTPS.

Where can I learn more about this?

Here are a few helpful resources:

X
An error (Object reference not set to an instance of an object.) was encountered trying to format content from PageUrl=/SocialMedia.htm