乐趣区

关于前端:Mixed-content总结

jiezi

本文介绍下 Mixed content，次要内容如下：

  1. 主题起源；
  2. 什么是 mixed content；
    2.1 mixed content 分类；
    2.2 浏览器策略；
  3. 如何自查是否有 mixed content；
  4. 开发时如何尽量避免 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 等。

浏览器策略

  1. 对于 Mixed active content，浏览器不会加载；
  2. 对于 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 的办法，次要是从资源的角度思考：

  1. 资源部署 http 和 https 两个版本；

  2. 加载资源的时候辨别 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/..."。

总结

心愿大家能有所播种，如有谬误，欢送留言探讨。

参考资料

  1. No More Mixed Messages About HTTPS
  2. What is mixed content?
  3. MDN mixed content
退出移动版