Angular 6：内容安全策略：页面的设置阻止了自加载资源（“script-src”）

Question

我正在研究一个 Angular 6 项目。当我运行命令时，我的代码工作正常

ng --serve

以及当我使用它构建它时

构建

并将其部署在我的本地 Tomcat 服务器上。我没有遇到任何错误，工作得很好。

但是当我在我的 Ubuntu 机器上部署相同的 Apache HTTPD 服务器时，我分别在 Firefox 和 Chrome 上遇到以下错误

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: onfocusin attribute on DIV element.

Error: call to Function() blocked by CSP
compiler.js:22402

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: call to eval() or related function blocked by CSP.

我参考了许多链接并尝试了多种选择，但仍未成功解决。任何帮助将不胜感激。

提前致谢。

Answer 1

在将正在进行的 Angular 6 开发部署到 IIS 服务器时遇到了同样的问题（而应用程序在本地开发环境中完美运行）。

经过一些研究，看起来 Webpack 输出不能很好地处理严格的 Content-Security-Policy，因此您必须减少它。

这可以通过添加一些带有宽松 CSP 定义的自定义标头来实现。

就我而言（IIS/ASP.NET）...

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Content-Security-Policy" value="default-src 'self' ; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

在此处查找有关如何在 Apache 中添加自定义 CSP 的一些示例。

更新：作为附加信息，请参阅此angular-cli 问题。Clydin 在 3 月 19 日提到...

如果使用生产构建，则不再需要unsafe-eval（删除了反射 polyfill，因为它们仅在 JIT 中需要）。

样式仍然需要unsafe-inline。如果这对于项目的要求来说是不可接受的，另一种选择是仅在应用程序中使用全局样式，而不使用任何包含组件样式的 Angular 库。请注意，在这种情况下，项目将失去基于组件的体系结构的全部优势。

因此，如果使用 AOT，您可能可以修改 CSP 定义。