Mixed Content.

Security Client-Side Security

Loading HTTP resources on HTTPS pages weakens encryption and triggers browser warnings

What does this check test?

Mixed content occurs when an HTTPS page loads sub-resources (scripts, stylesheets, images, iframes, fonts, AJAX requests) over insecure HTTP connections. Browsers classify mixed content as either 'active' (scripts, stylesheets, iframes — which can alter the page) or 'passive' (images, audio, video — which cannot modify the DOM). Modern browsers block active mixed content entirely and may warn about or block passive mixed content. This check identifies any HTTP resource loads on HTTPS pages.

Why does it matter?

Mixed content undermines the security guarantees of HTTPS. An attacker on the network can intercept and modify HTTP resources in transit. If a script is loaded over HTTP, an attacker can replace it with malicious code that executes in the security context of the HTTPS page, effectively bypassing encryption for the entire session. Even passive mixed content like images can be swapped to display misleading information (e.g., changing a bank balance display). Browsers increasingly block mixed content, so it also causes functionality issues.

Who is affected?

Any site that has migrated from HTTP to HTTPS but still references HTTP resources is affected. This commonly occurs with legacy content, hardcoded URLs in databases, user-generated content with absolute HTTP URLs, third-party widgets that default to HTTP, and CDN resources not updated to HTTPS. Sites with large content databases (CMSs, e-commerce catalogs) are most likely to have lingering HTTP references.

Where does this apply?

Open your browser's DevTools Console — mixed content warnings and errors are logged automatically. The Network tab shows the protocol for each resource. You can also use the `Content-Security-Policy: upgrade-insecure-requests` header to automatically upgrade HTTP requests to HTTPS. Check for HTTP URLs in `<script src>`, `<link href>`, `<img src>`, `<iframe src>`, CSS `url()` values, and AJAX/fetch calls.

How to fix it

Update all resource URLs to use HTTPS or protocol-relative URLs:

html

<!-- Bad: HTTP resource on HTTPS page -->
<script src="http://cdn.example.com/lib.js"></script>
<img src="http://images.example.com/logo.png">

<!-- Good: HTTPS or protocol-relative -->
<script src="https://cdn.example.com/lib.js"></script>
<img src="https://images.example.com/logo.png">

As a safety net, add the CSP directive to automatically upgrade HTTP requests:

Content-Security-Policy: upgrade-insecure-requests

content stored in databases, run a migration to update URLs

sql

UPDATE posts SET content = REPLACE(content, 'http://cdn.example.com', 'https://cdn.example.com');

Use CSP's `block-all-mixed-content` directive (deprecated but still works in some browsers) or `upgrade-insecure-requests` for comprehensive protection.

References

AppVet checks Mixed Content automatically

Run a free security scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks