We were recently working on a website created by another agency when we noticed that the “Secure” lock icon wasn’t displaying in the browser’s URL field. The site definitely had an SSL certificate installed, and was loading over HTTPS. So why wasn’t the “Secure” message showing? Mixed content turned out to be the culprit. As it happens, websites that have SSL certificates installed often do display a mixed content error message. When mixed content errors are present, the “Secure” padlock won’t display. This article will explain why that happens and how to fix it.
What is mixed content?
We’ve covered the “Not Secure” warning in a past article on how HTTPS works. If you recall, it’s usually a result of the site loading without an SSL certificate installed. However, in order for the trusted padlock icon to show in a site’s URL bar, the entire site needs to be loading over HTTPS. This is where the issue of mixed content comes into play.
In the prior article, we covered two different messages that display in the browser’s URL bar: the “secure” and “not secure” messages shown below.
Google Chrome’s address bar on a non-secured HTTP site vs a secured HTTPS site.
There is however, a third message that can display when the page is loading over HTTPS, but not all resources are. This is the mixed content warning.
Mixed content warning in Google Chrome
If a website is loading anything over an HTTP connection, the browser will not show the secure padlock notification.
Why is mixed content a big deal?
Mixed content can be a big security risk. Especially if you are loading sensitive resources like stylesheets, scripts, and iFrames over an unsecured connection. Unsecured “active content” as it is known, is what allows bad guys to hijack a site and use it for bad things like phishing. Unsecured content can provide an entry point for hackers to take complete control over a webpage. If a site is loading active mixed content over HTTP, an error will display in the browser’s developer console.
Active mixed content errors displaying in Chrome’s Developer Console
Most of the insecure warnings we see are images, or other “passive content” that isn’t as much of a threat. Passive content is not subject to the hijacking scenario explained above. In the case of the customer’s site I mentioned in the first paragraph, the developer simply forgot to migrate some of the image paths to the live site. The result was a few images loading over an HTTP connection, which caused the mixed content warning in the developer console.
Passive mixed content warning in Google Chrome’s Developer Console
While it’s not nearly as big of a deal as active mixed content, passive mixed content can still pose a security risk to your site. For example, if an image is delivered over an unencrypted connection, a hacker could delete or change those images on your site. That’s why a warning notice will still be displayed.
Further reading
If you’re a big nerd like myself, you can dig into Google’s developer page on mixed content for more details.
Upcoming changes to browsers
Google has decided to get tough on mixed content. Starting in December of 2019 with Chrome 79, the browser will begin blocking resources that are loaded over an HTTP connection. Chrome users will still have a chance to “unblock” insecure resources, but that option will be phased out in January of 2020.
The good news is that in addition to blocking the insecure resources, Chrome will try to load the same resource over HTTPS, if it exists. This means that if you have a non-secure message displaying because of an image path that includes the HTTP prefix, Chrome will try to load the image URL using the HTTPS prefix. This may help in the intermediate term, but it’s still necessary to ensure that your website is loading resources properly. Next, we’ll cover how you can make sure that happens.
How to fix it
If you visit your site and notice that the secure padlock image isn’t showing, don’t panic. This is usually an easy fix. Let’s walk through it right now.
How to find insecure content
The best way to find the insecure content is to check the browser’s developer console for errors and warnings. You can do this by right clicking on the page and selecting “Inspect Element” in Chrome or Firefox.
At the top of the window that opens, you’ll notice a tab for “Console”. Click that to bring up a detailed list of errors and warnings for the site. You’ll notice that errors display in red, while warnings display in yellow.
Chrome’s Developer Console showing mixed content warnings and errors
On the far right of each of those warnings, you’ll see the name of each of the resources causing the notification, as well as the path to the file. You can use this information to determine which resource is causing the issue.
Updating resources to load over HTTPS
If the resource is displaying an error (red), you’ll most likely need to update file paths in a stylesheet, script, or iFrame on your site. This can be a little tricky if you’re not familiar with those items. You may need to reach out to a professional to resolve these kinds of issues. But, your host may be able to help you out, so there’s no harm in asking.
If the resource is displaying a warning (yellow), you can generally update the URL to that file path directly in the page content.
For example, if an image on your site is causing an error because it is using the following path:
http://example.com/image.png
You can usually fix the error by simply adjusting the prefix to HTTPS:
https://example.com/image.png
Once you’ve made that change, reload the page to see if the warning has disappeared from the console. If it has, you’ve successfully fixed your mixed content errors!
A shortcut for WordPress sites
If you have a WordPress website and are noticing mixed content warnings or errors, there is an even easier fix. The plugin Really Simple SSL forces full sites to load over HTTPS. This means that by simply installing and activating a single plugin, you can rewrite all of your content to be loaded over a secure connection. We love this plugin and can’t recommend it enough. Download Really Simple SSL here.
Wrapping up
Mixed content can be a big security issue, especially if it’s mixed active content that gives hackers a “way in” to your site. You want your visitors to feel secure when they are browsing your site. Use the directions we mentioned above to track down and resolve any mixed content errors or warnings displaying on your site. If you run into trouble or have any questions, give us a shout!
