1. 发现问题

最近用火狐上博客时,发现一个问题,加载博客页面总是出现菊花一直在转,左下角一直在等待sp0.baidu.com:

导致后面的js无法加载。看了一下 network 发现是获取一个 s.gif 的时候出现问题:

具体的url:

而这个问题只在火狐上出现,其它浏览器正常,比如chrome浏览器正常加载:

同时在火狐上报了一个错:

在之前优化HTTPS的时候,我设置了X-Content-Type-Options为nosniff

2. s.gif 文件

从请求上看,这个请求来自push.js。而push.js是百度自动推送的js代码:

那就是说,百度自动推送的js代码里用 Get请求 请求s.gif文件,而X-Content-Type-Options为nosniff;导致被阻塞,一直加载不过去。确实,即使超时,后面的内容加载出来了,s.gif这里也是一直加载不出来的。并不是很清楚这个s.gif这推送中的作用。

3. 关于X-Content-Type-Options

httpsecurityreport 的建议是将X-Content-Type-Options设置为nosniff,这是最好的做法。

关于X-Content-Type-Options的介绍:X-Content-Type-Options;这里有一个NOTE:

Only “script” and “style” are considered as any exploits pertain to those types. Also, considering “image” was not compatible with deployed content.

只有 “script” 和 “style” 类型才考虑这些类型的利用。当然,”image” 类型与部署的内容是不兼容的。

其实这句话看得不是很懂,这里有一个表格:ContentTypeOptions,从这个表格可以看出,image类型支持的有:html中的<img src>;favicon图标;SVG的<image>;CSS中的一些样式等。

而我们出问题的这段百度自动推送js是Get请求一个 image/gif 图片,这个或许是不支持的

Github上确实有这么一个讨论: https://github.com/whatwg/fetch/issues/395;提到了Firefox支持images类型的nosniff属性,而Chrome是不支持的。这就解释得通为什么Chrome正常了,不同浏览器对这个属性的支持目前似乎还不一样。但是这还是属于比较新的 issue,几个月之前提的,未来Chrome和Firefox会不会统一做法,或者标准会不会改变还不知道。不过大概的原因我们是定位到了。

4. 解决

把百度自动推送不支持这个属性的代码下了吧。

下了之后网站加载就正常了。