What Is SSL Mixed Content?
SSL mixed content occurs when your site is loaded over a secure HTTPS connection, but other resources on your site (such as images, icons, videos, CSS, or JavaScript) are loaded over an insecure HTTP connection at the same time.
This is called mixed content because both HTTP and HTTPS resources are being used to display the same page at the same time, but the initial request was secure over HTTPS protocol. As a result, the major web browsers will display warnings about this type of content to indicate that the page you are accessing contains insecure resources.
In other words, these warnings may cause your website visitors to question the security between your website and their computer. You can prevent this issue from occurring by configuring your site to only serve secure content.
What Causes Mixed Content Warnings?
Mixed content warnings usually appear once you have forced a redirect from HTTP to HTTPS for your site.
In addition, here are some other cases of what might cause a warning:
- Web developers sometimes use absolute paths (
http://domain/style.css) in the site’s code to link to resources like CSS and JavaScript instead of using relative paths (/style.css). - Images have hardcoded URLs (
http://domain.com/image.png) that point to HTTP. - You are using HTTP versions of external scripts. (Hosted jQuery, Font Awesome, etc.)
- You are using embedded video scripts using HTTP instead of HTTPS.
How to Find Mixed Content?
An easy to use online resource for finding mixed content on your site’s page is Why No Padlock?
You will just have to enter the URL of the page where you are receiving mixed content warnings and Why No Padlock will automatically scan for mixed content.
How to Fix Mixed Content Warnings
Follow the simple steps below to fix SSL mixed content warnings. This assumes you have already done the following:
“Upgrade Insecure Requests” is a CSP (Content Security Policy) directive that allows you to tell to a web browser that all the resources on your website must be accessed via HTTPS.
Struggling with security issues? ChemiCloud is the hosting solution designed with reliability and security in mind! 🔐 Check out our web hosting plans!
Your resources will automatically be requested on HTTPS by the client/browser, without any mixed content warning.
Upgrade Insecure Requests is supported by Mozilla Firefox, Google Chrome, Microsoft Edge, Opera, Android, Chrome for Android, Safari.
To implement this, you only need to add the following lines of code to your site’s .htaccess file:
# BEGIN Fix SSL Mixed Content Warnings <ifModule mod_headers.c> Header always set Content-Security-Policy "upgrade-insecure-requests;" </IfModule> # END Fix SSL Mixed Content Warnings
Now let’s go back and access your website. Notice how it redirects us to the secure version, and we see a secure lock symbol in the location bar.
That means we’re using a secure connection to the site and that all the resources on the site are loaded over https.