What Is SSL Mixed Content?
SSL mixed content happens when your website is loaded over a secure HTTPS connection, but some resources like images, CSS, JavaScript, or videos are still loaded via HTTP.
Browsers detect this “mixed” use of secure and insecure content and show warnings to users. This can make visitors question your website’s security.
Common Causes of Mixed Content Warnings
-
Hardcoded HTTP URLs for images, CSS, or JavaScript in your site’s code.
-
Absolute URLs like
http://domain.com/style.cssinstead of relative URLs like/style.css. -
External scripts (e.g., jQuery, Font Awesome) loaded via HTTP instead of HTTPS.
-
Embedded video scripts using HTTP.
Mixed content usually appears after forcing an HTTP-to-HTTPS redirect on your site.
How to Identify Mixed Content
Use the online tool Why No Padlock?:
-
Enter the URL of the page showing warnings.
-
The tool scans your page and lists all insecure HTTP resources.
How to Fix Mixed Content Warnings
Before starting, make sure:
-
You have installed an SSL certificate (e.g., Let’s Encrypt).
-
You have forced an HTTP-to-HTTPS redirect on your site.
Option 1: Use “Upgrade Insecure Requests”
This is a Content Security Policy (CSP) directive that tells browsers to automatically load all resources via HTTPS. It works on:
-
Firefox, Chrome, Edge, Opera, Safari, Android browsers
Implementation: Add the following 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
Once applied:
-
All HTTP resources are automatically loaded via HTTPS.
-
Your site will show the secure lock icon in the browser.
-
Mixed content warnings should disappear.
Summary:
Mixed content warnings are caused by insecure resources on an HTTPS site. By updating all URLs to HTTPS and using CSP with upgrade-insecure-requests, you can secure your site and maintain visitor trust.
