Mixed Content: What It Is and How to Fix It

What is Mixed Content?#

Mixed content occurs when a page loaded over HTTPS also requests resources (scripts, stylesheets, images, iframes) over plain HTTP. The HTTPS connection encrypts the page itself, but the HTTP sub-resources travel unencrypted. An attacker on the same network can intercept or modify those HTTP resources in transit, undermining the security of the entire page.

There are two categories. Active mixed content includes scripts, stylesheets, iframes, and other resources that can change the behavior or appearance of the page. Because a modified script can steal credentials, read cookies, or redirect the user, browsers have blocked active mixed content by default since around 2015. Passive mixed content (also called display mixed content) includes images, audio, and video. These cannot execute code, but they can still be swapped by an attacker to show misleading content or track which pages a user visits.

Even if a single image loads over HTTP on an otherwise secure page, the browser removes the padlock icon from the address bar. Users lose the visual confirmation that the connection is secure, which erodes trust.

How Browsers Handle Mixed Content in 2026#

Browser handling has become stricter over time. Active mixed content (scripts, stylesheets, iframes) has been blocked by all major browsers since around 2015. If your HTTPS page tries to load a script over HTTP, the browser silently blocks it and logs an error in the Console.

Passive mixed content (images, audio, video) was historically allowed with a warning, but modern browsers now auto-upgrade these requests to HTTPS. Chrome, Firefox, and Safari all attempt to load the resource over HTTPS first. If the HTTPS version is not available, the resource is blocked entirely. This means that even passive mixed content that "worked" a few years ago may now fail if the resource server does not support HTTPS.

Finding Mixed Content on Your Site#

Mixed content can hide in places you do not expect: database-stored content, CMS templates, third-party widgets, or hardcoded URLs in stylesheets. A systematic approach ensures you find all of it.

Fixing Mixed Content#

The core fix is straightforward: change every HTTP URL to HTTPS. In practice, this involves several sources and a few edge cases worth noting.

# WordPress: search-replace using WP-CLI
wp search-replace 'http://example.com' 'https://example.com' --all-tables

# Force HTTPS redirect
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

Using HTTP Headers to Prevent Mixed Content#

Two security mechanisms can automatically upgrade HTTP requests to HTTPS, serving as a safety net for any URLs you missed during the manual fix. These do not replace fixing the source URLs, but they catch edge cases and prevent regression.

# Apache
Header always set Content-Security-Policy "upgrade-insecure-requests"

# Nginx
add_header Content-Security-Policy "upgrade-insecure-requests" always;

# Node.js / Express
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', 'upgrade-insecure-requests');
  next();
});

Content-Security-Policy: upgrade-insecure-requests;
  default-src 'self';
  script-src 'self' https://cdn.example.com

Testing and Preventing Regression#

After fixing existing mixed content, put safeguards in place to prevent it from coming back. New content, third-party updates, and CMS changes can reintroduce HTTP URLs at any time.

# Report mixed content violations without blocking
Content-Security-Policy-Report-Only:
  default-src https:;
  report-uri /csp-report