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

Question

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

ng -

当我使用它构建它时

建立

并将其部署在我的本地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日提到......

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

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

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