Mixed content occurs when an HTTPS page loads sub-resources (images, scripts, stylesheets, iframes) over insecure HTTP. Browsers block or warn on mixed content, breaking page functionality and displaying security warnings that drive users away. Google considers HTTPS a ranking signal, and mixed content undermines that signal.
Why Mixed Content Hurts SEO
- Browser warnings. Chrome displays "Not Secure" in the address bar when active mixed content is detected, destroying user trust.
- Blocked resources. Modern browsers block mixed active content (scripts, stylesheets) entirely, potentially breaking page functionality and layout.
- Ranking signal degradation. Google confirmed HTTPS as a ranking signal in 2014. Mixed content weakens the security posture that HTTPS provides.
- Referrer leakage. HTTP resources expose the referring HTTPS URL in plaintext, leaking potentially sensitive page paths.
Types of Mixed Content
Active Mixed Content (Blocked by Default)
Active content can modify the page's behavior and is blocked by all modern browsers:
<script src="http://..."><link rel="stylesheet" href="http://..."><iframe src="http://...">XMLHttpRequest/fetch()to HTTP URLs- CSS
url()values in stylesheets loaded over HTTPS
When active mixed content is blocked, scripts do not execute and stylesheets do not apply. This can break page layout, functionality, and tracking.
Passive Mixed Content (Warned, Optionally Blocked)
Passive content cannot modify the page but is still a security risk:
<img src="http://..."><video src="http://..."><audio src="http://...">
Chrome shows a "Not Secure" indicator for passive mixed content and may block it in stricter modes.
Finding Mixed Content
Chrome DevTools Console
Open DevTools (F12) and check the Console tab. Mixed content errors appear as yellow warnings or red errors:
Mixed Content: The page at 'https://example.com' was loaded over HTTPS,
but requested an insecure image 'http://cdn.example.com/logo.png'.
Chrome DevTools Security Tab
The Security tab provides an overview of the page's HTTPS status and lists all insecure origins loading resources on the page.
Site-Wide Detection
# Use Screaming Frog to crawl the site and identify mixed content
# Configuration > Spider > Check "Insecure Content"
# Or use curl to check individual pages for HTTP references
curl -s https://example.com | grep -i 'http://'
Content Security Policy Reporting
Deploy CSP in report-only mode to collect mixed content violations from real users without blocking anything:
Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-report
This sends JSON reports to your endpoint whenever a browser detects mixed content, giving you a complete inventory of issues.
Fixing Mixed Content
Update Resource URLs
The simplest fix: change http:// URLs to https:// or use protocol-relative // URLs:
<!-- Before -->
<img src="http://cdn.example.com/logo.png">
<script src="http://analytics.example.com/tracker.js"></script>
<!-- After -->
<img src="https://cdn.example.com/logo.png">
<script src="https://analytics.example.com/tracker.js"></script>
Verify the HTTPS version of each resource actually works before updating.
Upgrade-Insecure-Requests Header
This CSP directive tells browsers to automatically upgrade HTTP requests to HTTPS:
Content-Security-Policy: upgrade-insecure-requests
This is a quick fix that handles most mixed content without modifying HTML. However, it only works if the HTTP resources are actually available over HTTPS.
Database Search and Replace
For CMS-based sites where HTTP URLs are stored in the database (WordPress, Drupal), use a search-and-replace tool:
-- WordPress: update all HTTP URLs to HTTPS in post content
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://example.com', 'https://example.com');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'http://example.com', 'https://example.com');
Always backup the database before running bulk replacements.
Third-Party Resources
If a third-party service only supports HTTP, you have three options:
- Find an HTTPS alternative -- most services support HTTPS now
- Proxy through your server -- download the resource server-side and serve it from your HTTPS domain
- Remove the resource -- if it is not essential, remove it entirely
Preventing Future Mixed Content
Add a strict Content Security Policy that blocks HTTP resources:
Content-Security-Policy: default-src https: 'self'; img-src https: data:; script-src https: 'self'
This prevents any new HTTP resources from loading, catching issues during development before they reach production.