Mixed content errors on your HTTPS/SSL site
Visitors to sites protected by SSL expect (and deserve) security and protection. When a site doesn’t fully protect or secure all content, a browser will display a mixed-content warning. Mixed content occurs when a webpage containing a combination of both secure (HTTPS) and non-secure (HTTP) content is delivered over SSL to the browser. Insecure/Mixed content can theoretically be read or modified by attackers, even though the parent page is served over HTTPs.
When visitors see warning messages, they can react one of two ways. They will either pay no attention to the warning and security risks, in order to continue, which could be bad. The second option is that they will pay heed to this warning. Back out of your site and presume that you have not paid the proper attention to the security risks. Which is even worse.
The best solution, of course, is to make sure that these warnings and/or blocks won’t occur in the first place by correctly configuring your site to serve only secure content. A mixed-content warning means that there are both secured and unsecured elements being served up on a page that should be completely encrypted. Any page using an HTTPS address must have all of the content within coming from a secured source. Any page that links to an HTTP resource is considered insecure and is subsequently flagged by your browser as a security risk.
Types of Mixed Content
There are actually two types of mixed content. The more dangerous one is mixed active content or mixed scripting. This occurs when an HTTPS site loads a script file over HTTP. Loading a script over an insecure connection completely ruins the security of the current page. Web browsers generally block this type of mixed content completely.
The second type and the one that is more common is mixed passive content or mixed display content. This occurs when an HTTPS site loads something like an image or audio file over an HTTP connection. This type of content can’t really ruin the security of the page in the same way, so web browsers don’t react as strictly as they do for active mixed content. However, it’s still a bad security practice that could cause problems. Probably the most common cause of all mixed content warnings is when a site that is supposed to be secure is configured to pull images from an unsecured source.
The best way to avoid mixed content issues is to serve all content via HTTPS instead of HTTP.
Finding and Resolving Mixed Content Issues
- Using support sites that can report mixed content, like WhyNoPadLock https://www.whynopadlock.com Fill in the URL of your site and let WhyNoPadLock inspect it and report any issues.
- Use developer Tools in Chrome, Firefox, Safari.. Open it and go to the Console tab. There you can look for log entries such as:
Mixed Content: The page at 'https://mysite.com/security/index.html' was loaded over HTTPS, but requested an insecure favicon 'https://mysite.com/favicon.ico'. This content should also be served over HTTPS.
- Searching for Mixed Content in your code. You can easily search for mixed content by searching for HTTP elements directly via your source code using a search function and search for
Still can’t resolve Insecure/Mixed Content Issues?
Check for file not found errors (HTTP 404 status codes)
An issue I encountered getting Mixed/Insecure Content warnings (and no padlock) involved a script file from a WordPress theme. The script was looking up a background image which was not found. This popped up as a HTTP 404 error in my Developer Tools console.
It appeared that the site trying to load the background image was configured in such a way that when the resource was not found, it fall back onto trying to load the image over HTTP. This retry caused the Mixed Content warning; the reason why the site didn’t get a proper padlock.
The quick fix for this was to add a white background image via the theme configuration page. By doing so the background image was found and no fallback to HTTP occurred anymore. Thereby solving the Insecure/Mixed Content error.
Usually it will be quite easy to find the cause of the mixed content. But in the case of a file not found followed by a fallback to HTTP gave me some headaches. Hope for the ones reading this post to be noticed on this fallback occurrence and saving people some headaches.