javascript - 内容安全策略不适用于 Ionic 服务

Question

在我的 index.html 中，我有一个元标记:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

当我运行 ionic serve(Ionic 版本为 1.6.1)时，出现以下错误:

Refused to load the script 'http://localhost:35729/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:8100"

有人知道怎么解决吗？

Answer 1

我注意到，您已将 script-src 设置为 self，这意味着脚本将仅从您的域加载同源(主机名)。

当您在 Web 服务器上运行它时，您的端口号发生了变化，因为它选择随机选择的端口来运行该应用程序。我对 Ionic 服务器一无所知，但对于 CSP，我可以得出结论。

在您的情况下，localhost:35729 和 localhost:8100 显然不同，因此策略 header 会阻止脚本的加载。

要解决此问题，最好为您的应用使用主机名。此外，如果您通过 HTTP 响应 header 而不是 meta 标记发送 CSP，它的效果会更好。如果您有任何疑问，请告诉我。