How to add CSP header (Content-Security-Policy) to vuejs app?

Question

When i add the csp header in my public/index.html, at the develop time, it showing below error? How should i fix this problem? what is the proper way to add csp in html to prevent XSS attacks from other sources and prevent use of eval and Functions,etc at the build time and not at the development?

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

error:

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/* ".

Update

I updated the tag like below:

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

but its still showing the error:

Answer 1

For your specific error, you need to change your img-src directive to:

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

The extra '*' does not work in CSP paths. More information on host matching .

Update for new violation

The next error is an eval error. It looks like one of the dependencies is using eval(). You can either figure out what dependency is using an eval and try to fix it / use a different dependency, or take the less secure option and add 'unsafe-eval' to your script-src. Adding 'unsafe-eval' is not as bad as 'unsafe-inline' but does limit the usefulness of CSP slightly. (eval is a common injection point for XSS and best to be avoided)

If you decide to go the more secure route and try to figure out what is causing the error, there are two things that could help track it down:

1. adding 'report-sample' to your 'script-src' within your CSP will include the first 40 characters of the violation, so you can see what is being eval'd.
2. using a report-uri endpoint to collect your CSP violation reports (such as https://csper.io ) may make debugging easier. It'll collection violations from your policy and list out more information about where in your code the violation occurred and what to do