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. Non-secure 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.
Finding and Resolving Mixed Content Issues
Searching for Mixed Content
The best way to avoid mixed content issues is to serve all content via HTTPS instead of HTTP. You can easily search for mixed content by searching for HTTP elements directly via your source code.
1.) Open the source code of any page
2.) Using a search function search for “src=http” look for resources such as images, JavaScript, and links that are being called over a non-secure (HTTP) connection.
Fixing Mixed Content
Once you find the content being served over HTTP vs. HTTPS fixing the issue is often as simple as adding an “s” to links – http:// to https://.
You’ll first want to check if the resource is available over an HTTPS connection by copying and pasting the HTTP URL into a new web browser and changing HTTP to HTTPS. If the resource (i.e. image, URL) is available over HTTPs then you can simply change HTTP to HTTPS in your source code.
Watch this quick video about finding and fixing mixed content:
The main thing is to make sure you are hosting all images, videos, audio files and resources on a secure source.
