https 页面加载 http 资源会被浏览器直接阻断，控制台报 mixed content 错误；主动混合内容（如 script、iframe）一律阻止，被动内容（如 img）新版 chrome 也屏蔽，并显示“不安全”提示。
HTTPS 页面里加载 HTTP 资源会怎样
不会报错但会被浏览器直接阻断，现代浏览器（Chrome、Firefox、Safari）默认阻止所有主动混合内容（http:// 的 <script></script>、<iframe></iframe>、<img> 等），控制台抛出 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...' 错误。
被动混合内容（如 <img>）在部分旧版浏览器中可能仍显示，但新版 Chrome 已一并屏蔽；且即使能加载，也会在地址栏显示“不安全”提示，影响用户信任和 SEO。
如何快速定位页面中的混合内容
打开开发者工具 → 切换到 Console 或 Security 标签页，搜索关键词 Mixed Content；也可用命令行工具批量扫描：
curl -s https://yoursite.com | grep -o 'src="http://' | head -5
常见藏匿位置包括：
<script src="http://cdn.example.com/jquery.js"></script><iframe src="http://legacy-widget.com/embed"></iframe>-
background: url(http://assets.site.com/bg.jpg)（CSS 内联或外部文件中） -
window.location.href = 'http://old.site.com'（JS 重定向）
修复混合内容的三种可靠方式
优先级从高到低：协议相对路径 > HTTPS 显式替换 > 服务端重写。不要依赖 http: 前缀自动升级（部分代理/CDN 不支持）。
- 把
http://cdn.example.com/js/app.js改成//cdn.example.com/js/app.js（协议相对 URL），浏览器会自动继承当前页面协议 - 确认第三方资源是否支持 HTTPS：访问
https://cdn.example.com/js/app.js直接测试，404 或证书错误需联系对方或换 CDN - 服务端 Nginx 配置可临时重写（仅调试用）：
sub_filter 'http://' 'https://'; sub_filter_once off;，但有性能开销且不适用于 JS 动态拼接的 URL
特别注意那些“看不见”的混合内容
CSS @import、JS 中字符串拼接、HTML data-* 属性、meta 标签里的 content 值（如 Open Graph 图片）、甚至字体文件 @font-face src 都可能引入 http://。这些不会在初始 HTML 源码里高亮，但会在运行时触发混合内容警告。
更隐蔽的是：某些 CMS 插件或模板引擎（如 WordPress 的 get_template_directory_uri()）返回的 URL 默认带协议，需检查是否硬编码了 http://；还有老旧的 SVG 文件内联时自带 xlink:href="http://..."，必须手动改为相对路径或移除 xlink: 前缀（SVG2 已废弃该属性）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
