Description
Mixed content occurs when an HTTPS page loads resources (scripts, images, stylesheets) over insecure HTTP. This creates a security vulnerability even though the main page is encrypted.
HTTP resources can be intercepted and modified by attackers through man-in-the-middle attacks. An attacker could replace a legitimate script with malicious code, or modify images to contain exploits.
Modern browsers block or warn about mixed content, which can break your site's functionality and reduce user trust. The padlock icon may be removed, alerting users to security issues.
Potential Impact & Risks
- Man-in-the-middle attacks
- Code injection via modified scripts
- Session hijacking
- Broken site functionality
- Browser security warnings
- Loss of user trust
Remediation
Finding Mixed Content
1. Check browser console for mixed content warnings
2. Use online scanners (WhyNoPadlock.com)
3. Review all <script>, <link>, <img>, <iframe> tags
4. Check CSS for url() declarations
Fixing Mixed Content
1. **Update to HTTPS**: Change http:// to https:// in all resource URLs
2. **Use protocol-relative URLs**: //example.com/script.js
3. **Upgrade-Insecure-Requests**: Add CSP header to auto-upgrade
4. **Host locally**: Download and serve third-party resources
5. **Use CDNs**: Modern CDNs support HTTPS
Prevention
1. **Content Security Policy**: Block HTTP resources
2. **HTTPS everywhere**: Don't use HTTP for anything
3. **Update dependencies**: Ensure libraries support HTTPS
4. **Check templates**: Update hardcoded URLs
Code Examples
// ❌ BAD - Mixed content:
<script src="http://example.com/script.js"></script>
<img src="http://example.com/image.jpg">
// ✅ GOOD - HTTPS only:
<script src="https://example.com/script.js"></script>
<img src="https://example.com/image.jpg">
// ✅ GOOD - Protocol-relative:
<script src="//example.com/script.js"></script>
// CSP header to auto-upgrade:
Content-Security-Policy: upgrade-insecure-requests
// Or via meta tag:
<meta http-equiv="Content-Security-Policy"
content="upgrade-insecure-requests">