What is Mixed Content?

Mixed content occurs when a web page loaded over a secure HTTPS connection includes resources (images, scripts, stylesheets, fonts, iframes) that are loaded over an insecure HTTP connection. This is a security problem because the HTTP resources can be intercepted, modified, or replaced by an attacker, even though the main page itself is encrypted. The padlock icon in the browser disappears, and visitors see warnings that undermine their trust in your site.

Passive vs. Active Mixed Content

Browsers distinguish between two categories of mixed content, and they handle each one differently:

• Passive (display) mixed content: This includes images, audio, and video loaded over HTTP. The risk is lower because these resources cannot directly alter the page's behavior. An attacker could swap out an image (showing inappropriate content, for example), but cannot inject code. Older browsers used to load passive mixed content with a warning. Modern browsers increasingly block it as well, though some still allow it with a degraded security indicator.
• Active mixed content: This includes scripts, stylesheets, iframes, fonts, and XMLHttpRequests loaded over HTTP. Active mixed content is far more dangerous because a tampered script can steal login credentials, redirect the user, or inject malware into the page. All modern browsers block active mixed content by default. The resource simply does not load, which can break page functionality entirely.

How Browsers Handle Mixed Content

Browser behavior has become stricter over the years. Here is what happens today:

• Chrome: Blocks all active mixed content. Since version 80, Chrome also auto-upgrades mixed images, audio, and video to HTTPS. If the HTTPS version does not exist, the resource is blocked.
• Firefox: Blocks active mixed content and displays a shield icon in the address bar. Passive mixed content triggers a warning but may still load in some cases.
• Safari: Blocks active mixed content. Passive mixed content may load with a warning depending on the version.
• Edge: Follows the same Chromium-based behavior as Chrome.

The trend is clear: browsers are moving toward blocking all mixed content, both active and passive. Fixing mixed content issues is not optional anymore.

Finding Mixed Content Sources

There are several ways to identify mixed content on your WordPress site:

• Browser DevTools console: Open Chrome DevTools (F12), go to the Console tab, and look for yellow warnings or red errors about mixed content. Chrome tells you exactly which resource URL is causing the problem.
• Why No Padlock: A free online tool (whynopadlock.com) that scans a URL and lists all insecure resources found on the page. Useful for a quick check without opening DevTools.
• InspectWP reports: InspectWP automatically scans your page for any resources loaded over HTTP on an HTTPS page and lists every single one. This is the fastest way to get a complete picture across your entire site.
• SSL Labs: While primarily an SSL/TLS configuration checker, it can also flag mixed content issues on the tested page.

Common Causes of Mixed Content in WordPress

Mixed content issues in WordPress typically come from a few recurring sources:

• Hardcoded HTTP URLs in content: If you migrated your site from HTTP to HTTPS, your old posts and pages may still contain image URLs and links starting with http://. These were correct at the time but became mixed content after the migration.
• Old theme assets: Some older themes or child themes have hardcoded HTTP URLs in their CSS, JavaScript files, or template files. A stylesheet loading a background image from http://example.com/bg.jpg creates mixed content.
• Plugin resources: Plugins that load external scripts or styles over HTTP cause mixed content. This is especially common with older or poorly maintained plugins that have not been updated for HTTPS.
• External embeds: Iframes, embedded videos, or widgets from third-party services that use HTTP URLs. If the third-party service supports HTTPS (most do today), switching the URL to HTTPS fixes it.
• CDN configuration: If your CDN is not configured to serve assets over HTTPS, every CSS, JS, and image file delivered through the CDN becomes mixed content.

Fixing Mixed Content in WordPress

The fix depends on the source of the problem. Here are the most common solutions:

• Database URL replacement: For hardcoded HTTP URLs in post content, use a search-and-replace tool to update all instances of http://yourdomain.com to https://yourdomain.com in the database. The plugin Better Search Replace is widely used for this. It lets you preview changes before applying them and works across all database tables. Always create a database backup before running a search and replace.
• SSL Insecure Content Fixer: This WordPress plugin automatically fixes insecure URLs on the fly. It rewrites HTTP URLs to HTTPS in the page output without modifying the database. This is a good temporary solution while you fix the root causes, but it adds a small performance overhead because it processes every page load.
• Really Simple SSL: Another popular plugin that handles the HTTP-to-HTTPS transition. It fixes mixed content by filtering the page output, sets up redirects, and updates the WordPress site URL settings.
• Manual theme and plugin fixes: If the mixed content comes from a theme or plugin file, edit the source code to replace http:// with https:// or, better yet, use protocol-relative URLs (//example.com/file.js) or the WordPress function esc_url() to generate URLs dynamically.

Database URL Replacement in Detail

The most thorough way to fix mixed content from old post content is a database search and replace. Here is the process:

1. Back up your database. This is not optional; a wrong search-and-replace can break your entire site.
2. Install and activate the Better Search Replace plugin.
3. Search for http://yourdomain.com and replace with https://yourdomain.com.
4. Select all database tables (especially wp_posts, wp_postmeta, and wp_options).
5. Run a dry run first to see how many replacements would be made.
6. If the numbers look right, run the actual replacement.

For WP-CLI users, the command wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --all-tables does the same thing from the command line. WP-CLI properly handles serialized data in the database, which is critical for options and widget settings.

HTTPS Redirect via .htaccess

After fixing mixed content, make sure all HTTP requests to your site are redirected to HTTPS. This prevents visitors and search engines from accessing the HTTP version. On Apache servers, add these lines to your .htaccess file:

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

On Nginx servers, add this to your server block:

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

This redirect does not fix mixed content on its own, but it ensures that nobody accidentally visits the HTTP version of your site. Combined with the database URL replacement and plugin fixes, it completes the HTTPS migration.

What InspectWP Checks

InspectWP scans your page for any resources loaded over HTTP on an HTTPS page and lists every one of them, including the resource type and full URL. This gives you a clear checklist of exactly what needs to be fixed. Pages with no mixed content issues show a clean result, confirming that your HTTPS setup is working correctly.