如何将CSP标头（Content-Security-Policy）添加到vuejs应用程序？

Question

当我在开发时将csp标头添加到public / index.html中时，它显示以下错误？我该如何解决这个问题？在html中添加csp以防止其他来源的XSS攻击并在构建时而不是在开发时阻止使用eval和Functions等的正确方法是什么？

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self' http://localhost:8080/*; img-src https://* http://localhost:8080/* ; child-src 'none';"
/>

错误：

dashboard:15 Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "img-src https://* http://localhost:8080/* ".

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' http://localhost:8080/*".

    at Object../node_modules/webpack/hot/dev-server.js ()
    at __webpack_require__ (app.js:790)
    at fn (app.js:151)
    at Object.1 (app.js:1610)
    at __webpack_require__ (app.js:790)
    at checkDeferredModules (app.js:46)
    at app.js:930
    at app.js:933
./node_modules/webpack/hot/dev-server.js @ 
checkDeferredModules @ app.js:46

Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "img-src https://* http://localhost:8080/* ".

更新

我更新了标签，如下所示：

   <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self' http://localhost:8080; img-src https://* http://localhost:8080 ; child-src 'none';"
    />

但是它仍然显示错误：

Answer 1

对于您的特定错误，您需要将img-src指令更改为：

img-src https://* http://localhost:8080 

额外的'*'在CSP路径中不起作用。有关host matching的更多信息。