Mixed Content Blocked — HTTP Resources on HTTPS Page Blocked by Browser
About Mixed Content Blocked
Fix mixed content warnings and blocked resources when an HTTPS page loads images, scripts, or other resources over insecure HTTP connections. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: Mixed content occurs when an HTTPS page loads sub-resources (scripts, images, CSS) over HTTP. Active mixed content (scripts, iframes) is blocked by default in all modern browsers. Passive mixed content (images, audio, video) shows a warning but may still load. Mixed content breaks the security guarantee of HTTPS — attackers could modify HTTP resources. Content-Security-Policy: upgrade-insecure-requests header automatically upgrades HTTP to HTTPS. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: Website HTML contains hardcoded http:// URLs for images, scripts, or stylesheets. Third-party embed or widget loaded over HTTP on an HTTPS page. CMS (WordPress) database contains old http:// URLs from before HTTPS migration. CDN or external resource does not support HTTPS. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Open browser DevTools (F12) > Console to see which resources are blocked as mixed content. Update resource URLs from http:// to https:// or use protocol-relative //example.com/resource. For WordPress: use a search-replace plugin to update all http:// URLs in the database to https://. Add Content-Security-Policy: upgrade-insecure-requests header to automatically upgrade HTTP to HTTPS. If the third-party resource does not support HTTPS, proxy it through your own HTTPS server. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
What is the difference between active and passive mixed content?
Active mixed content (scripts, stylesheets, iframes) can modify the page and is always blocked. Passive mixed content (images, audio, video) cannot execute code and is usually displayed with a warning but not blocked.
Overview
Fix mixed content warnings and blocked resources when an HTTPS page loads images, scripts, or other resources over insecure HTTP connections.
Key Details
- Mixed content occurs when an HTTPS page loads sub-resources (scripts, images, CSS) over HTTP
- Active mixed content (scripts, iframes) is blocked by default in all modern browsers
- Passive mixed content (images, audio, video) shows a warning but may still load
- Mixed content breaks the security guarantee of HTTPS — attackers could modify HTTP resources
- Content-Security-Policy: upgrade-insecure-requests header automatically upgrades HTTP to HTTPS
Common Causes
- Website HTML contains hardcoded http:// URLs for images, scripts, or stylesheets
- Third-party embed or widget loaded over HTTP on an HTTPS page
- CMS (WordPress) database contains old http:// URLs from before HTTPS migration
- CDN or external resource does not support HTTPS
Steps
- 1Open browser DevTools (F12) > Console to see which resources are blocked as mixed content
- 2Update resource URLs from http:// to https:// or use protocol-relative //example.com/resource
- 3For WordPress: use a search-replace plugin to update all http:// URLs in the database to https://
- 4Add Content-Security-Policy: upgrade-insecure-requests header to automatically upgrade HTTP to HTTPS
- 5If the third-party resource does not support HTTPS, proxy it through your own HTTPS server