Mixed Content Error: What It Is and How to Fix It

If your site is running on HTTPS but the browser is showing a warning, a broken padlock, or blocking certain resources from loading, you're likely dealing with a mixed content error.

It's one of the more common issues that comes up after migrating a site from HTTP to HTTPS — and it's easier to fix than it might seem.

What Is Mixed Content?

Mixed content happens when an HTTPS page (secure) tries to load resources — images, scripts, stylesheets, iframes — over HTTP (insecure).

When your page is served over HTTPS, the browser expects everything on it to also be secure. If something isn't, it either:

• Blocks it entirely (mixed active content — scripts, stylesheets, iframes)
• Loads it but shows a warning (mixed passive content — images, audio, video)

The distinction matters:

Active mixed content (blocked by browsers): JavaScript files, CSS, iframes, XHR/fetch requests. These are blocked because a malicious script loaded over HTTP could hijack the page entirely.

Passive mixed content (warning only): Images, video, audio. These are loaded but the browser shows a broken/grey padlock instead of the green one.

Why Does It Happen?

The most common scenario: you migrated your site from HTTP to HTTPS, but your content still has hardcoded http:// URLs in it.

This includes:

• Images in blog posts with <img src="http://yoursite.com/image.jpg">
• Old CSS files referencing http:// font or background URLs
• WordPress media uploaded before the migration stored with HTTP URLs in the database
• Third-party widgets or embeds that load over HTTP
• Inline styles with background-image: url('http://...')

How to Find Mixed Content

Browser Developer Tools

The easiest way. Open Chrome DevTools (F12), go to the Console tab, and look for warnings starting with "Mixed Content:". Each one shows you the exact resource URL causing the issue.

The Security tab in DevTools also shows a summary of whether the page is fully secure.

Automated Scanning

For larger sites, manually hunting mixed content is impractical. Tools like Why No Padlock scan a URL and list all mixed content resources found.

How to Fix Mixed Content

1. Update Hardcoded HTTP URLs

The cleanest fix. Change all http:// references in your HTML, CSS, and JavaScript to https:// — or better, use protocol-relative URLs (//yoursite.com/path) which adapt to whatever protocol the page is served over.

For a WordPress site, you can update URLs in the database with a plugin like Better Search Replace or WP CLI:

wp search-replace 'http://yoursite.com' 'https://yoursite.com' --skip-columns=guid

2. Use a Content Security Policy Upgrade Header

Add this to your server config to tell browsers to automatically upgrade HTTP subresource requests to HTTPS:

add_header Content-Security-Policy "upgrade-insecure-requests";

This is a good temporary fix while you're hunting down all the hardcoded HTTP URLs, but it only works if the resource actually exists over HTTPS.

3. For WordPress: Use the SSL Insecure Content Fixer Plugin

This plugin automatically fixes mixed content by rewriting HTTP URLs to HTTPS on the fly without needing database changes. It's a quick win for WordPress sites.

4. Third-Party Resources

If a third-party service (an old widget, a font service, an embed) only provides HTTP URLs, check if they've added HTTPS support (most have). If they genuinely don't support HTTPS, consider replacing them with a service that does — an HTTP third-party embed will always cause mixed content warnings.

5. Check Your CSS Files

CSS files can reference fonts, background images, and other assets via HTTP. Check any external CSS files your site loads (including old themes and plugins) for HTTP URLs.

Mixed Content and SEO

Beyond the browser warning, mixed content can affect your search visibility. Google considers HTTPS a ranking factor, and a site with broken padlock warnings signals to both users and Google that your security setup isn't complete. Fixing mixed content is part of securing your website with SSL properly.

Preventing Future Mixed Content

• When adding images or media to your CMS, always use HTTPS URLs
• When embedding third-party content, check it's HTTPS before publishing
• Set up a Content Security Policy header to control what your site can load
• Regularly scan your site for new mixed content — especially after adding new content or plugins

Your SSL monitoring setup should complement this: know when your certificate status changes so you're never surprised by a security warning your users see before you do.

Related Articles

• ERR_SSL_PROTOCOL_ERROR - What It Means and How to Fix It
• NET::ERR_CERT_INVALID - What It Means and How to Fix It
• SSL Handshake Failed - What It Means and How to Fix It