HTTPS页面加载HTTP资源会失败，因浏览器将HTTP标记为不安全并主动拦截混合内容；图片等被动内容被阻止，iframe等主动内容更严格阻断，且CSP无法放行。

HTTPS 页面本身不依赖混合内容，但一旦页面里写了 http:// 开头的资源链接，浏览器就会把它当成混合内容并主动拦截——这不是“依赖”，而是“冲突”。

为什么 HTTPS 页面加载 http:// 图片会失败

现代浏览器（Chrome、Firefox、Edge）把 HTTPS 页面视为“安全上下文”，而所有 http:// 资源都被标记为“不安全”。哪怕只是个 <img src="http://example.com/logo.png">，浏览器也会在控制台报错并阻止加载。

• 错误典型形式：Mixed Content: The page at 'https://site.com/' was loaded over HTTPS, but requested an insecure image 'http://cdn.example.com/img.jpg'. This request has been blocked.
• 被动混合内容（如图片、视频）有时在旧版 Safari 或部分安卓 WebView 中可能“悄悄加载”，但 Chrome 从 v94 起默认完全阻止
• 路径写成相对协议（//cdn.example.com/img.jpg）可临时绕过，但前提是目标服务器同时支持 HTTP 和 HTTPS；若对方只开 HTTP，依然会降级成不安全请求

<iframe src="http://..."> 在 HTTPS 页面中必然被拦截

IFRAME 属于“主动混合内容”，浏览器处理更严格：不警告、不降级、直接阻断。这是因为它可能承载完整 HTML、执行脚本、窃取父页 Cookie。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 控制台错误明确提示：Mixed Content: ... requested an insecure frame 'http://...'. This request has been blocked; the content must be served over HTTPS.
• 不能靠 CSP（Content-Security-Policy）放行——upgrade-insecure-requests 对 iframe 无效，block-all-mixed-content 是默认启用的
• 如果第三方网站没开 HTTPS（比如老旧内部系统），你无法强制它变安全；此时唯一合规解法是服务端代理（如 Nginx 反向代理 + 自签证书透传），而非前端 hack

如何快速定位所有混合内容问题

别靠肉眼翻 HTML 源码。打开浏览器开发者工具 → Console 标签页，刷新页面，所有混合内容都会以红色错误或黄色警告列出，点击可跳转到对应 HTML 行。

立即学习“前端免费学习笔记（深入）”；

• 常见触发点：<img src="http://...">、<script src="http://...">、<link href="http://...">、<iframe src="http://...">、CSS 里的 url("http://...")
• 注意：JS 动态拼接的 URL（如 document.createElement('img').src = 'http://' + domain）不会出现在初始 HTML 里，但控制台仍会报错，需结合 Sources + Breakpoints 排查
• 用命令行批量检查：grep -r "http://" ./public/ --include="*.html" --include="*.js" --include="*.css"（假设静态资源在 ./public/）

最易被忽略的是第三方 SDK 或统计代码里硬编码的 http:// 请求地址——它们往往藏在压缩后的 JS 里，不报错但会静默失败。上线前务必用真实 HTTPS 环境跑一遍全链路测试，别只信本地 http://localhost。