Active Mixed Content over HTTPS
Description
Active Mixed Content occurs when an HTTPS webpage loads executable resources (such as JavaScript files, stylesheets, or plugins) over unencrypted HTTP connections. While the main page is served securely via HTTPS, these active resources are transmitted in cleartext, creating a security vulnerability. Unlike passive mixed content (images, videos), active content can execute code and modify the entire page, making this a critical security concern that undermines the protection provided by HTTPS.
Remediation
Eliminate all active mixed content by ensuring all resources are loaded over HTTPS. Implement the following measures:
1. Update Resource URLs to HTTPS:
Change all script, stylesheet, and other active content references to use HTTPS:
<!-- Insecure --> <script src="http://example.com/script.js"></script> <link rel="stylesheet" href="http://example.com/style.css"> <!-- Secure --> <script src="https://example.com/script.js"></script> <link rel="stylesheet" href="https://example.com/style.css">
2. Use Protocol-Relative URLs (with caution):
For third-party resources, protocol-relative URLs automatically match the page's protocol:
<script src="//example.com/script.js"></script> <link rel="stylesheet" href="//example.com/style.css">Note: This approach is deprecated for modern applications; explicit HTTPS is preferred.
3. Implement HTTP Strict Transport Security (HSTS):
Add the HSTS header to force browsers to use HTTPS for all resources:
Strict-Transport-Security: max-age=31536000; includeSubDomains
4. Deploy Content Security Policy (CSP):
Use CSP to block insecure resource loading and enforce HTTPS:
Content-Security-Policy: upgrade-insecure-requests; default-src https:
5. Audit and Test:
Use browser developer tools to identify mixed content warnings and verify all resources load over HTTPS before deploying to production.