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 loaded in the same page at the same time, but the initial request was secure over HTTPS protocol. That’s why, most of the internet browsers display a warning that you are browsing a page that contains insecure resources.
I other words, these warnings will concern your site’s visitors and may perceive your site to be unsafe. You can prevent this issue occurring by configuring your site to only serve secure content.
What Causes Mixed Content Issues?
Mixed content issues appear when you force redirect your website from HTTP to HTTPS without having a valid SSL certificate.
Even after having a SSL on your site, you may face Mixed Content Warning:
- Web developers sometimes use absolute paths (
http://domain/style.css) in 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?
The great & easy online resource to find out mixed content is Why No Padlock?
Just enter your website URL or page URL that is loading with mixed content and it will scan your page or website automatically and show you all insecure resources that is making mixed content. Check the result here make all the insecure resources secure so that they can load over HTTPS. This will solve your mixed content warnings.
How to Fix Mixed Content Issues
Follow these methods to fix up your mixed content. This assumes you have already done the following:
“Upgrade Insecure Requests” is a CSP (Content Security Policy) directive that allows you to tell to web browser that all the resources on your website must be accessed via HTTPS.
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:
<ifModule mod_headers.c> Header always set Content-Security-Policy "upgrade-insecure-requests;" </IfModule>
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.
We hope this tutorial helps you find the perfect solution. If your like our tutorials, definitely you’ll love our support. All VernalWeb hosting plans include 24/7 support from our amazing inhouse support staff. Check out our web hosting plans and have your website migrated today!