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 URLs come from the Setup page:

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'report-sha256'; report-uri https://abc123.report-uri.com/r/d/csp/reportOnly; report-to default
Reporting-Endpoints: default="https://abc123.report-uri.com/a/d/g"
Report-To: {"group":"default","max_age":31536000,"endpoints":[{"url":"https://abc123.report-uri.com/a/d/g"}],"include_subdomains":true}

The Reporting-Endpoints and Report-To headers tell the browser where report-to default sends reports, including the CSP Integrity reports that 'report-sha256' turns on.

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 CSP reporting directives on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your CSP reporting directives from the Setup page.

Start your free trial