【发布时间】：2018-03-18 19:27:17
【问题描述】：
我的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 标头，但页面未加载。我想 Angular 代码正试图从
default-src 'self'self 之外的某个来源获取文件。但是，从堆栈中，我看到请求只发送到localhost，我认为应该是self。那为什么代码不起作用？
我的设置有点不同。我已经编译了所有 Angular 代码，并将其 js 文件移动到 play 框架（我的服务器）的 public 文件夹。
【问题讨论】：
-
问题似乎不是源头，而是浏览器不允许使用
Function来避免 XSS 攻击。我可以通过在application.conf和play中添加以下内容来使代码工作。但是，我不确定这是否是正确的方法，因为我想我允许使用可能允许 XSS 攻击的eval和Function。考虑到首先调用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
标签： angular5 playframework-2.6