lisonge/vite-plugin-monkey

how to disable Content Security Policy (CSP) include http-csp and html-csp

lisonge opened this issue · 23 comments

Now just use browser extension Disable-CSP

  • disable http header csp
  • disable html meta csp

updated to 2023-07-20 20:48


    Refused to load the script 'http://127.0.0.1:3000/@vite/client' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self' data: 'unsafe-inline' https://checkout.stripe.com/checkout.js https://checkout.stripe.com https://js.stripe.com/v3 https://platform.twitter.com/widgets.js https://static.npmjs.com/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

(匿名) @ userscript.html?name=dev%253Avite-userscript-template.user.js&id=289d436b-2813-44f5-b751-16c871c6e093:105
10:25:04.643 userscript.html?name=dev%253Avite-userscript-template.user.js&id=289d436b-2813-44f5-b751-16c871c6e093:105 
        
       Refused to load the script 'http://127.0.0.1:3000/src/main.ts' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self' data: 'unsafe-inline' https://checkout.stripe.com/checkout.js https://checkout.stripe.com https://js.stripe.com/v3 https://platform.twitter.com/widgets.js https://static.npmjs.com/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36 Edg/101.0.1210.39

solution

extension://iikmkjmpaadaobahmlepeloendndfphd/options.html#nav=settings

image

English

image

csp

solution

extension://iikmkjmpaadaobahmlepeloendndfphd/options.html#nav=settings

image

油猴中的CSP全部移除或者Chrome插件Disable Content-Security-Policy似乎无法应对写在DOM meta标签中的CSP
请问对于meta标签中的CSP有解决办法吗?
大致标签代码是
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

@DreamNya
你好,具体是哪个网站呢

image
确实有这个问题,我先看看

@DreamNya 你好,具体是哪个网站呢

emm 是公司内网OA系统,我在本地新建了一个html文件复现也报错CSP了

浏览器扩展是不能修改回复体的,只能修改回复头

firefox 的 security.csp.enable 貌似已经被弃用了

我试图寻找 chrome 启动参数来 禁用 csp,但是没有找到

目前我发现可行的办法就是 使用 https://wproxy.org/whistle/ 来通过中间人攻击修改 html

还有一种轻量级的办法:如果你要注入的网页允许 *.xx.com 这样的域名,那么你可以设置 viteConfig.server.host=localhost.xx.com 并且更改本地 hosts 文件 127.0.0.1 localhost.xx.com

浏览器扩展是不能修改回复体的,只能修改回复头

firefox 的 security.csp.enable 貌似已经被弃用了

我试图寻找 chrome 启动参数来 禁用 csp,但是没有找到

目前我发现可行的办法就是 使用 https://wproxy.org/whistle/ 来通过中间人攻击修改 html

还有一种轻量级的办法:如果你要注入的网页允许 *.xx.com 这样的域名,那么你可以设置 viteConfig.server.host=localhost.xx.com 并且更改本地 hosts 文件 127.0.0.1 localhost.xx.com

好的 谢谢大佬

如果你要注入的网站是 https 的,你可能需要自签发证书工具,我推荐 https://github.com/FiloSottile/mkcert

@DreamNya hello,我找到一种利用 chrome-remote-interface 的方式来修改 response.body 禁用 html csp

并且这个方法无需中间人攻击

以 chrome 和 https://i.songe.li/csp 为例子,请确保你的 chrome 安装了 tampermonkey 扩展

首先我们要启动 chrome 并启用它的远程调试功能,设置调试端口为 9222

chrome --remote-debugging-port=9222

接下来我们 clone 并启动 let-html-csp-fail

git clone https://github.com/lisonge/let-html-csp-fail.git
cd let-html-csp-fail
pnpm install
pnpm start

它会自动打开 https://i.songe.li/csp 并拦删除 response.body 中的
<meta http-equiv="Content-Security-Policy" content="script-src 'self'"/>

接下来我们启动一个示例看是否生效

git clone https://github.com/lisonge/vite-plugin-monkey.git
cd vite-plugin-monkey
pnpm install
pnpm -F example run serve

如果 chrome 不是你的默认浏览器,你需要复制输出的链接 http://127.0.0.1:5173/ 到刚刚 chrome 新建标签页打开
这会触发 tampermonkey 的脚本安装,点击安装,然后刷新之前的 https://i.songe.li/csp 即可

成功示例
image

