Mixed Content Warning Explained

A mixed content warning appears when an HTTPS page loads some resources — images, scripts, stylesheets, iframes — over HTTP. This undermines the security of the HTTPS connection because those HTTP resources are not encrypted and can be intercepted or modified by a man-in-the-middle attacker.

Passive vs. Active Mixed Content

• Passive mixed content: Resources that cannot modify the page's DOM — images, audio, video. Browsers typically display a warning indicator but still load the resources.
• Active mixed content: Resources that can execute code or modify the page — JavaScript, CSS stylesheets, iframes. Modern browsers block active mixed content entirely, which can break page functionality.

How to Find Mixed Content

• Open Chrome/Firefox DevTools → Console tab → look for mixed content warnings
• DevTools → Network tab → filter by "http://" or look for requests with "Mixed Content" type
• Browser extensions like "HTTPS Everywhere" or online tools like WhyNoPadlock

Common Causes

• Hardcoded http:// URLs in HTML, CSS, or JavaScript
• CMS or plugin assets that use HTTP URLs in their defaults
• Embedded third-party widgets or analytics scripts served over HTTP
• Images or files stored in a database with absolute HTTP URLs

How to Fix It

• Change all resource URLs from http:// to https:// or to protocol-relative // URLs
• Add the Content-Security-Policy: upgrade-insecure-requests HTTP header — this tells browsers to automatically upgrade HTTP subresource requests to HTTPS
• For WordPress: use plugins like "Better Search Replace" to update all HTTP URLs in the database to HTTPS