在 Angular 18m SSR 项目中禁用脚本优化后仍然出现内联脚本 CSP 冲突

Question

我正处于建立 Angular 项目的早期阶段。根据之前其他项目的经验，我正在尽早实施内容安全策略，以便我们可以在开发过程中发现违规行为并在出现违规行为时进行处理。 Angular 似乎喜欢内联很多东西，并且很难对样式和脚本制定受限的内容策略。我不太担心样式，但我真的不想为 script-src 使用“不安全内联”。

我读到的所有内容似乎都表明我应该能够通过在 angular.json 文件中将脚本优化设置为 false 来防止内联脚本。但是，当我这样做时，我仍然收到该政策的例外情况。

VM974:1 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-lAv2mkGJp6SGGEBjSBtNofGW0z9UbIkFVrzyccLfMb0='), or a nonce ('nonce-...') is required to enable inline execution.

我的优化代码，位于projects >projectName >architect > build

"optimization": {
    "fonts": true,
    "scripts": false,
    "styles": {
        "inlineCritical": false,
        "minify": true,
        "removeSpecialComments": true
    }
}

我也尝试过将所有优化设置为 false。 奇怪的是，无论哪种方式，该网站的工作方式似乎都是一样的。我无法找到引用的脚本，它似乎没有做任何事情。当我使用开发工具查看发生违规的实际执行代码时，它看起来像这样：

(e=>{
    const t = document.createElement("script");
    t.setAttribute("type", "text/javascript"),
    t.textContent = e,
    (document.head || document.documentElement).appendChild(t),
    t.parentNode && t.parentNode.removeChild(t)
}
)("\n                (function () {\n                    try {\n

这使得页面看起来像是被附加了一些东西。当我比较打开和关闭策略的页面标题时，内容完全相同。我目前仅在本地主机上的计算机上运行此程序。

有人在评论中问，我也在运行服务器端渲染。我猜这是其中很大一部分，但似乎仍然无法弄清楚如何禁用内联脚本。

有谁知道如何阻止 Angular 18 SSR 项目运行任何内联脚本？

Answer 1

据我所知，optimization->styles->inlineCritical 属性对 Angular ssr 没有帮助。

如果脚本适合您，只需将其添加到 script-src csp:

script-src 'self' 'sha256-lAv2mkGJp6SGGEBjSBtNofGW0z9UbIkFVrzyccLfMb0='