网页明明用了HTTPS，怎么还提示不安全？
你有没有遇到过这种情况：网站地址栏明明是 https://，小锁图标也显示了，但浏览器却突然弹出“页面包含不安全内容”或者直接把锁图标打了个叉？其实这大概率是因为“混合内容”在作怪。
什么是混合内容？
简单来说，混合内容（Mixed Content）就是指一个通过 HTTPS 加载的网页中，偷偷夹带了 HTTP 协议加载的资源。比如图片、脚本、样式表、视频甚至 iframe 框架。虽然主页面是加密传输的，但这些“搭便车”的 HTTP 资源却是明文传输，容易被中间人篡改或窃听。
举个生活中的例子：你寄了一封密封的挂号信（HTTPS），信里却附了一张明信片（HTTP），谁都能看到上面写什么。整个通信的安全性就被这张明信片拉低了。
浏览器为何这么敏感？
现代浏览器对混合内容越来越严格。尤其是那些可能执行代码的资源，比如 JavaScript 文件，一旦通过 HTTP 加载，攻击者可以在传输过程中注入恶意脚本，盗取你的登录信息，哪怕页面地址是 https 也没用。所以浏览器会主动阻止这类内容，甚至整页降级提示“不安全”。
怎么发现是混合内容惹的祸？
打开浏览器的开发者工具（F12），切换到 Console 或 Network 标签页，如果页面存在混合内容，通常会看到类似这样的警告：
Blocked loading of mixed active content "http://example.com/script.js"注意关键词 “mixed content” 和 “blocked”，这就说明某个 HTTP 资源被拦截了。Network 面板里你也能看到部分请求显示红色或黄色警告。
如何解决？从源头堵住HTTP资源
最根本的办法，就是确保网页里所有资源都使用 HTTPS 加载。检查你的 HTML 代码，特别是以下几种标签：
<img src="http://img.example.com/photo.jpg">
<script src="http://cdn.example.com/app.js"></script>
<link rel="stylesheet" href="http://static.example.com/style.css">
<iframe src="http://video.example.com/embed"></iframe>把其中的 http:// 全部替换成 https://。如果对方服务器不支持 HTTPS，那就得换资源链接，或者自己托管一份到支持 HTTPS 的 CDN 上。
还有一个偷懒但有效的方法：使用协议相对路径。比如：
<script src="//cdn.example.com/app.js"></script>这样浏览器会自动继承当前页面的协议，HTTPS 页面就用 HTTPS 加载，HTTP 页面则用 HTTP——当然，前提是目标服务器支持 HTTPS。
网站管理员的小提醒
如果你是网站维护者，建议定期用在线工具扫描站点，比如 Why No Padlock 或 Google Search Console 的安全报告，它们能帮你快速定位哪些页面还残留着 HTTP 资源。别让一个小图片毁了整站的信任标识。
现在很多人习惯看地址栏有没有小锁才敢输入密码，混合内容看似小事，实际影响的是用户对你网站的信任。花几分钟检查一下，比事后处理安全事件划算多了。