开发人员工具：一个禁用 Content Security Policy (CSP) 浏览器扩展

[lisongeee]

开源地址

https://github.com/lisonge/Disable-CSP

使用场景

CSP 会阻止我们向目标网站注入 外部源 的脚本

比如由于 CSP 限制，你无法在 github.com 控制台使用 document.head.append 添加一个外部源的脚本

或者使用 vite-plugin-monkey 开发油猴脚本时，假设你的目标网站是 github.com ，由于 github 的 CSP 策略，脚本也无法注入。

此时我们需要一个禁用 CSP 的扩展

相比其它禁用 CSP 插件的优点

CSP 有两种，一种是 HTTP Header CSP ，另一种是 HTML Meta CSP

浏览器扩展的 网络拦截 Api 只能修改 HTTP Response Header ，无法修改 Response Body

所以目前插件市场上的 CSP 禁用扩展基本上都是只能 Diable HTTP Header CSP

这个扩展使用 chrome 的 debugger 接口连接 devtools 工具来实现 拦截修改 Response Body 达到修改 HTML Meta CSP 的目的

安装

• releases
• chrome webstore

撅得好用的可以给个 star

[SimonOne]

你好，关于 github 的 CSP ，我想问个情况。
我安装了一个其他的禁用插件，就是为了在 github 时可以用 Google 翻译插件（不是 Chrome 自带的翻译，是一个商店插件，因为我用的 Vivaldi 自带的翻译很垃圾，想用谷歌网页翻译只能安装这个插件），它会插入外部脚本，github 的 CSP 会导致不能插入外部脚本。
结果有段时间能禁掉 github 的，过段时间又不行（在控制台能看到插入脚本失败提示是 CSP 的原因），是网站自身可以反制插件禁用 CSP 吗？

[lisongeee]

@SimonOne 你说的这个问题我曾经也遇到过，某些禁用 CSP 的扩展 时灵时不灵的，我不知道它们的源码，所以我也不知道咋回事

但是据我所知，网站应该是没有 《反制插件禁用 CSP 》这个功能接口的

[codehz]

@lisongeee
@SimonOne
可能是缓存的原因，有时候从磁盘加载的会不进过扩展处理（
此外还有 service worker ，不过这个 github 没有使用

[Masoud2023]

如果你是要本地开发油猴脚本并且注入油猴脚本，为什么不用暴力猴自带的方法去做这个事情？

https://violentmonkey.github.io/posts/how-to-edit-scripts-with-your-favorite-editor/

为什么偏要想着打破 CSP ？

[lisongeee]

@Masoud2023

因为这种方法没有 Hot Module Replacement


你说的这种方法在代码更改的过程中页面状态被重置，开发体验极差