How to fix mixed content?

mixed-content-presentpage

Mixed content exists when an HTTPS page references resources loaded over HTTP. Browsers categorize mixed content as active or passive. Active mixed content includes scripts, stylesheets, and iframes that can modify page behavior. Passive mixed content covers images, audio, and video. Modern browsers block active mixed content and warn about passive mixed content, degrading security guarantees and user trust.

What’s wrong

The page loads over HTTPS but contains references to HTTP resources in src, href, or data attributes. These HTTP references create mixed content. Browsers detect the protocol mismatch between the secure page context and insecure resource requests. Active mixed content gets blocked automatically in modern browsers. Passive mixed content generates console warnings and may display security indicator changes.

Why it matters

Mixed content undermines HTTPS security guarantees. HTTP resources traverse the network unencrypted and unauthenticated. Network attackers can intercept and modify HTTP responses while the page believes it operates securely. An attacker modifying an HTTP script on an HTTPS page achieves the same outcome as compromising a fully insecure page. Browsers block or warn about mixed content to prevent this security degradation. Pages with mixed content display security warnings that reduce user confidence.

The correct change

Change all resource URLs from HTTP to HTTPS. Update hardcoded protocol references in HTML, CSS, and JavaScript to use https:// schemes. Convert protocol-relative URLs (//example.com/resource.js) to explicit HTTPS. Ensure all third-party resources support HTTPS before linking them. Remove or replace resources that only exist on HTTP. The end state is a page with no HTTP resource references, loading all content over HTTPS.

Scope

This condition applies at the page level. Each page must resolve its own mixed content violations. Mixed content appears in HTML markup, inline styles, JavaScript code, and dynamically loaded resources. Templates propagate mixed content across multiple pages. Third-party scripts can inject mixed content at runtime. Global resolution requires scanning all code paths that generate resource URLs.

How to verify

• Validation confirms the condition is resolved:
• • Browser console shows no mixed content warnings
• • Security indicator shows full HTTPS lock icon
• • Network panel shows all resources loaded over HTTPS
• • No blocked content messages in console
• • Page functionality remains intact with all resources loading
• • Security scanners detect no mixed content violations
• • All images, scripts, styles, and iframes use HTTPS URLs

Takeaway

• Mixed content loads HTTP resources on HTTPS pages, breaking security guarantees
• Browsers block active mixed content and warn about passive mixed content
• The fix requires changing all resource URLs to HTTPS
• Third-party resources must support HTTPS or be replaced
• Protocol-relative URLs should be converted to explicit HTTPS

FAQ

Why do browsers treat active and passive mixed content differently?

Active mixed content can execute code or modify page behavior, creating immediate security risk. Scripts and stylesheets have full page access. Modifying these resources allows complete page compromise. Passive mixed content like images affects visual display but cannot execute code. Browsers block active mixed content automatically while warning about passive mixed content to avoid breaking image display.

Are protocol-relative URLs secure on HTTPS pages?

Protocol-relative URLs inherit the page protocol. On HTTPS pages, //example.com/script.js loads as https://example.com/script.js. This appears secure but creates mixed content if the page ever loads over HTTP. Explicit HTTPS URLs are clearer and prevent accidental HTTP loading. Modern practice prefers explicit https:// over protocol-relative URLs.

Can Content-Security-Policy upgrade HTTP to HTTPS automatically?

Yes, with the upgrade-insecure-requests directive. This CSP directive instructs browsers to automatically upgrade HTTP resource requests to HTTPS. The directive fixes mixed content without changing URLs in code. It fails if the resource does not exist at the HTTPS version. Use upgrade-insecure-requests as a transitional tool while fixing URLs permanently.

What happens when a third-party resource only exists on HTTP?

Browsers block the resource on HTTPS pages. The page loses that functionality. Options include finding an HTTPS alternative, hosting the resource locally over HTTPS, or removing the feature. Do not revert the page to HTTP to accommodate HTTP-only resources. The security cost exceeds the feature value.

Do internal network resources count as mixed content?

Yes. Mixed content rules apply regardless of resource location. Loading http://192.168.1.1/data from an HTTPS page creates mixed content. Internal resources on private networks still traverse the wire unencrypted. Network attackers with internal access can modify these requests. Use HTTPS for all resources including internal infrastructure.

Does fixing mixed content affect page performance?

HTTPS adds minimal overhead compared to HTTP. Modern TLS implementations are highly optimized. The performance difference between HTTP and HTTPS for most resources is negligible. HTTPS supports HTTP/2 and HTTP/3 which often perform better than HTTP/1.1. The security benefit significantly outweighs any marginal performance cost.

The fix

Eliminate HTTP resource references from HTTPS pages to maintain security guarantees

Done when: All resources load over HTTPS with no HTTP resource references remaining

Do not

• Do not use protocol-relative URLs as a permanent solution
• Do not revert pages to HTTP to accommodate HTTP-only resources
• Do not ignore passive mixed content warnings because browsers currently allow them
• Do not assume internal network resources are safe over HTTP

How to verify

• Browser console shows no mixed content warnings or errors
• All resources in network panel use HTTPS protocol
• Security indicator shows complete HTTPS lock
• No blocked content messages appear
• Security scanners confirm no mixed content violations

Find every page with this

probeo monitors this continuously across every page of your site, and records which pages passed, which failed, and which it could not determine.