Twitter站点油猴脚本使用fetch调用外部API的CSP问题咨询

解决方案 #

你遇到的是页面CSP对页面上下文发起的外部请求的限制，不需要全局关闭CSP即可绕过，可用方案如下： #

1. 优先使用Tampermonkey自带的GM_xmlhttpRequest发起请求

该API是油猴在扩展层面实现的网络请求能力，完全不受页面本身的CSP、CORS规则限制，是这类需求的最优解，适配Firefox运行环境。
使用时首先需要在脚本头部声明权限：
// @grant GM_xmlhttpRequest
请求示例代码：

GM_xmlhttpRequest({
  url: "https://httpbin.org/post",
  method: "POST",
  data: JSON.stringify({}),
  headers: {
    "Content-Type": "application/json"
  },
  onload: function(response) {
    // 处理成功响应
    console.log(response.responseText)
  },
  onerror: function(error) {
    // 处理异常情况
    console.log(error)
  }
})

你之前直接调用的fetch是运行在推特页面上下文，所以必须遵守页面的CSP规则，而GM_xmlhttpRequest运行在油猴扩展的独立上下文，网络请求由扩展代理发起，不会触发CSP限制。 #

2. 单站点禁用CSP

如果不想修改脚本逻辑，可以使用支持按站点配置CSP规则的Firefox扩展，仅对twitter.com关闭CSP校验，其余站点的CSP安全防护不受影响，比全局关闭security.csp.enable的风险低很多。

内容的提问来源于stack exchange，提问作者user2739975