Mixed content总结

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