Question

我正在开展Angular 6项目。当我运行命令

时，我的代码工作正常

ng --serve

以及我使用

构建它时

ng build

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>

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

更新：请参阅此angular-cli issue。 Clydin于3月19日提到......

  如果使用生产版本，则不再需要 unsafe-eval   反射的polyfill被移除，因为它们仅用于JIT）。
     样式仍然需要
unsafe-inline 。如果这是不可接受的   对于项目的要求，另一种选择是仅使用全局   应用程序中的样式，不使用任何Angular库   包含组件样式。请注意，该项目将丢失   在这种情况下，基于组件的体系结构的好处。

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

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

1 个答案: