本文介绍下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