为什么 CSP script-src unsafe-inline 会在我的 Angular Web 应用程序上引发样式问题？

Question

问题：

当我尝试删除 script-src CSP 的 unsafe-inline 源时，我的 Angular Web 应用程序不再工作。

这个问题的根本原因是什么？

在 Angular@12+ 中使用 SCSS 时，Angular 在 index.html 上添加属性 onload

这会导致违反 CSP unsafe-inline script-src 标头的源代码。

如何解决此问题并消除我的 Angular Web 应用程序上的此“安全漏洞”？

Answer 1

解决方案：

将 "inlineCritical": false 添加到 angular.json 解决了该问题，因为它禁用了 Critical CSS 内联。

    "configurations": {
        "production": {
          "optimization": {
            "styles": {
              "inlineCritical": false
            }
          }
        }
      }

为什么 Angular 会这么做？

当浏览器渲染页面时，必须等待CSS资源下载并解析。它可能会给人一种应用程序加载缓慢的（错误）印象，并影响首次内容绘制 (FCP) 时间。

避免这种情况的常用技术是将 CSS 直接内联到 HTML 中，以避免额外的请求（这是 Lighthouse 推荐的方法）。但您不想内联所有 CSS，否则下载 HTML 的时间会增加。您只想内联关键的 CSS 资源，这些资源会阻止渲染，并且您的用户将看到这些资源（您可以推迟 CSS 的其余部分）。

Angular CLI 在 v11.1 中引入了一个新选项来帮助我们解决这个问题：inlineCSS
然后，CLI 将在后台使用 critters 提取应用程序的关键 CSS，并将它们直接内联到 HTML 中。
使用上述配置运行 ng build --prod 会生成一个 index.html 文件，其中包含包含提取的关键 CSS 的样式元素和通常的 styles.xxxxx。 css 使用以下方式异步加载：

有关 unsafe-inline CSP 关键字的更多信息：https://content-security-policy.com/unsafe-inline/

Answer 2

现在，在 Angular 16 上，我们为这个期待已久的 CSP 功能提供了解决方案。

https://angular.io/guide/security#content-security-policy

Answer 3

如果您使用 Angular Universal (SSR)，则还必须在 server.ts 文件中禁用 inlineCriticalCss

找到

bootstrap: AppServerModule

并添加 inlineCriticalCss: false

bootstrap: AppServerModule,
inlineCriticalCss: false

来源：https://github.com/angular/angular/issues/42098#issuecomment-841629552