Angular样式经angular.json引入遭CSP script-src拦截的安全方案咨询

为什么CSS的<link>标签会被script-src策略拦截？ #

你看到的<link>标签里的onload="this.media='all'"属于内联事件处理器，本质是嵌入式JavaScript代码，会触发CSP的script-src规则检查。CSP的script-src指令不仅管控<script>标签的加载与执行，还会拦截所有内联脚本执行行为——包括HTML元素的on*事件属性、javascript:伪协议等。哪怕是挂载在CSS加载标签上的内联事件，只要涉及脚本执行，就会被script-src策略约束。

安全解决方案（无需unsafe-inline） #

方案1：关闭Angular的样式加载优化（最简便） #

Angular默认会给样式link标签添加media属性和onload事件来实现懒加载优化，直接关闭该优化即可避免生成内联事件：

1. 打开项目根目录的angular.json
2. 找到对应项目的build配置节点，添加optimization配置：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 其他配置...
    "optimization": {
      "styles": {
        "inlineCritical": false,
        "media": false
      }
    }
  }
}

重新构建后，生成的<link>标签会变成标准格式，不再带有onload事件，自然不会触发CSP拦截。

方案2：使用Nonce（随机数）方案（保留优化的前提下） #

如果需要保留样式加载的性能优化，可通过Nonce机制放行内联事件：

1. 服务器端生成Nonce：每次HTTP请求生成一个加密安全的随机Nonce（例如Node.js中用crypto.randomBytes(16).toString('base64')生成）
2. 更新CSP头：在content-security-policy中添加Nonce标识：

content-security-policy: object-src 'none'; script-src 'self' 'nonce-你的随机Nonce值'; style-src 'self'

3. 修改Angular构建配置：通过自定义Webpack配置，让Angular生成的<link>标签的onload事件关联该Nonce（需确保构建时能注入服务器生成的Nonce值）。

方案3：unsafe-hashes配合哈希值（兼容性有限） #

计算onload="this.media='all'"代码的哈希值（例如SHA-256），然后在CSP中添加unsafe-hashes和对应哈希：

1. 计算哈希：将this.media='all'作为内容，生成SHA-256哈希（可通过在线工具或命令行生成）
2. 更新CSP头：

content-security-policy: object-src 'none'; script-src 'self' 'unsafe-hashes' 'sha256-生成的哈希值'; style-src 'self'

注意：unsafe-hashes的浏览器兼容性不如Nonce，且如果Angular后续更新修改了onload的代码逻辑，哈希值会失效，维护成本较高。

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