Mixed content occurs when a website loaded over HTTPS includes resources (images, scripts, CSS) loaded over HTTP. Browsers will show a "Not Secure" warning or a broken padlock icon. This guide helps you diagnose and fix mixed content issues for customer sites.
Diagnosing Mixed Content
- Open the customer website in Chrome or Firefox.
- Click the padlock icon in the address bar → Site settings or Certificate.
- Look for "Mixed Content" or "Insecure Elements" warnings.
- Open the browser developer tools (F12) → Console tab. Look for errors like "Mixed Content: The page was loaded over HTTPS, but requested an insecure resource."
Fixing Mixed Content
- Update URLs in HTML: Change all
http://references tohttps://in the website source code. - Update database content: For WordPress, use a plugin like "Better Search Replace" to update URLs in the database.
- Fix hardcoded URLs: Check theme files, plugins, and configuration files for hardcoded HTTP URLs.
- Enable HTTPS in WordPress: Go to Settings → General → set both URLs to
https://.
Preventing Mixed Content
- Always use relative URLs (
//domain.com/image.png) or HTTPS URLs. - Enable "Force HTTPS" in the hosting settings.
Troubleshooting
Cannot find the mixed content source:
- Use the browser developer tools Network tab to identify which resources are loading over HTTP.
