How to Fix Mixed Content Warnings After Enabling SSL

Mixed content warnings happen when your website loads over HTTPS but some resources (images, scripts, stylesheets) are still being requested over HTTP. The browser blocks or warns about these insecure resources, causing broken images, missing styles, or a "Not Secure" warning even though you have an SSL certificate. This guide covers how to identify and fix mixed content on any CMS.

01. What Is Mixed Content?

When a page loads over HTTPS, the browser expects every resource on that page to also load over HTTPS. If a resource is requested over plain HTTP, that's "mixed content." There are two types:

Both types need to be fixed. Active mixed content breaks your site's functionality, and passive mixed content degrades user trust by showing security warnings.

02. Finding Mixed Content on Your Site

Browser Developer Tools

The fastest way. Open your site in Chrome, press F12 to open Developer Tools, and click the Console tab. Mixed content errors show up in red or yellow with messages like:

Mixed Content: The page at 'https://yourdomain.com/' was loaded over HTTPS, 
but requested an insecure resource 'http://yourdomain.com/image.jpg'. 
This request has been blocked.

The URL in the error message tells you exactly which resource is the problem.

Online Scanner

Use WhyNoPadlock.com to scan any page. It lists all insecure resources found on the page with their full URLs. Useful for scanning multiple pages quickly.

Site-Wide Scan (WordPress)

The SSL Insecure Content Fixer plugin can scan your entire WordPress site and show you every mixed content URL. Install it, go to Settings > SSL Insecure Content, and review the results.

03. Fixing Mixed Content in WordPress

Step 1: Update WordPress URLs

In WordPress admin, go to Settings > General. Make sure both "WordPress Address (URL)" and "Site Address (URL)" use https://.

Step 2: Database Search and Replace

WordPress stores full URLs in the database for images, links, and embedded content. A single search-and-replace fixes most mixed content:

1. Install "Better Search Replace" - from the Plugins > Add New screen
2. Go to Tools > Better Search Replace
3. Search for: http://yourdomain.com
4. Replace with: https://yourdomain.com
5. Select all tables
6. Run a dry run first - check "Run as dry run" to see how many replacements will be made without actually changing anything
7. Uncheck dry run and run for real

Step 3: Check Theme and Plugin Files

Some themes and plugins have hardcoded HTTP URLs in their PHP, CSS, or JavaScript files. After the database fix, if you still have mixed content, check the Console errors to identify which file is loading the insecure resource, then edit it to use https:// or protocol-relative URLs (//).

04. Fixing With .htaccess

Force HTTPS Redirect

This ensures all HTTP requests redirect to HTTPS. Add this to your .htaccess:

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

This fixes the case where someone visits http://yourdomain.com directly, but it doesn't fix mixed content within the page itself (hardcoded HTTP URLs in your HTML or database).

Content-Security-Policy: upgrade-insecure-requests

This is a quick fix that tells the browser to automatically upgrade HTTP requests to HTTPS. Add this to your .htaccess:

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

For more .htaccess techniques, see our .htaccess guide.

05. Manual Fixes (Any CMS)

If you're not using WordPress, or if the search-and-replace didn't catch everything:

Find and Fix in HTML Templates

Search your template files for http:// references. Common culprits include:

• Image src attributes - <img src="http://...">
• Script src attributes - <script src="http://...">
• Link href for stylesheets - <link href="http://...">
• Inline CSS background images - background: url(http://...)
• Embedded iframes - <iframe src="http://...">

Replace http://yourdomain.com with https://yourdomain.com, or use protocol-relative URLs: //yourdomain.com/image.jpg (the browser will use whatever protocol the page loaded with).

External Resources

If the mixed content is coming from an external source (a font service, analytics script, or widget), check if that service supports HTTPS. Most do now. Just change http:// to https:// in the embed code. If the external service doesn't support HTTPS, you'll need to find an alternative or host the resource yourself.

06. Preventing Mixed Content Going Forward

• Always use HTTPS URLs - when adding images, links, or embeds to your content, use https://
• Use relative URLs when possible - /images/photo.jpg instead of https://yourdomain.com/images/photo.jpg. Relative URLs inherit the page's protocol
• Keep the upgrade-insecure-requests header - as a safety net for anything that slips through
• Test after every major change - installing a new theme, plugin, or adding embedded content. Check the browser console for mixed content warnings

Quick Recap: Fix Mixed Content

If you only do 5 things from this guide, do these:

1. Check the browser console (F12) - it tells you exactly which URLs are mixed content
2. Run a search-and-replace - change http://yourdomain.com to https:// in the database
3. Force HTTPS in .htaccess - redirect all HTTP traffic to HTTPS
4. Add upgrade-insecure-requests header - as a browser-side safety net
5. Use HTTPS or relative URLs going forward - prevent the problem from recurring

Last updated March 2026 · Browse all SSL articles · See also: .htaccess Guide