下午反馈的一个问题
一直在 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页面片段中加了下面。就解决了。
<meta http-equiv="Content-Security-Policy" content="script-src xxx.xxx.com dev.xxx.xxx.com:10100 'unsafe-inline' 'unsafe-eval'; object-src 'none'; style-src xxx.xxx.com dev.xxx.xxx.com:10100 'unsafe-inline'; child-src https:">
然后这个插件就在这个站点下就不能用了。同样都是插件建议向印象笔记学习。人家就没有干扰到别人的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
