Angular 5给出了错误 - 内容安全策略：页面的设置阻止了自身加载资源（“default-src”）

Question

我在Angular5应用程序中收到以下错误。

Error: call to Function() blocked by CSP
vendor.bundle.js:50077:40
bind_constructFunctionN self-hosted:1214:16 Function self-hosted:1132:24 evalExpression
http://localhost:9000/assets/ui/vendor.bundle.js:50077:40
jitStatements
http://localhost:9000/assets/ui/vendor.bundle.js:50095:12
../../../compiler/esm5/compiler.js/JitCompiler.prototype._interpretOrJit
http://localhost:9000/assets/ui/vendor.bundle.js:50678:20
../../../compiler/esm5/compiler.js/JitCompiler.prototype._compileTemplate
http://localhost:9000/assets/ui/vendor.bundle.js:50606:43
../../../compiler/esm5/compiler.js/JitCompiler.prototype._compileComponents/<
http://localhost:9000/assets/ui/vendor.bundle.js:50505:56
forEach self-hosted:5732:9 ../../../compiler/esm5/compiler.js/JitCompiler.prototype._compileComponents
http://localhost:9000/assets/ui/vendor.bundle.js:50505:9
../../../compiler/esm5/compiler.js/JitCompiler.prototype._compileModuleAndComponents/<
http://localhost:9000/assets/ui/vendor.bundle.js:50375:13
then
http://localhost:9000/assets/ui/vendor.bundle.js:16489:77
../../../compiler/esm5/compiler.js/JitCompiler.prototype._compileModuleAndComponents
http://localhost:9000/assets/ui/vendor.bundle.js:50374:16
../../../compiler/esm5/compiler.js/JitCompiler.prototype.compileModuleAsync
http://localhost:9000/assets/ui/vendor.bundle.js:50268:32
../../../platform-browser-dynamic/esm5/platform-browser-dynamic.js/CompilerImpl.prototype.compileModuleAsync
http://localhost:9000/assets/ui/vendor.bundle.js:79292:34
../../../core/esm5/core.js/</PlatformRef.prototype.bootstrapModule
http://localhost:9000/assets/ui/vendor.bundle.js:57045:16
../../../../../src/main.ts
http://localhost:9000/assets/ui/main.bundle.js:1179:1
__webpack_require__
http://localhost:9000/assets/ui/inline.bundle.js:55:12
[0]
http://localhost:9000/assets/ui/main.bundle.js:1188:18
__webpack_require__
http://localhost:9000/assets/ui/inline.bundle.js:55:12
webpackJsonpCallback
http://localhost:9000/assets/ui/inline.bundle.js:26:23
<anonymous>
http://localhost:9000/assets/ui/main.bundle.js:1:1
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src”).
localhost:9000:1
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src”). Source: /* You can add global styles to this fil....
localhost:9000:1
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src”). Source: call to eval() or related function blocked by CSP.
vendor.bundle.js:50077

Angular应用程序在初始

Content-Security-Policy
default-src 'self'

请求中发送GET头，但页面未加载。我想Angular代码试图从self之外的某些来源获取文件。但是，从堆栈中，我看到请求只被发送到localhost，我认为应该是self。为什么代码不能正常工作？

我的设置有点不同。我编译了所有的Angular代码并将其js文件移动到public框架（我的服务器）的play文件夹中。

Answer 1

问题似乎不是源，但浏览器不允许使用Function来避免XSS攻击。我可以通过在application.conf（服务器）中的play中添加以下代码来使代码工作。但是，我不确定这是否正确，因为我认为我允许使用可能允许XSS攻击的eval和Function。这是正确的方式，因为它不是我的代码首先调用函数。 contentSecurityPolicy = "default-src 'self' ; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"

似乎Angular cli生成的代码使用了eval和Function。所以，目前可能放宽CSP政策是唯一的解决方法。 - github.com/angular/angular-cli/issues/6872

很高兴接受其他答案

Answer 2

我得到了这个错误，但在用ng build --prod构建后，我不再需要'unsafe-eval'，没有--prod我仍然需要'unsafe-eval'。运行Flask / Angular 5.0.3