How to Fix Mixed Content on HTTPS Sites (2026 Technical Guide)

Mixed content occurs when an HTML page is loaded securely over an HTTPS connection, but other resources—such as images, videos, stylesheets, or scripts—are loaded over an insecure HTTP connection. In 2026, browsers handle this aggressively.

Why Mixed Content is Dangerous

Modern browsers like Chrome, Firefox, and Safari operate on a zero-trust model for mixed content. There are two types of mixed content:

1. Passive/Display Mixed Content (e.g., <img>, <audio>, <video>): The browser will load the resource but will remove the padlock icon from the URL bar and display an "Info" warning. A man-in-the-middle (MitM) attacker could intercept and alter the image.
2. Active Mixed Content (e.g., <script>, <link rel="stylesheet">, <iframe>): The browser will completely block the resource from loading. This breaks your website functionality entirely.

From an SEO perspective, Google has explicitly confirmed that HTTPS is a ranking signal. Serving mixed content dilutes this signal and can result in ranking penalties.

How to Audit and Identify Mixed Content

Finding HTTP links manually across a 1,000-page site is impossible. Here is the developer approach to auditing:

1. Browser DevTalks Protocol

Open Chrome DevTools (F12) and navigate to the Security tab. Or, look at the Console tab for bright red errors stating:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure script 'http://insecure.com/script.js'. This request has been blocked.

2. Automated Crawling

We built the Mixed Content Scanner specifically for this. Enter your URL, and the crawler will parse the DOM and extract all insecure URLs, allowing you to export a CSV of broken assets.

3 Technical Solutions to Fix Mixed Content

Solution 1: Database Search & Replace (For CMS and WordPress)

If you recently migrated from HTTP to HTTPS, your database is likely filled with hardcoded http:// image attachments. Instead of manually editing posts, use a CLI tool like WP-CLI:

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --all-tables

(Warning: Always back up your database before running global search/replace operations.)

Solution 2: Force HTTPS Rewrites via Server Config

If you use Apache, you can enforce traffic to HTTPS using your .htaccess file:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

For Nginx, update your server block:

server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

Solution 3: Deploy a Content-Security-Policy (CSP)

You can instruct modern browsers to automatically rewrite HTTP requests to HTTPS on the fly before they hit the network. Add this HTTP response header to your server:

Content-Security-Policy: upgrade-insecure-requests;

If you are using Cloudflare, you can enable the "Automatic HTTPS Rewrites" toggle in your SSL/TLS Edge Certificates dashboard, which performs the same function dynamically.

By actively resolving these warnings, you restore the green padlock, protect user data, and ensure your site fully benefits from Google's HTTPS ranking boost.

Production hardening sequence

Fix mixed content in this order: source templates, CMS database, CDN rewrite rules, then CSP upgrade policy. If you start at the edge only, hidden template-level HTTP references often reappear on future releases.

SEO and trust impact to communicate internally

Mixed content is not just a browser warning. It reduces perceived trust during checkout and can lower conversion rate on paid landing pages where every second and trust signal matters.