共计 1962 个字符，预计需要花费 5 分钟才能阅读完成。
本文介绍下 Mixed content，次要内容如下：
- 主题起源；
- 什么是 mixed content；
2.1 mixed content 分类；
2.2 浏览器策略； - 如何自查是否有 mixed content；
- 开发时如何尽量避免 mixed content。
主题起源
原先并不知道前端还有 mixed content 这个词，最近开发我的项目的时候，测试环境没有问题，公布到线上的时候发现页面没有问题，然而控制台有告警信息。于是，抽了个工夫钻研了下，而后就发现了 mixed content 这个词。具体告警信息如下：
Mixed Content: The page at ‘<URL>’ was loaded over HTTPS, but requested an insecure element ‘<URL>’. This request was automatically upgraded to HTTPS, For more information see <URL>
点击报错箭头，能够看到更具体的信息：
Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure element ‘http://…’ . This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/201…
而后依据告警信息通过一些材料查找，找到了问题所在，并输入老本篇文章。
这里不得不感叹一下，chrome 的谬误提醒做的挺好的，看完报错信息，根本就晓得是啥问题了。
什么是 mixed content
当 初始 HTML 页面 是通过 https 申请的时候，如果该页面申请的其余资源，比方图片，脚本资源等，是通过 http 申请的，那么这个页面就是一个 mixed content 的页面。
这里，强调 初始 HTML 页面 ，而不是HTML 页面 的起因是，页面外面通过 iframe 也是能够内嵌 html 页面的。通过 iframe 内嵌的 html 页面不属于 初始 HTML 页面。
为什么会衍生进去这个词呢？是因为这样的页面是不平安的，是须要开发人员去躲避的一个事件，所以把这种页面独自命名进去，引起开发人员器重。
Mixed content 分类
Mixed content 分为两类：mixed passive content 和 mixed active content。个人感觉这两类应该是依照受攻打的影响水平来辨别的。passive 的影响要小一些儿，active 的影响要大一些儿。
Mixed passive content 次要包含图片、视频、音频资源等；Mixed active content 次要包含脚本、样式表、iframe 等。
浏览器策略
- 对于 Mixed active content，浏览器不会加载；
- 对于 Mixed passive content，浏览器可能不会加载；也可能会主动把资源的协定降级到 https，而后加载，如果 https 资源加载失败，资源就显示不进去。
对于 Mixed passive content，浏览器的最终目标还是和解决 Mixed active content 一样，不会加载。只不过会有一个过渡期，所以如果页面中存在 mixed passive content，还是尽快降级的好，万一哪天浏览器不反对了，页面上的该局部内容就显示不进去了。
如何自查是否有 mixed content
拿 chrome 浏览器举例，如果页面中存在 mixed content，chrome 会在开发者工具的 console 面板中 log 进去。报错信息和在后面 主题起源 中的差不多，包含 报错起因 、 报错资源 、 解决形式（不加载还是主动降级）以及 其余的帮忙信息。
开发时如何尽量避免 mixed content
这里总结了下防止 mixed content 的办法，次要是从资源的角度思考：
- 资源部署 http 和 https 两个版本；
加载资源的时候辨别 http 和 https 环境：
- 在脚本外面能够通过 window.location.protocol 判断以后环境，而后去做不同的解决；
- 通过 script 加载资源的时候，src 属性能够把协定去掉，间接以 ’//’ 结尾。比方
src="https://www.baidu.com/..."能够间接换为src="//www.baidu.com/..."，这样当该脚本是在 http 网站被加载的时候，加载的就是"http://www.baidu.com/..."，在 https 网站被加载的时候，加载的就是"https://www.baidu.com/..."。
总结
心愿大家能有所播种，如有谬误，欢送留言探讨。
参考资料
- No More Mixed Messages About HTTPS
- What is mixed content?
- MDN mixed content
