Angular：inlineCritical 优化设置为 false 不会删除内联样式（严格的 CSP 所需）

Question

我正在开发一个 Angular 14 项目，我需要遵守严格的内容安全策略 (CSP)，其中包括指令“style-src 'self'”。这意味着我的应用程序中不能有任何内联样式。

如何完全删除内联样式以确保我可以在 CSP 中使用样式 src 'self'？是否需要任何额外的配置或解决方法来防止 Angular 内联样式？

我无法在这里使用 ngCspNonce，因为 Angular 版本 14 不支持它。

我尝试在构建配置下的 angular.json 文件中将“inlineCritical”选项设置为“false”，希望它能够删除内联样式。

       "build": {
          "configurations": {
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                }
              },
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
           }
        }

控制台错误

Answer 1

首先要知道的是 style-src 指令包括 style-src-elem 和 style-src-attr。 这很重要，因为将 inline-ritic 设置为 false 仅对 style-src-elem 有帮助，因为它会阻止 Angular 使用内联 css 创建 style element 来加速样式加载。

祝您在处理 style-src-attr 方面好运：您必须找到 NgStyle 指令的每种用法的替代方案，绑定到 style 属性和静态 style 属性。 该解决方案可能涉及 NgClass 指令。 哦，希望没有第三方组件使用内联样式。

最简单的事情是为 style-src-attr 添加新指令：

style-src-attr 'self' 'unsafe-inline'