Content Security Policy error with Vue JS, Webpack and JSP

Question

I am trying to integrate Vue JS in one of my application with latest version 2.4.2.Backend implementation uses struts and we set Content-Security-Policy script-src 'self' 'unsafe-inline' in response headers.

At first I was trying to use standalone Vue JS instead of using webpack or any other tool. I see the following CSP error when I execute my page using Vue JS :

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

warn — vue.min.js:485   
compileToFunctions — vue.min.js:9842   
$mount — vue.min.js:10040   
Global Code — example.do:51

To avoid this issue, I have started using webpack to pre-compile the templates so that the issue will be resolved and I still see the below error in webpack JS :

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: "script-src 'self' 'unsafe-inline'".

Is there any solution to use webpack / Vue JS with CSP's enabled ? What is the suitable solution to handle CSP issues.

Sample Example : Vue is not detected when JSP is loaded through struts

Thanks for your help in advance.

This question feels too broad to elicit a useful answer. Please consider providing a reduced test case to get to the root of the problem. — Josh Habdas

Phanikiran Phanikiran · Accepted Answer · 2017-08-03T21:49:04

Got to know there are different options to set up "devtools" attribute in webpack config file.

Issue and solution details : https://github.com/webpack/webpack/issues/4094

https://webpack.js.org/configuration/devtool/#devtool explains detailed options and selection to resolve CSP issues.

Content Security Policy error with Vue JS, Webpack and JSP

1 Answers