Angular设置Content-Security-Policy头后Bootstrap样式失效如何解决？

问题根因 #

你遇到的样式损坏是Angular默认渲染机制导致的：Angular默认会将组件样式编译为内联<style>标签插入到页面head中，你当前配置的CSP规则style-src 'self'仅允许加载同域下的外部样式文件，拦截了所有内联样式，因此页面样式失效。

额外提示：不推荐用meta标签配置CSP，建议改成服务端返回的HTTP响应头，兼容性更好，且支持所有CSP指令。

不需要加'unsafe-inline'，以下是更安全的可落地方案：

方案1：使用nonce（推荐，适合有服务端的项目） #

nonce是每次请求生成的随机不可预测字符串，是当前CSP规范中最推荐的替代unsafe-inline的方案：

1. 服务端处理每个页面请求时，生成一个长度足够的随机nonce值
2. 将该nonce添加到CSP规则中：default-src 'self';style-src 'self' 'nonce-${你生成的随机nonce}'
3. 在index.html的根组件标签上添加ngCspNonce属性，注入服务端生成的nonce：<app-root ngCspNonce="${服务端注入的nonce值}"></app-root>
4. 配置完成后Angular会自动给所有生成的内联style标签添加对应的nonce属性，即可通过CSP校验。

方案2：使用样式哈希（适合纯静态部署项目） #

如果你的项目是纯静态构建、没有服务端动态渲染能力，可以用哈希校验的方式：

1. 先本地构建一次项目，打开控制台找到CSP拦截提示里给出的内联样式哈希值，格式类似sha256-xxxxxxx=
2. 将所有拦截提示里的哈希值添加到CSP的style-src规则中：default-src 'self';style-src 'self' 'sha256-xxxx1=' 'sha256-xxxx2='
3. 注意每次修改样式后，哈希值会变化，需要同步更新CSP规则。

方案3：全量抽取样式为外部文件（适合中小项目） #

你可以关闭Angular的内联样式注入逻辑，将所有样式打包为单独的外部css文件，完全适配style-src 'self'规则：

1. 打开项目根目录的angular.json文件，找到projects.[你的项目名].architect.build.configurations.production配置节点
2. 添加/修改配置：

{
  "optimization": {
    "styles": {
      "inlineCritical": false
    }
  },
  "extractCss": true
}

3. 重新构建项目后，所有样式都会生成独立的.css文件，通过<link>标签引入，不需要额外修改CSP规则。

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