Why Does Mixed Content Error Occur and How to Fix It?
· Troubleshooting
Mixed Content occurs when an HTTPS page tries to load resources (images, scripts, CSS, iframes) over HTTP. Browsers treat this as a security risk.
Two Types
Passive Mixed Content: Images, video, audio loaded over HTTP. Browsers may load with a warning or block entirely. The padlock shows a warning state.
Active Mixed Content: Scripts, CSS, iframes, XHR loaded over HTTP. Browsers block completely — an attacker could manipulate HTTP traffic to hijack the page.
Why Does It Happen?
Old database records with http:// URLs (WordPress media library), external CDN or widget connections over HTTP, hardcoded http:// in themes/plugins, or old email templates with iframe content.
How to Detect
Chrome DevTools Console lists "Mixed Content" warnings. Security tab gives an overall assessment. "Why No Padlock" (whynopadlock.com) scans automatically.
Fixes
1. Update all URLs to HTTPS: Bulk replace http:// with https:// in the database. WordPress: use "Better Search Replace."
2. Protocol-relative URLs: Replace http:// or https:// with // — the browser uses the current protocol automatically.
3. Content Security Policy: Add the upgrade-insecure-requests directive to automatically upgrade HTTP resource requests to HTTPS.
4. HSTS: With HSTS active, browsers redirect HTTP to HTTPS before the request leaves the device, preventing most Mixed Content at the source.
Visit the PekiSSL product page to find the right certificate for your needs.