当前位置：首页 > news >正文

把“Mixed Content”吃干抹净——一次 https→http 踩坑实录

news 2025/10/12 7:16:17

本篇所有报错截图均来自本人 2025-06-18 测试日志。

一、案发经过：WPS 中台接进来了，页面却空白

背景
- 业务系统：https://10.99.212.22:8600/oa
- WPS 中台（WebOffice）：http://10.99.212.23:8080/weboffice/…

现象
点击「在线预览」→ 浏览器控制台瞬间爆红：

Mixed Content: The page at 'https://10.99.212.22:8600/oa/wpsOnline?...'
was loaded over HTTPS, but requested an insecure frame 'http://10.99.212.23/...'.
This request has been blocked.

iframe 区域空白，用户以为“中台崩了”，实则浏览器把请求直接扼杀。

二、为什么拦我？——Mixed Content 安全策略速览

父页协议	子资源协议	浏览器默认行为
https	https	✅ 通过
https	http	❌ 主动内容（iframe/script/XHR）一律 block
http	https	✅ 通过（降级安全，但不拦）
http	http	✅ 通过

结论：https 页面里再嵌 http，就是 Mixed Content，现代浏览器默认阻断。

三、实测复现：一分钟把坑踩穿

最小可复现代码

<!DOCTYPE html>
<head><meta charset="utf-8"><title>https→http 踩坑</title></head>
<body><h3>下面嵌了 WPS 中台（http）</h3><iframe src="http://10.99.212.23/weboffice/office/f/xxx?readonly"width="100%" height="600"></iframe>
</body>
</html>

用 https 打开 → F12 立刻出现本文开头报错；iframe 区域空白。
把 iframe 的 src 改成 https://10.99.212.23/... → 页面秒出，控制台干净。

四、根因剖析——“内网就不用 https”是伪命题

浏览器只看协议头，不管公网/内网；http:// 就是明文传输。
内网同样能被 ARP 劫持、中间人插脚本；https 是最低成本的安全基线。
自签证书即可满足 Mixed Content 规则，不必花钱买公网 SSL。

五、三种解法（按推荐顺序）

全站 HTTPS（一劳永逸）
给 WPS 中台加一层反向代理（Nginx/Traefik），监听 443，证书用 Let’s Encrypt 或自签，业务代码里把 iframe 地址统一换成 https://10.99.212.23/... → Mixed Content 消失。
Upgrade-Insecure-Requests（30 秒应急）
在 https 页面加：
```
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
```
浏览器会自动把 http:// 升级成 https://，前提是中台已开 443 并配好证书；否则升级失败照样 404。
👉 适合“证书已部署，只是地址忘改”的场景。
降级父页（不推荐）
把整个 OA 系统跳回 http://，Mixed Content 规则不会触发，但失去加密、浏览器地址栏显示“不安全”，且后续 HTTP→HTTPS 迁移更麻烦。