0

问题：

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

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

在 Angular@12+ 中使用 SCSS 时，Angularonload在index.html:7上添加一个属性

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

这会导致违反标头的 CSPunsafe-inline源script-src。

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

4

1 回答 1

0

解决方案：

添加"inlineCritical": false到angular.json解决的问题，因为它禁用关键 CSS 内联。

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

为什么 Angular 会这样做？

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

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

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'">

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

于 2022-02-24T10:13:17.997 回答