Skip to content

混合内容

快速摘要

你的页面是 HTTPS 的,但里面引用了 `http://` 的图片、脚本或接口,浏览器出于安全考虑会拦截。

为什么发生

  • 页面是 HTTPS,但图片/脚本/CSS 用了 http:// 协议

  • 第三方接口地址还是 http://,没有升级到 HTTPS

  • 旧代码迁移到 HTTPS 后,硬编码的 http:// 没改

最小示例

✗ 错误代码
<img src="http://example.com/photo.jpg" alt="图">
✓ 修复代码
<img src="https://example.com/photo.jpg" alt="图">

HTTPS 页面里加载 http:// 图片会被浏览器阻止。把 src 改成 https:// 即可。

如何诊断

  • 在浏览器控制台查找 Mixed Content 警告,它会指出具体的资源 URL

  • 在 Network 面板查看被阻止的请求及其协议

  • 搜索代码中所有 http:// 引用,确认是否需要改成 https://

如何修复

  • 把所有资源引用从 http:// 改成 https://

  • 使用协议相对 URL //example.com/... 或直接用 https://

  • 联系第三方服务方,要求提供 HTTPS 端点

如何预防

  • 新项目从一开始就全站 HTTPS,所有引用都用 https://

  • 用 CSP(Content-Security-Policy)的 upgrade-insecure-requests 自动升级

相关资源

相关术语

相关课程

相关练习

相关工具

← 返回语言