远程调试的方法测试有效 感谢大佬

如果你要注入的网页允许 *.xx.com 这样的域名,那么你可以设置 viteConfig.server.host=localhost.xx.com 并且更改本地 hosts 文件 127.0.0.1 localhost.xx.com 没有看懂这句话是在哪里设置呢,是在vite.config.js里面写吗?我发现github有csp策略。
image

这样写好像也是不对的

如果你要注入的网页允许 *.xx.com 这样的域名,那么你可以设置 viteConfig.server.host=localhost.xx.com 并且更改本地 hosts 文件 127.0.0.1 localhost.xx.com 没有看懂这句话是在哪里设置呢,是在vite.config.js里面写吗?我发现github有csp策略。 image

这样写好像也是不对的

又理解了大概意识是改本地的host文件但是感觉还是复杂,同时打包发到网上别人用是不是也有这个问题。
后来感觉应该grant设置为node应该我不用沙盒环境感觉就可以了,但是还是不行

@duoluodexiaoxiaoyuan

没有看懂这句话是在哪里设置呢,是在vite.config.js里面写吗?

https://cn.vitejs.dev/config/server-options.html#server-host

又理解了大概意识是改本地的host文件但是感觉还是复杂

github 是 http header csp,修改响应头即可绕过,#1 (comment)

@duoluodexiaoxiaoyuan

没有看懂这句话是在哪里设置呢,是在vite.config.js里面写吗?

https://cn.vitejs.dev/config/server-options.html#server-host

又理解了大概意识是改本地的host文件但是感觉还是复杂

github 是 http header csp,修改响应头即可绕过,#1 (comment)
感谢回复,在油猴插件关闭csp策略确实可以了,但是我好奇是哪里触发的csp策略呢。

我直接用原生的js脚本写的时候好像插入元素也没有触发,控制台并没有报错

image

@duoluodexiaoxiaoyuan

但是我好奇是哪里触发的csp策略呢。

vite serve 下会插入脚本 document.head.insertBefore(entryScript, document.head.firstChild)

这个脚本不属于当前源,会触发 csp

;(({ entrySrc = `` }) => {
  window.GM;
  const key = `__monkeyWindow-` + new URL(entrySrc).origin;
  document[key] = window;
  console.log(`[vite-plugin-monkey] mount monkeyWindow to document`);
  const entryScript = document.createElement("script");
  entryScript.type = "module";
  entryScript.src = entrySrc;
  document.head.insertBefore(entryScript, document.head.firstChild);
  console.log(`[vite-plugin-monkey] mount entry module to document.head`);
})(...[
  {
    "entrySrc": "http://127.0.0.1:5173/__vite-plugin-monkey.entry.js"
  }
]);

@duoluodexiaoxiaoyuan

但是我好奇是哪里触发的csp策略呢。

vite serve 下会插入脚本 document.head.insertBefore(entryScript, document.head.firstChild)

这个脚本不属于当前源,会触发 csp

;(({ entrySrc = `` }) => {
  window.GM;
  const key = `__monkeyWindow-` + new URL(entrySrc).origin;
  document[key] = window;
  console.log(`[vite-plugin-monkey] mount monkeyWindow to document`);
  const entryScript = document.createElement("script");
  entryScript.type = "module";
  entryScript.src = entrySrc;
  document.head.insertBefore(entryScript, document.head.firstChild);
  console.log(`[vite-plugin-monkey] mount entry module to document.head`);
})(...[
  {
    "entrySrc": "http://127.0.0.1:5173/__vite-plugin-monkey.entry.js"
  }
]);

懂了感谢大佬,这样其实打包以后也不会触发csp策略了

Disable-CSP

  • disable http header csp
  • disable html meta csp

image
大佬,在线编写的时候为啥用不了油猴的自带函数了呀,提示未定义,但是我看这个函数已经添加到脚本头部中了呀,而且我还发现打开谷歌搜索的首页脚本还识别不到,不会启动脚本,我重新安装框架之后使用默认内容打开浏览器还是这样

image 大佬,在线编写的时候为啥用不了油猴的自带函数了呀,提示未定义,但是我看这个函数已经添加到脚本头部中了呀

看下这个issue: #35

image 大佬,在线编写的时候为啥用不了油猴的自带函数了呀,提示未定义,但是我看这个函数已经添加到脚本头部中了呀

看下这个issue: #35

问题解决了,感谢