8

I'm using Express, cors, and helmet for my app. Vue3 is used on the client-side only and the library file is self-hosted in the public folder. I simply do

<script type="module" src="/public/lib/vue.esm-browser.js"></script>

to add the module to the client-side. The problem is that when I use it, it keeps giving me an 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: "script-src 'self'". This problem started yesterday suddenly, when I started using the helmet and cors modules, and even if I comment out these modules, it still shows the error. What should I fix?

1 Answer 1

12

Yes, vue.js uses a piece of code like this:

// detect possible CSP restriction
try {
  new Function('return 1')
} catch (e: any) {
  if (e.toString().match(/unsafe-eval|CSP/)) {
    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.'
    )
  }
}

Here you have 2 options:

  1. usage of precompiled templates, see discussion at github.

  2. using a vue.runtime.js runtime version instead of vue.js full version.

VueJS has 2 different versions: the full version and the runtime version. 'unsafe-eval' is only needed for the full version of VueJS; the runtime version doesn't need it. See details here.

The runtime-only build is fully CSP-compliant. When using the runtime-only build with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into render functions which work perfectly in CSP environments. See details in Vue CSP environments.

1
  • 3
    Maybe worth specifying that 1 and 2 are the same option. Without precompiled templates the runtime build of Vue won’t do much for you
    – Damon
    Commented Sep 24, 2022 at 23:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.