Angular 5 给出错误 - 内容安全策略:页面的设置阻止了 self 加载资源(“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 应用程序在初始GET请求中发送 Content-Security-Policy
default-src 'self' 标头，但页面未加载。我想 Angular 代码正在尝试从self之外的某个来源获取文件.但是，从堆栈中，我看到请求仅发送到我认为应该self的localhost。那为什么代码不起作用呢？

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

Answer 1

问题似乎不是来源，而是浏览器不允许使用函数来避免XSS攻击。我可以通过在play(服务器(的application.conf中添加以下内容来使代码工作。但是，我不确定这是否是正确的方法，因为我想我允许使用可能允许XSS攻击的eval和函数。考虑到首先调用函数的不是我的代码，这是正确的方法吗？ 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'。运行瓶/角度 5.0.3