【轻知识】CSP：禁止chrome第三方扩展注入js文件

下午反馈的一个问题

一直在 loading

image.png

找问题

然而我这边都是好的。然后加了反馈者的QQ远程看了下。

控制台报错。

image.png

继而我看了下js文件加载跟我的电脑有什么不同。发现多了两个文件jquery.js、entry.js

image.png

复制出来了链接一看https://astyle-src.alicdn.com/app/searchweb/products/zhaohuoshenqi/lib/jquery.js。我在想怎么会有这破玩意儿呢？然后看到对方浏览器右上角有个货。我禁用这个扩展之后就没问题了。

于是定位到是这个扩展的问题。我也在我本地装了这个扩展，方便问题的复现。

这个插件是怎么做的呢？我百度了下找货神器 淘货源。在论坛上找到这个插件的文件。把crx后缀改成zip后缀。解压之后。看了下js。很简单粗暴。但是主要逻辑都是点击上面插件之后嵌入的iframe以及相关js跟css文件。

image.png

解决问题

一开始我在想，怎么禁止对方appendChild script到body里。一顿狂搜。试了试。发现方式不对。

然后，想看报错。初步判断是jquery冲突。在想总不能把我这边所有jquery都重命名吧。

解决方式，还是落在了如何禁止第三方js跟css引入到我的页面。然后搜到了`CSP。在公共的html页面片段中加了下面。就解决了。

然后这个插件就在这个站点下就不能用了。同样都是插件建议向印象笔记学习。人家就没有干扰到别人的js。另外我配的csp也不会干扰到印象笔记的使用。

image.png

参考资料：

• 《Content Security Policy 入门教程》http://www.ruanyifeng.com/blog/2016/09/csp.html
• 《前端安全配置之Content-Security-Policy(csp) 》https://www.cnblogs.com/heyuqing/p/6215761.html