Mixed Content怎么办

Mixed Content怎么办

Mixed Content（混合内容）指 HTTPS 页面中加载了 HTTP 协议的资源（如图片、脚本、样式表、iframe、字体等），浏览器会阻止主动型混合内容（如 <script>、<iframe>、<object>），并可能降级显示被动型混合内容（如 <img>），同时在地址栏标记“不安全”或移除锁形图标。

根本解决方式是将所有子资源升级为 HTTPS：检查页面 HTML 源码、CSS 文件、JavaScript 逻辑及后端模板，将 http:// 开头的 URL 改为协议相对路径（//example.com/asset.js）或显式 HTTPS（https://example.com/asset.js）。现代浏览器（Chrome、Firefox、Edge）自 v100 起已默认阻止所有混合脚本和 iframe，且不再提供“允许不安全内容”的手动覆盖选项。

若第三方资源不支持 HTTPS（如老旧 CDN 或内部 HTTP 服务），应通过反向代理（如 Nginx、Cloudflare Workers）将其代理至 HTTPS 端点；或使用 Content-Security-Policy: upgrade-insecure-requests 响应头，强制浏览器自动将页面内所有 HTTP 请求升级为 HTTPS（该策略仅对同源及兼容 CORS 的跨域资源生效，且不适用于 <form action="http://..."> 等非资源类属性）。

需要注意的情况

• 动态生成 URL 的 JS 代码（如拼接 location.protocol + "//api.example.com"）需确保协议判断逻辑正确，避免在 HTTPS 页面中仍输出 http://；
• WordPress、Drupal 等 CMS 需检查站点地址（siteurl/home）、媒体库附件链接及插件配置，部分插件需启用“SSL 强制”或更新为 HTTPS 兼容版本；
• HTTP 重定向至 HTTPS 不解决 Mixed Content —— 它只影响主文档请求，子资源仍按原始协议加载；
• 开发环境常因本地 HTTP 服务触发 Mixed Content，建议使用 localhost（现代浏览器对其豁免混合内容限制）或配置本地 HTTPS（如 mkcert）。