Mixed Content Warnings: What They Are and How to Fix Them

You've installed a valid SSL certificate and configured HTTPS — but your browser still shows a warning or a broken padlock. The likely culprit is mixed content: resources being loaded over HTTP on an HTTPS page.

What Is Mixed Content?

Mixed content occurs when an HTTPS page includes resources (images, scripts, stylesheets, iframes, fonts) referenced with http:// URLs instead of https://. Because the page itself is encrypted but some resources are not, the security guarantee is weakened.

Browsers classify mixed content in two ways:

• Active mixed content — scripts, stylesheets, iframes. Blocked by default in all modern browsers because these can manipulate the page.
• Passive mixed content — images, audio, video. Shown with a security warning but not blocked in most browsers.

Finding Mixed Content

Open your browser's developer tools (F12), go to the Console tab, and look for warnings like: "Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'". The Network tab filtered to "http" requests also shows the offending resources.

Common Sources of Mixed Content

• Hardcoded http:// URLs in HTML templates or CMS content
• External embeds (maps, widgets, social buttons) that use HTTP
• Database content with stored http:// URLs
• Third-party scripts loaded over HTTP

Fixing It

Use Protocol-Relative URLs

Change http:// to // — the browser will use the same protocol as the page: <img src="//cdn.example.com/image.png">

Use HTTPS Explicitly

Change all internal resource URLs to https://. Most CDNs and third-party services support HTTPS — update the embed codes.

Content-Security-Policy Upgrade-Insecure-Requests

Add this response header to automatically upgrade HTTP requests to HTTPS: Content-Security-Policy: upgrade-insecure-requests. This is a useful short-term fix while you hunt down every hardcoded URL.

After Fixing

Confirm the padlock is green and no warnings appear. The browser's developer console should show no mixed content messages. If you want to verify the certificate itself is correct, paste it into the SSL Certificate Decoder.