Nuxt.js: CSP violation in modern builds

[samrg472]

Version

v2.4.0

Reproduction link

https://codesandbox.io/s/v271z453

Steps to reproduce

• Enable modern builds and CSP in the configuration
• Load the webpage
• Check the devtools console for a CSP violation

What is expected ?

The Content-Security-Policy is expected to be satisfied.

What is actually happening?

A CSP violation is occurring.

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'sha256-Q8VZ3JY1e/6NFowuA+3pjpynK6AzVNhbH31DIqVDFVM='". Either the 'unsafe-inline' keyword, a hash ('sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='), or a nonce ('nonce-...') is required to enable inline execution.

Notes

It's better to test locally than in the codesandbox. Codesandbox seems to have additional CSP errors that don't happen in a local environment.

_{This bug report is available on Nuxt community (#c8558)}

[il-m-yamagishi]

!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();

the script is appended to body and its hash are sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI=.

It is workaround for Safari 10.1 nomodule bug. See Safari 10.1 nomodule support.

in v2.4.3, here appends the script.

Although we might not modify CSP header in webpack plugin, renderer appends another CSP script hash. Should we append there?

---

And current workaround is to add hash in nuxt.config.js.

export default {
  render: {
    csp: {
      hashArgorism: 'sha256',
      policies: {
        'script-src': [
          "'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='" // this line resolves the violation
        ]
      }
    }
  }
}

[manniL]

@il-m-yamagishi good catch! Would you like to submit a PR?

[jovanmaric]

@il-m-yamagishi any progress on the PR?

Also wouldn't having the option to disable inline-scripts (currently possible in vue-cli https://github.com/vuejs/vue-cli/issues/2570) mitigate this issue and expand on the http2 capabilities of Nuxt?

[ArmandoHerra]

I'm also looking into something related to this issue, I'm wanting to hash or nonce the scripts and styles appended to the template so I can get CSP rules to stop blocking resources, how is this going and if there is a way how can I check and edit it?

Thanks!

[manniL]

As @il-m-yamagishi said here, this is likely related to the safari "nomodule" fix.

Adding the mentioned hash to the nuxt config works and should be there as soon as the nomodule fix is applied. We'd love to see a PR for it ☺️

[sustained]

Adding the hashes doesn't work for me.

[MicroDreamIT]

I am having the same trouble, its ruin my life but in localhost everything is working fine.
in production app is look like
https://my-site.com (frontend app)
https://api.my-site.com (api app)
I am using django backend for API

18842af40923cd48144b.js:2 Refused to connect to 'https://my-api.com/api/tag/' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Show 31 more frames
18842af40923cd48144b.js:2 Uncaught (in promise) Error: Network Error
    at t.exports (18842af40923cd48144b.js:2)
    at XMLHttpRequest.m.onerror (18842af40923cd48144b.js:2)

[RaphaelDDL]

After upgrading to [email protected], I get the same kind of issue locally. Seems entire vendors.app.js are made of eval() so probably all will fail:

I use Helmet CSP on the server/index.js, and I imagine adding 'unsafe-eval' to script-src would "fix", but then, isn't that a bad thing (adding eval as acceptable)?

Same issue does NOT happen on [email protected] where vendor.app.js bundles the real code instead of evals:

I'm reading 2.10.0/1/2 changes on release but still couldn't find what changed.

[rogerwaldvogel]

Is there any progress? Without this being fixed I cannot use a newer version than 2.9.2.

[HapLifeMan]

Up! :)

[clarkdo]

I suppose it might be related to source map, could you try to use source-map in devtool ?
https://nuxtjs.org/api/configuration-build/#extend

[clarkdo]

I just opened a pr as fix, could you please try if it solves your problems ?

BTW, if you're using eval-* source map in production mode, please change to other production ready values, https://webpack.js.org/configuration/devtool/#devtool