How to Fix Mixed Content Errors
1. Identify the Insecure Resources
Before you can fix the errors, you need to know which files are causing the problem.
-
Open your website in Google Chrome.
-
Right-click anywhere on the page and select Inspect.
-
Click on the Console tab at the top.
-
Look for warnings in Yellow or Red that say: "Mixed Content: The page at... was loaded over HTTPS, but requested an insecure resource..."
2. Fix for WordPress Users (The Easy Way)
If you use WordPress, you can fix 99% of these errors automatically with a plugin.
-
Option A: Really Simple SSL Install and activate this plugin. It automatically detects your SSL and configures your site to load all resources over HTTPS.
-
Option B: Better Search Replace If you prefer a permanent fix, use this plugin to search your database for
http://yourdomain.comand replace it withhttps://yourdomain.com.
3. Fix for Custom Websites (The Manual Way)
If you built your site with HTML/CSS or a custom script, you must manually update your links.
-
Update Image Tags: Change
<img src="http://yourdomain.com/image.jpg">to<img src="https://yourdomain.com/image.jpg">. -
Update CSS/JS Calls: Ensure your stylesheets and scripts use
httpsor relative paths (e.g.,/assets/js/script.jsinstead of the full URL). -
External Resources: If you are loading a font or a script from an external site (like Google Fonts), ensure that link also starts with
https://.
4. The "Content Security Policy" Fix
You can tell the browser to automatically "upgrade" all insecure requests to secure ones by adding a single line of code to your site's header.
Add this code between the <head> and </head> tags of your website:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Alternatively, you can add this to your .htaccess file in cPanel:
Header always set Content-Security-Policy "upgrade-insecure-requests;"
Summary Checklist
-
[ ] Force HTTPS: Ensure you have toggled "Force HTTPS" in your cPanel.
-
[ ] Check External Links: Make sure 3rd-party widgets (weather, news tickers, etc.) support HTTPS.
-
[ ] Clear Cache: If you make a fix and don't see the padlock, clear your browser cache or your website's caching plugin (like LiteSpeed Cache).
