如何在CSP的connect-src指令中使用nonce或sha校验API请求合法性

CSP规范明确规定，nonce仅对script-src、style-src两个指令生效，设计初衷是验证页面内嵌脚本、样式的合法性，不存在用nonce校验外联请求目标地址的逻辑，所以你在connect-src中添加的nonce字段会被浏览器直接忽略，不可能实现跳过地址校验的效果。你当前遇到的报错正是这个原因导致的。

方案1：添加域名到允许列表（最推荐） #

这是符合CSP设计规范的标准实现，安全风险最低。直接将你需要请求的域名加到connect-src的允许列表即可：

connect-src 'self' data: https://你的目标域名 wss://你的目标域名; script-src 'self' 'nonce-the_nonce';

原生JS请求示例（无需额外配置，只要域名在允许列表即可正常发起）：

<script nonce="the_nonce">
  fetch(`https://你的目标域名`,{method:'GET'}).then(res=>{
    console.log(res.status);
  },err=>{
    console.log(err);
  });
</script>

方案2：后端代理转发（适合请求域名不固定的场景） #

如果你的请求目标地址是动态生成的、无法提前穷举到允许列表，可以通过同域后端做代理转发：前端所有请求先发给同域后端接口，由后端转发到实际目标地址再返回结果。这种场景下connect-src只需保留'self'即可，不需要添加额外外部域名。

Angular开发环境代理配置示例 #

在项目根目录新增proxy.conf.json文件：

{
  "/api": {
    "target": "https://实际目标域名",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

修改angular.json中serve配置，添加proxyConfig字段：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.conf.json"
  }
}

前端请求直接写同域路径即可：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {
  this.http.get('/api/具体请求路径').subscribe(res => {
    console.log(res);
  });
}

生产环境可以通过Nginx反向代理实现相同效果。

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