Angular构建未生成style.js触发CSP错误，是否需显式配置CSP头？

环境信息 #

• Node版本：v14.17.4
• npm版本：v6.14.14
• 核心依赖版本：

{
  "@angular/cdk": "^13.2.2",
  "@angular/common": "~13.1.0",
  "@angular/compiler": "~13.1.0",
  "@angular/core": "~13.1.0",
  "@angular/forms": "~13.1.0",
  "@angular/platform-browser": "~13.1.0",
  "@angular/platform-browser-dynamic": "~13.1.0",
  "@angular/router": "~13.1.0",
  "@angular-builders/custom-webpack": "13.0.0",
  "@angular-builders/dev-server": "^7.3.1",
  "@angular-devkit/build-angular": "~13.1.0",
  "@angular/cli": "13.0.4",
  "@angular/compiler-cli": "~13.1.0",
  "@angular/language-service": "~13.1.0"
}

问题描述 #

执行ng build后生成dist文件夹，但未生成style.js（Angular v8中此功能正常）。现在出现CSP错误：

Refused to load the script 'script-uri' because it violates the following Content Security Policy directive: "style-src 'unsafe-inline'."

该错误导致styles.css无法加载，请问是否需要显式添加CSP头？

解决方案说明 #

1. style.js消失的原因 #

Angular 13对样式打包机制做了调整，默认不再生成单独的style.js。全局样式会被打包到main.js中；如果在angular.json中配置了extractCss: true，则会生成单独的styles.css文件，并通过<link>标签引入到index.html——这是版本升级后的正常变化，并非异常。

2. CSP错误分析与处理 #

你遇到的错误存在逻辑矛盾（拒绝加载脚本却提示违反style-src指令），大概率是当前CSP配置不全或与Angular的样式注入方式冲突：

• 先检查dist目录下是否存在styles.css，以及index.html中是否正确引入该文件。
• 确认当前环境的CSP配置：如果样式是内联注入，style-src需保留'unsafe-inline'；如果有必要的脚本需要加载，script-src需补充对应的源、哈希值，或临时添加'unsafe-inline'/'unsafe-eval'（生产环境建议用哈希替代）。

3. 是否需要显式添加CSP头？ #

是的。如果你的服务器、CDN等环境没有默认配置符合Angular 13需求的CSP，必须显式添加。以下是适配Angular 13的基础CSP配置示例（可根据实际场景调整）：

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  font-src 'self';

生产环境优化建议：执行ng build --prod后，查看index.html中生成的脚本和样式哈希值，将哈希值替换CSP中的'unsafe-inline'，进一步提升安全性。

额外排查点 #

• 检查angular.json中build.options.extractCss的配置，确认是否开启了样式提取。
• 排查自定义webpack配置（因使用了@angular-builders/custom-webpack）是否影响了样式打包流程。

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