Skip to content
MDView as Markdown

Vue

Vue's CSP story is narrower than most, and it comes down to one decision: which build you ship. The full build compiles templates in the browser using new Function(), which a strict policy blocks unless you allow 'unsafe-eval' - and allowing that undoes a good deal of what the policy is for.

What Vue gives you

  • A runtime-only build, which contains no template compiler and therefore never calls new Function(). This is the CSP-friendly option and it is roughly 30% smaller.
  • Build-time template compilation. Templates inside *.vue single-file components are pre-compiled to JavaScript by the build step, so the compiler is not needed at runtime at all.
  • A CSP-compliant build for environments that forbid new Function() outright.

Which build you end up with

You need the full build - and therefore 'unsafe-eval' - only if you compile templates in the browser: passing a string to the template option, or mounting to an element and using its in-DOM HTML as the template.

If you use single-file components with a normal build pipeline, you are already able to ship runtime-only. Confirm it rather than assume, because the full build is a common default in older setups and the failure is silent under a report-only policy.

Setting the header

Vue does not serve your application, so the header comes from whatever does - see our Nginx, Express or Netlify pages. Your URL comes from the Setup page:

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; report-uri https://abc123.report-uri.com/r/d/csp/reportOnly

Deploy that in report-only and watch for 'unsafe-eval' violations. If they appear, you are shipping the full build.

Things to watch for

  • Reaching for 'unsafe-eval' to make the errors stop is the wrong fix. It weakens the policy globally to work around a build choice you can change.
  • If you need per-request nonces and server rendering, that is Nuxt's territory rather than plain Vue - see our Nuxt page.
  • Scoped styles and CSS-in-JS approaches can still require style-src 'unsafe-inline'. Keep that scoped to styles and out of script-src.

Official documentation

Vue.js - Security

Start Monitoring with Report URI

Already using us for CSP? Find your report-uri value on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your report-uri value from the Setup page.

Start your free trial