How to fix mixed content warnings on HTTPS

What is mixed content?

Mixed content occurs when an initial HTML page loads over a secure HTTPS connection, but some of the resources referenced within that page load over an insecure HTTP connection. Because the page itself is HTTPS, a visitor sees the padlock icon, but their browser also detects that parts of the page are not encrypted.

There are two categories of mixed content, and they behave very differently:

• Active mixed content — resources that the browser can execute or modify the page with: scripts, stylesheets, iframes, and Flash. Browsers block these automatically, which can break your site's functionality.
• Passive mixed content — resources that cannot alter the page structure: images, audio, and video. Browsers typically load these but display a warning that the page is not fully secure.

In both cases, the padlock icon is downgraded or removed, and visitors may see a "Not secure" warning.

Why mixed content matters

Mixed content is not just a cosmetic issue. It creates real security and business problems:

• Security risk — an attacker on the same network can intercept the unencrypted HTTP resources and modify them. A loaded-over-HTTP JavaScript file could be replaced with malicious code that steals session tokens or injects fake content.
• Broken functionality — blocked scripts mean forms may not submit, menus may not open, and interactive features may stop working entirely.
• SEO impact — Google treats mixed content as a negative signal. Pages with mixed content may not achieve the same ranking potential as fully secure pages.
• Trust damage — visitors who see "Not secure" warnings are significantly less likely to interact with your site, submit forms, or make purchases.

How to find mixed content

Before you can fix mixed content, you need to find every HTTP resource reference on your site. Here are three approaches:

Browser developer console

Open your website in Chrome, then press F12 to open DevTools. Go to the Console tab. Chrome logs every mixed content request with a warning message that tells you exactly which resource URL is insecure and which page loaded it. Look for messages like:

Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure image 'http://example.com/photo.jpg'. This content should also be served over HTTPS.

Online security scanners

A security scanner like PulseShield crawls your page and flags every HTTP resource reference automatically. This is faster and more thorough than checking pages one by one in a browser, especially if your site has dozens of pages.

Command line

You can use curl to fetch the HTML source and search for HTTP URLs:

curl -s https://example.com | grep -i 'src="http://'

This catches obvious references in src attributes but may miss references in CSS files, JavaScript, or dynamically generated content.

Step-by-step fix

Once you have identified all the mixed content references, follow these steps:

1. Update hard-coded HTTP links — search your HTML, CSS, and JavaScript files for http:// URLs. Change them to https:// where the target resource supports HTTPS. This is the most reliable fix.
2. Use relative URLs — instead of <img src="https://example.com/photo.jpg">, use <img src="/photo.jpg">. Relative URLs inherit the protocol of the page, so they will always use HTTPS on an HTTPS page.
3. Use protocol-relative URLs — change http://example.com/script.js to //example.com/script.js. The browser will use whichever protocol the page was loaded with. Note: this approach is discouraged in modern best practice in favour of explicit HTTPS URLs.
4. Set the Content-Security-Policy header — add the following HTTP response header to automatically upgrade all insecure requests: Content-Security-Policy: upgrade-insecure-requests. This tells the browser to rewrite every HTTP request to HTTPS before making it. It is a safety net, not a replacement for fixing the source.

WordPress-specific fixes

WordPress sites are particularly prone to mixed content because themes, plugins, and the media library often store hard-coded HTTP URLs in the database. To fix WordPress mixed content:

• Go to Settings > General and ensure both the "WordPress Address" and "Site Address" fields use https://
• Update old HTTP URLs in the database using a search-and-replace tool (such as WP-CLI or a dedicated plugin like Better Search Replace)
• Check that your wp-config.php includes define('FORCE_SSL_ADMIN', true); to force HTTPS on the admin area
• After making changes, clear all caches including page caches, browser caches, and CDN caches

Be cautious with database search-and-replace on serialised data (such as widget configurations). Use a tool designed for WordPress serialised data rather than a raw SQL update.

Testing after your fix

After making changes, test thoroughly:

• Open each page in Chrome DevTools and check the Console for any remaining mixed content warnings
• Check the Network tab and filter by "Mixed" to see if any requests are being blocked
• Run a security scan to catch mixed content on pages you may have missed
• Verify that the padlock icon appears without any warnings on every page

If your site uses HTTP security headers, make sure your Content-Security-Policy header is correctly configured alongside HSTS. And if you are new to HTTPS in general, our guide to SSL certificates covers the fundamentals.