TL;DR

浏览器插件 Stylus 中的 “启用CSP补丁以使样式资源生效” 导致某些网页的 CSP 策略异常

在某天忽然发现浏览器无法加载知乎的样式文件，打开network ，发现浏览器显示 “阻止：CSP”，然后看了一下 document header 中的 CSP 字段，发现最终浏览器解析的 CSP 是这样的：

default-src * blob:;
 img-src * data: blob: resource:; connect-src * wss: blob: resource:;
 
  frame-src 'self' *.zhihu.com mailto: tel: weixin: *.vzuu.com mo.m.taobao.com getpocket.com note.youdao.com safari-extension://com.evernote.safari.clipper-Q79WDW8YH9 zhihujs: captcha.guard.qcloud.com pos.baidu.com dup.baidustatic.com openapi.baidu.com wappass.baidu.com passport.baidu.com *.cme.qcloud.com vs-cdn.tencent-cloud.com t.captcha.qq.com c.dun.163.com; 
  
  script-src 'self' blob: *.zhihu.com g.alicdn.com qzonestyle.gtimg.cn res.wx.qq.com open.mobile.qq.com 'unsafe-eval' unpkg.zhimg.com unicom.zhimg.com resource: captcha.gtimg.com captcha.guard.qcloud.com pagead2.googlesyndication.com cpro.baidustatic.com pos.baidu.com dup.baidustatic.com i.hao61.net 'nonce-8e9013a5-40dc-4883-82cb-54d4429d538c' hm.baidu.com zz.bdstatic.com b.bdstatic.com imgcache.qq.com vs-cdn.tencent-cloud.com ssl.captcha.qq.com t.captcha.qq.com cstaticdun.126.net c.dun.163.com ac.dun.163.com/ acstatic-dun.126.net; 
  
  style-src 'self' 'unsafe-inline' resource:; 
  
  font-src * blob: data:

可见 style-src 明显少了一部分，而正常的请求加载的时候是这样的：


  default-src * blob:; 
  
  img-src * data: blob: resource: t.captcha.qq.com cstaticdun.126.net necaptcha.nosdn.127.net; 
  
  connect-src * wss: blob: resource:; 
  
  frame-src 'self' *.zhihu.com mailto: tel: weixin: *.vzuu.com mo.m.taobao.com getpocket.com note.youdao.com safari-extension://com.evernote.safari.clipper-Q79WDW8YH9 zhihujs: captcha.guard.qcloud.com pos.baidu.com dup.baidustatic.com openapi.baidu.com wappass.baidu.com passport.baidu.com *.cme.qcloud.com vs-cdn.tencent-cloud.com t.captcha.qq.com c.dun.163.com; 
  
  script-src 'self' blob: *.zhihu.com g.alicdn.com qzonestyle.gtimg.cn res.wx.qq.com open.mobile.qq.com 'unsafe-eval' unpkg.zhimg.com unicom.zhimg.com resource: captcha.gtimg.com captcha.guard.qcloud.com pagead2.googlesyndication.com cpro.baidustatic.com pos.baidu.com dup.baidustatic.com i.hao61.net 'nonce-26af957b-a1a9-4604-a12e-05408d6b5f02' hm.baidu.com zz.bdstatic.com b.bdstatic.com imgcache.qq.com vs-cdn.tencent-cloud.com ssl.captcha.qq.com t.captcha.qq.com cstaticdun.126.net c.dun.163.com ac.dun.163.com/ acstatic-dun.126.net; 
  
  style-src 'self' 'unsafe-inline' *.zhihu.com unicom.zhimg.com resource: captcha.gtimg.com ssl.captcha.qq.com t.captcha.qq.com cstaticdun.126.net c.dun.163.com ac.dun.163.com/ acstatic-dun.126.net

用 charles 抓包看了一下，发现包里面的header 是正常的，于是就可以定位到问题出在浏览器本身了。

然后依次禁用插件查看，直到找到出了问题的插件：stylus。然后仔细回想一下，想起来可能是因为开启了这个 “启用CSP补丁以使样式资源生效” 的选项，于是关闭这个选项，果然恢复正常