Angular构建后index.html出现内联<style>如何避免以符合CSP规范

Angular 12及以上版本默认开启关键CSS内联优化特性，构建时会自动提取首屏所需的关键样式内嵌到index.html的<style>标签中，这就是你遇到内联样式不符合CSP要求的原因。

你可以通过修改angular.json配置关闭该特性，具体操作如下：

• 找到项目angular.json文件中对应项目的projects.你的项目名.architect.build.options.optimization配置节点
• 如果当前optimization为布尔值true，需改为对象结构，关闭样式和字体的内联逻辑，配置示例如下：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "options": {
            "optimization": {
              "scripts": true,
              "styles": {
                "minify": true,
                "inlineCritical": false
              },
              "fonts": {
                "inline": false
              }
            },
            // 保留你原有其他配置，比如styles数组等
            "styles": [
              "src/styles/fonts.scss",
              "src/styles.css",
              "src/styles/app.scss",
              "./node_modules/font-awesome/css/font-awesome.css"
            ]
          }
        }
      }
    }
  }
}

• 配置修改完成后，执行生产构建命令验证效果：
  ng build --configuration production

构建完成后查看dist目录下的index.html，已无自动插入的内联<style>标签，所有样式均通过外部css文件引入，无需配置CSP的style-src 'unsafe-inline'规则。

注意事项 #

• 开发环境ng serve默认不开启该优化特性，必须使用生产构建命令验证修改效果
• 若你仍需要保留关键CSS内联优化，可通过给CSP配置对应样式的哈希值（sha256/sha384/sha512）实现合规，无需使用unsafe-inline规则

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