Mixed Content Monitoring: HTTP Assets Breaking HTTPS Sites

Mixed content occurs when an HTTPS page loads resources — images, scripts, stylesheets, iframes — over HTTP. This undermines the security that HTTPS provides: the page itself is encrypted, but the HTTP resources pass through the network unencrypted and can be intercepted or modified by attackers. Modern browsers handle mixed content in two ways: they block "active" mixed content entirely, and they warn on "passive" mixed content.

Active vs Passive Mixed Content

Active mixed content includes resources that can modify the page's DOM or execute code:

• JavaScript files (<script src="http://...">)
• Stylesheets (<link href="http://...">)
• Iframes (<iframe src="http://...">)
• XMLHttpRequest and Fetch API calls to HTTP

Browser behavior: Blocked entirely. Modern browsers will not load active mixed content, resulting in broken JavaScript, missing styles, or blank iframes.

Passive mixed content includes resources that display content but can't interact with the page:

• Images (<img src="http://...">)
• Audio (<audio src="http://...">)
• Video (<video src="http://...">)

Browser behavior: Displayed with a security warning in the address bar. Users see a broken lock icon.

What Causes Mixed Content

Legacy HTTP URLs in Code

Hard-coded http:// URLs in templates, CSS, or JavaScript files from before your HTTPS migration:

<!-- BAD: Hard-coded HTTP image URL -->
<img src="http://old-cdn.yoursite.com/logo.png">

<!-- GOOD: Protocol-relative or HTTPS -->
<img src="https://cdn.yoursite.com/logo.png">
<!-- or -->
<img src="//cdn.yoursite.com/logo.png">  <!-- Protocol-relative -->

CMS-Stored HTTP URLs

Content management systems (WordPress, Contentful, Strapi) often store image URLs as full URLs. After migrating to HTTPS, old content still has http:// URLs stored in the database:

-- WordPress: Find HTTP image URLs
SELECT ID, guid FROM wp_posts WHERE guid LIKE 'http://%';

-- Fix with search-replace
UPDATE wp_posts SET guid = REPLACE(guid, 'http://yoursite.com', 'https://yoursite.com');

Third-Party Widgets Loading HTTP Sub-Resources

A widget you embed might be served over HTTPS but load its own resources over HTTP. Common culprits:

• Old advertising networks
• Social sharing buttons using HTTP asset URLs
• Embedded fonts from non-HTTPS servers
• Analytics scripts that make HTTP API calls

API Responses Containing HTTP URLs

If your API returns URLs (product images, user avatars, links) stored with http:// prefixes, and your frontend renders them directly, they become mixed content:

// API returns: { "imageUrl": "http://cdn.yoursite.com/product.jpg" }
// Rendered as: <img src="http://cdn.yoursite.com/product.jpg">  ← Mixed content!

// Fix: Ensure-HTTPS utility function
function ensureHttps(url) {
  if (url && url.startsWith('http://')) {
    return url.replace('http://', 'https://');
  }
  return url;
}

Detecting Mixed Content

Browser Console (Manual)

Open your site in Chrome, open DevTools Console. Mixed content warnings appear as:

Mixed Content: The page at 'https://yoursite.com' was loaded over HTTPS, 
but requested an insecure resource 'http://cdn.yoursite.com/image.jpg'. 
This content should also be served over HTTPS.

Active mixed content shows as errors (blocked), passive as warnings.

Lighthouse Audit

Lighthouse's "Avoids requesting the geolocation permission on page load" → "Uses HTTPS" audit catches mixed content:

lighthouse https://yoursite.com --only-audits=is-on-https

Content Security Policy Report-Only

Deploy a CSP report-only header to detect mixed content across all user sessions:

Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violations

This sends reports to your endpoint whenever any resource would violate the "https only" policy, without actually blocking anything.

Automated Scanning

Tools like mixed-content-scanner or custom scripts can crawl your site and identify HTTP resources:

# Simple mixed content detector
import requests
from bs4 import BeautifulSoup
from urllib.parse import urljoin

def check_mixed_content(url):
    response = requests.get(url)
    soup = BeautifulSoup(response.text, 'html.parser')
    
    mixed_content = []
    
    for tag in soup.find_all(['img', 'script', 'link', 'iframe', 'source']):
        src = tag.get('src') or tag.get('href')
        if src and src.startswith('http://'):
            mixed_content.append({
                'tag': tag.name,
                'url': src,
                'type': 'active' if tag.name in ['script', 'link', 'iframe'] else 'passive'
            })
    
    return mixed_content

Fixing Mixed Content

The Upgrade-Insecure-Requests Header

A quick mitigation: tell the browser to automatically upgrade HTTP resource requests to HTTPS:

Content-Security-Policy: upgrade-insecure-requests

This instructs the browser to attempt HTTPS for any HTTP resource URL. If the HTTPS version exists, it loads fine. If not, it fails. This is a safety net, not a fix — you still need to fix the source URLs.

Database Migration for CMS Sites

# WordPress: Use WP-CLI to search-replace HTTP URLs
wp search-replace 'http://yoursite.com' 'https://yoursite.com' --all-tables

# Or use the "Better Search Replace" plugin
# Or Velvet Blues Update URLs plugin

Reverse Proxy for Legacy Third-Party Resources

If a third-party resource is only available over HTTP (old assets you can't control), proxy it through your HTTPS server:

# Proxy an HTTP-only resource through HTTPS
location /proxy/legacy-asset {
    proxy_pass http://legacy-cdn.example.com/asset.jpg;
}

Monitoring Mixed Content Continuously

Mixed content can be introduced by:

• CMS editors adding images with HTTP URLs
• New third-party scripts that make HTTP calls
• API changes returning HTTP URLs
• Deployment of old code that predates your HTTPS migration

AzMonitor's performance monitoring via Lighthouse checks catches mixed content on your key pages automatically. Set up HTTPS monitoring with AzMonitor and include mixed content detection in your continuous monitoring strategy.

Related: HTTPS monitoring guide for complete HTTPS security verification beyond just certificates.