Angular 16中正确使用CSP：解决样式内联导致的CSP报错问题

一、阻止angular.json中配置的全局样式内联 #

在angular.json的项目构建配置里，开启extractCss并关闭关键CSS内联，确保全局样式被提取为独立文件：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "options": {
          // 保留原有其他配置
          "extractCss": true,
          "optimization": {
            "styles": {
              "inlineCritical": false
            }
          }
        }
      }
    }
  }
}

配置后，styles数组中的src/styles.scss会被编译为独立的styles.[hash].css文件，通过link标签引入index.html，而非内联。

二、阻止index.html中外部link标签被内联 #

针对index.html中的外部CDN样式（如Google字体），有两种可靠方式：

方式1：通过angular.json配置引入并禁止注入 #

将外部样式URL添加到styles数组，设置inject: false，避免Angular自动内联：

"styles": [
  "src/styles.scss",
  {
    "input": "//fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap",
    "inject": false
  }
]

然后在index.html中手动保留原link标签即可，Angular构建时不会再内联该资源。

方式2：修改构建优化配置 #

如果不想调整styles数组，可直接关闭样式的内联优化，同时保留压缩：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "options": {
          "optimization": {
            "styles": {
              "inlineCritical": false,
              "minify": true
            }
          }
        }
      }
    }
  }
}

三、CSP配置补充 #

确保你的CSP规则中包含以下内容，允许加载外部样式和提取后的本地样式：

Content-Security-Policy: 
  style-src 'self' 'nonce-你的nonce值' fonts.googleapis.com;
  font-src fonts.gstatic.com;

注：本地提取的样式文件来自self源，无需额外nonce；外部CDN样式需将对应域名加入style-src。

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