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/..."。

希望大家能有所收获，如有错误，欢迎留言讨论。