How to Fix Mixed Content Warnings on HTTPS Websites

What Is Mixed Content?

When you install an SSL Certificate and serve your website over HTTPS, the browser expects every resource on the page — images, JavaScript, CSS, fonts, iframes — to also be loaded over HTTPS.

Mixed Content is the situation where a page is served over HTTPS but some resources still reference URLs beginning with http:// instead of https://. Browsers then display a warning or block those insecure resources entirely.

This issue is most common when migrating a website from HTTP to HTTPS, because URLs stored in the database, HTML files, and configuration files still reference http:// from before the migration.

Types of Mixed Content

Browsers divide Mixed Content into two main categories with different risk levels and handling:

Type	Resources Involved	Browser Behavior	Risk Level
Active Mixed Content	JavaScript, CSS, iframes, XHR/Fetch	Blocked immediately	Very High
Passive Mixed Content	Images, audio, video	Loaded but shows warning	Lower

Active Mixed Content — High Risk

JavaScript or CSS loaded over HTTP can be intercepted and modified by an attacker before reaching the browser (Man-in-the-Middle Attack), potentially delivering malware or stealing user data. Chrome, Firefox, and Safari have blocked Active Mixed Content by default since 2020.

Passive Mixed Content — Lower Risk, Still Problematic

Images served over HTTP cannot directly modify page content, but attackers can substitute fake images or track which pages a user visits. Browsers will load the image but replace the green lock icon in the address bar with a warning indicator.

Problems Caused by Mixed Content

• Lost padlock icon / "Not Secure" warning — Users see the site as insecure even though SSL is installed.
• Blocked scripts and styles — Pages may render incorrectly, buttons may stop working, or layouts may break completely.
• Images fail to load (in some cases) — Newer browsers may try to upgrade passive resources to HTTPS; if no HTTPS version exists, the image simply won't load.
• SEO impact — Mixed Content can degrade Core Web Vitals (LCP, CLS) if critical resources are blocked. Google uses security signals as a ranking factor.
• Console noise — Hidden Mixed Content errors in third-party scripts can be difficult to trace without knowing to look for them.

How to Detect Mixed Content

Before fixing Mixed Content, you need to know exactly where it is. Here are the most reliable methods:

1. Chrome DevTools — Most Accurate

1. Open the page in Chrome.
2. Press F12 or Ctrl+Shift+I to open DevTools.
3. Go to the Console tab — look for red or yellow messages starting with "Mixed Content".
4. Go to the Network tab, reload the page, and filter for requests starting with http://.

2. Online Tools

• Why No Padlock (whynopadlock.com) — Scans public URLs for Mixed Content, free to use.
• JitBit SSL Checker — Crawls your entire site looking for HTTP resources.
• SSL Shopper SSL Checker — Useful for verifying certificate installation issues.

3. View Source Search

For CMS-based sites, press Ctrl+U in Chrome to view page source, then search for http:// to find any un-upgraded URLs in the rendered HTML.

General Fix Methods

The fix depends on the source of the Mixed Content. Here are the most common cases:

Case 1: URLs You Control (Your Own Files)

Change the URLs in your HTML, CSS, or JS files from http:// to https://, or use protocol-relative URLs:

<!-- Old (wrong) -->
<img src="http://example.com/img/photo.jpg">
<script src="http://example.com/js/main.js"></script>

<!-- Correct -->
<img src="https://example.com/img/photo.jpg">
<script src="https://example.com/js/main.js"></script>

<!-- Protocol-relative (works for both http and https) -->
<img src="//example.com/img/photo.jpg">

Case 2: External Third-Party Resources

If the third-party service supports HTTPS (most do), simply switch the URL to https://. If the service doesn't support HTTPS, download and self-host the file instead.

Case 3: URLs Stored in a Database

For CMS platforms like WordPress that store URLs in a database, you must update the database records — editing PHP files alone won't fix it. See the WordPress section below.

Fixing Mixed Content in WordPress

WordPress stores URLs in its MySQL database, so migrating from HTTP to HTTPS requires a database search-and-replace. Here are the main approaches:

Method 1: Really Simple SSL Plugin (Easiest for Beginners)

1. Install the Really Simple SSL plugin from WordPress.org.
2. Activate it and click "Go ahead, activate SSL!"
3. The plugin will set up HTTP→HTTPS redirects and add necessary headers automatically.
4. Check the Console again to verify Mixed Content warnings are gone.

Method 2: Better Search Replace Plugin (Permanent Database Fix)

1. Install the Better Search Replace plugin.
2. Go to Tools → Better Search Replace.
3. "Search for": http://yourdomain.com
4. "Replace with": https://yourdomain.com
5. Select all tables, or at minimum: wp_posts, wp_postmeta, wp_options.
6. Run a Dry Run first to see how many records will change, then run the actual replacement.

Method 3: WP-CLI (For SSH Users)

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

Additional wp-config.php Settings

Add these lines to wp-config.php to enforce HTTPS across the board:

define('FORCE_SSL_ADMIN', true);
define('WP_HOME', 'https://yourdomain.com');
define('WP_SITEURL', 'https://yourdomain.com');

Fixing Mixed Content on DirectAdmin Hosting

AsiaGB Hosting users on DirectAdmin can manage SSL and address Mixed Content issues directly from the control panel:

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

Using CSP Header as a Safety Net

Even after fixing URLs in your code and database, some may slip through. The Content-Security-Policy: upgrade-insecure-requests HTTP header tells the browser to automatically upgrade all HTTP resource requests to HTTPS before loading them.

Add to your .htaccess:

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

Bonus: Add HSTS Once Everything Is Clean

After resolving all Mixed Content issues, add HSTS (HTTP Strict Transport Security) to enforce HTTPS for all future visits, reducing redirect overhead and preventing protocol downgrade attacks:

Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"

Preventing Mixed Content in the Future

• Set default URLs to HTTPS in all systems — WordPress Site URL, database URLs, and config files must all use https://.
• Use protocol-relative URLs when hardcoding — //cdn.example.com/file.js instead of http://cdn.example.com/file.js.
• Review new plugins and themes before activating — Check their source code for hardcoded HTTP URLs.
• Use Content-Security-Policy with report-uri — Receive reports any time Mixed Content is triggered on your site.
• Add Mixed Content checks to your CI/CD pipeline — Automate detection on every deployment using tools like Puppeteer or Playwright.
• Test after every deploy — A quick browser DevTools check takes only seconds and catches regressions early.

Frequently Asked Questions