What is Mixed Content Error?
TheMixed Content error occurs when a web page loaded securely with HTTPS contains resources loaded with the HTTP (insecure) protocol. This weakens the security of the page and browsers issue warnings or block the resources completely.
As of 2026, Chrome and other modern browsers enforce very strict rules regarding mixed content. Active mixed content (JavaScript, CSS, iframe) is blocked completely, passive mixed content (images) is shown with a warning or automatically upgraded to HTTPS.
Mixed Content Types
1. Active Mixed Content (Blocked)
Sources that may alter page content or collect sensitive data:
<script src="http://...">— JavaScript files<link rel="stylesheet" href="http://...">— CSS files<iframe src="http://...">— iframe embeds- HTTP calls with XMLHttpRequest / Fetch API
<object>,<embed>resources
Active mixed content is automatically blocked by the browser and the page may become corrupted
2. Passive Mixed Content (Warning Given)
Resources that cannot change the page content but pose a privacy risk:
<img src="http://...">— Images<audio src="http://...">— Audio files<video src="http://...">— Video files
As of Chrome 86+, passive mixed content is also automatically upgraded to HTTPS. If it cannot be upgraded, it will be blocked.
How to Detect Mixed Content?
Method 1: Chrome DevTools
- Open the page in Chrome → Open DevTools with F12 Look for "Mixed Content" warnings in the
- Console tab
- Security tab to see overview Apply "mixed-content:all" filter in the
- Network tab
Method 2: Why No Padlock Tool
List all mixed content problems by entering your domain address at whynopadlock.com.
Method 3: Sitewide Scan
# With Screaming Frog or similar SEO tools
# find HTTP references by scanning all pages
# Searching for HTTP URLs in the database (WordPress example)
SELECT * FROM wp_posts WHERE post_content LIKE '%http://%';
# General MySQL search
SELECT * FROM content_table WHERE content LIKE '%src="http://%' OR content LIKE '%href="http://%';
Mixed Content Solution Methods
1. Automatic Upgrade with Content-Security-Policy
The fastest and most effective solution. HTTP resources are automatically upgraded to HTTPS:
# Nginx
add_header Content-Security-Policy "upgrade-insecure-requests" always;
# Apache (.htaccess)
Header always set Content-Security-Policy "upgrade-insecure-requests"
# HTML meta tag
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
⚠️ Caution: This method assumes that the HTTP resource is also available in HTTPS. If the resource is not available on HTTPS, it cannot be loaded.
2. Fixing URLs Manually
Update all http:// references to https://:
# Bulk update in database (use with care!)
UPDATE posts SET content = REPLACE(content, 'http://www.example.com', 'https://www.example.com');
UPDATE posts SET content = REPLACE(content, 'http://cdn.example.com', 'https://cdn.example.com');
3. Using a Protocol-Independent URL
By typing URLs without specifying a protocol so that the browser uses the current protocol:
<!-- Instead of: -->
<img src="http://cdn.example.com/image.jpg">
<!-- Use: -->
<img src="//cdn.example.com/image.jpg">
4. CDN and External Resources
- Make sure your CDN provider supports HTTPS
- Popular resources such as Google Fonts, jQuery CDN already support HTTPS
- Locally host external resources that do not support HTTPS
Mixed Content Solution in WordPress
- Automatic correction with Really Simple SSL plugin
- Bulk URL change in the database with the Better Search Replace plugin
- Add
define('FORCE_SSL_ADMIN', true);in wp-config.php - In Settings → General, make sure site URLs start with https://
Conclusion
Mixed content error directly affects the security perception of your website and may also hurt its SEO performance. You can implement a quick fix with the Content-Security-Policy header, then permanently update all HTTP references to HTTPS. Prevent new mixed content issues by checking the Chrome DevTools Security tab regularly.