Content Security Policy error in Chrome for Vue 2 runtime-only build

One user of my app on Mac OS 10.9/Chrome 60 is getting this error message when any JS function is called:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'nonce-...' 'strict-dynamic' 'unsafe-eval' 'unsafe-inline' https: 'report-sample'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

I cannot reproduce this error myself on Mac OS 10.8/10.12, Chrome 60/Firefox 55/Safari 11.

I am using Vue 2.4.4 + vue-cli webpack template with vue-loader + runtime-only build.

Any suggestions?

Did you find a solution? Because I currently have the same problem and can’t find a solution on the internet. Thanks!

What exactly does the dev console say? Is this the exact same error message that you receive?
Is there maybe <meta http-equiv="Content-Security-Policy" ...> tag in your rendered document <head>?
Have a look into the received header fields - what’s the value for the Content-Security-Policy header?

In case you did not add the CSP in your <head> as a meta-tag this can happen if the server / a proxy pushes a CSP via the header fields and suddenly inline-scripts are not allowed anymore.

You can tackle the problem now from 2 sides:

  • (A) either adjust the set CSP in your config
  • (B) or adjust your compiled source code to comply with the given CSP

For (B) you have to look into how to avoid any inline-script parts in your app. You’ll have to investigate the compiled apps’ source code, find all inline-script parts and figure out which part of the build process created those and how you can replace them by loading them from a file.

And regarding (A): was your CSP problem meanwhile already solved by that Style tag does not load with Rails - #2 by Nicole002 ?

Thank you, the problem was solved with (A). Yes, my style problem was because of the CSP problem, so both are now finally solved.