Passive Mixed Content over HTTPS
Description
The application serves an HTTPS page that loads passive resources (such as images, stylesheets, or media files) over unencrypted HTTP connections. This creates a mixed content scenario where the page's security is compromised because some content is transmitted in cleartext. While the main page is encrypted, the HTTP-loaded resources remain vulnerable to interception and manipulation.
Remediation
Ensure all resources are loaded over HTTPS to maintain end-to-end encryption. Implement the following measures:
1. Update Resource URLs: Change all HTTP resource references to HTTPS or use protocol-relative URLs:
<!-- Instead of --> <link rel="stylesheet" href="http://example.com/style.css"> <img src="http://example.com/image.png"> <!-- Use HTTPS --> <link rel="stylesheet" href="https://example.com/style.css"> <img src="https://example.com/image.png"> <!-- Or use protocol-relative URLs --> <link rel="stylesheet" href="//example.com/style.css"> <img src="//example.com/image.png">
2. Implement HTTP Strict Transport Security (HSTS): Add the HSTS header to force browsers to use HTTPS for all requests:
Strict-Transport-Security: max-age=31536000; includeSubDomains
3. Deploy Content Security Policy (CSP): Use CSP to block mixed content and enforce HTTPS-only resource loading:
Content-Security-Policy: upgrade-insecure-requests;
4. Audit Third-Party Resources: Verify that all external resources (CDNs, analytics, fonts) support HTTPS and update references accordingly. If a third-party resource doesn't support HTTPS, consider hosting it locally or finding an alternative provider.