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

Question

问题：

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

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

在 Angular@12+ 中使用 SCSS 时，Angularonload在index.html

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

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

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

Answer 1

解决方案：

\n

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

\n

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

\n

为什么 Angular 会这么做？

\n

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

\n

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

\n

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

\n

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

\n

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

\n