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<br> default-src 'self' header 在初始 GET 请求中，但页面未加载。我想 Angular 代码正试图从 self 之外的某个来源获取文件。但是，从堆栈中，我看到请求只发送到 localhost，我认为应该是 self。为什么代码不起作用？

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

Answer 1

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

看来Angularcli生成的代码使用了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

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

Angular 5 gives error - Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src”)

angular5

playframework-2.6