You just installed an SSL certificate on your web hosting account. You visit your website expecting to see a clean, green security padlock in the address bar. Instead, Google Chrome slaps your site with a warning icon and a bold label reading "Not Secure".
This is the infamous SSL Mixed Content Error. It happens when your initial HTML document is delivered securely over encrypted HTTPS, but the page still loads images, stylesheets, fonts, or scripts using plain, unencrypted http:// URLs. In this tutorial, we will show you how to identify every broken asset and eliminate mixed content errors permanently.
"Mixed content destroys visitor trust in an instant. Over 70% of shoppers will abandon their cart immediately if a checkout page displays a 'Not Secure' warning in their browser."
1. Passive vs. Active Mixed Content
Browsers categorize mixed content into two distinct danger levels:
Passive Mixed Content (Display)
Includes unencrypted images (<img src="http://...">), audio, and video files. Browsers will still load the images, but the security padlock will disappear from the URL bar.
Active Mixed Content (Scripts)
Includes unencrypted JavaScript files, CSS stylesheets, iframes, and AJAX requests. Modern browsers will block these scripts completely, breaking your site layout or shopping cart.
2. How to Find Insecure HTTP Assets in Chrome DevTools
- Open your website in Google Chrome.
- Right-click anywhere on the page and select Inspect (or press
F12). - Click on the Console tab.
- Look for yellow or red warning lines reading:
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. - Chrome will display the exact image or script file URL causing the security warning.
3. The 1-Line Fix: upgrade-insecure-requests
If your site has thousands of legacy hardcoded http:// image links, manually editing each file is exhausting. You can instruct the browser to automatically upgrade every http:// request to encrypted https:// by adding one Content Security Policy meta tag into your HTML <head>:
<metahttp-equiv="Content-Security-Policy"content="upgrade-insecure-requests">
4. Forcing 301 HTTPS Redirection in .htaccess
Ensure all visitors and Google crawlers are permanently redirected to the encrypted HTTPS version of your site by placing these rules at the top of your root .htaccess file:
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} !^(localhost|127\.0\.0\.1)$ [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
5. Fixing Hardcoded Database URLs in WordPress
If you are using WordPress, changing your site address in Settings → General only updates the main URL—it does NOT update old blog post image URLs in your MySQL database.
How to Fix in 2 Minutes:
Install a free search-and-replace plugin (like Better Search Replace). Search your database tables for http://yourdomain.com and replace with https://yourdomain.com.
Frequently Asked Questions
Conclusion
Eliminating mixed content errors restores the green security padlock to your address bar and guarantees that every visitor browses your site safely.
Audit your website's SSL status right now.
Verify your certificates, inspect HTTP headers, and test server security for free.
Run Free SSL Audit →