为什么 CSP script-src unsafe-inline 会在我的 Angular webapp 上引发样式问题？

Question

问题：

当我尝试删除script-src CSP 的unsafe-inline源时，我的 Angular webapp 不再工作。

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

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

<link rel="stylesheet" href="styles.672c1ac3d6da8cc311a2.css" media="print" onload="this.media='all'">

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

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

Answer 1

解决方案：

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

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

为什么 Angular 会那样做？

浏览器在渲染一个页面的时候，要等待CSS个资源被下载解析完。 它会给人一种（错误的）印象，即您的应用程序加载缓慢，并会影响 First Contentful Paint (FCP) 时间。

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

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

<link rel="stylesheet" href="styles.3d6bb69e3d075769b349.css" media="print" onload="this.media='all'">

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