Content Security Policy in Nuxt.js

Question

Has anyone successfully added a CSP to a Nuxt app?

I tried Helmet but it doesn't seem to be compatible with a nuxt.config.js file.

Also tried adding csp on the Render property in Nuxt, but ran into issues when certain scripts required a nonce.

Here is the gist of my Render property in my nuxt.config.js, is this about right?

And how do you go about generating a nonce in Nuxt?

render: {
  csp: {
    hashAlgorithm: 'sha256',
    policies: {
      'script-src': [
        'self',
        'unsafe-inline',
        'http://assets.adobedtm.com',
        'https://cdn.polyfill.io/',
        'https://www.everestjs.net',
        'https://www.google-analytics.com',
        'http://localhost:8001',
        "'sha256-<hash>'"
      ],
    },
    reportOnly: false,
    addMeta: true
  }
},

Answer 1

You can use nuxt-helmet which does this for you. It's a really easy package to integrate with just a few lines added to your nuxt.config.js.