vue.js Nuxt.js中的内容安全策略

yc0p9oo0  于 2023-06-06  发布在  Vue.js
关注(0)|答案(2)|浏览(226)

有人成功地将CSP添加到Nuxt应用程序吗?
我尝试了Helmet,但它似乎与nuxt.config.js文件不兼容。
还尝试在Nuxt中的Render属性上添加csp,但当某些脚本需要nonce时会遇到问题。
下面是我的nuxt.config.js中Render属性的要点,这是正确的吗?
如何在Nuxt中生成nonce?

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
  }
},
csbfibhn

csbfibhn1#

您可以使用nuxt-helmet来完成此操作。这是一个非常容易集成的包,只需要在nuxt.config.js中添加几行代码。

e1xvtsh3

e1xvtsh32#

首先,确保在nuxt.config.js中设置了以下内容:

render: { csp: true }

这里有一个模块可以实现这一点。请注意,目前它还没有经过很好的测试。

import { randomBytes } from 'crypto'

export default function cspModule() {
  // Set nuxt CSP options.
  this.options.render.csp = {
    reportOnly: true,
    hashAlgorithm: 'sha256',
  }

  this.nuxt.hook('render:routeContext', (nuxtContext) => {
    // Generate a 128 bit random nonce every request.
    const nonce = randomBytes(16).toString('base64')
    // Inject nonce into vuex state before state is serialized into window.__NUXT__.
    nuxtContext.state.nonce = nonce
  })

  this.nuxt.hook(
    'render:route',
    (url, { cspScriptSrcHashes }, { nuxt: nuxtContext }) => {
      // Extract nonce generated in render:routeContext.
      const nonce = nuxtContext.state.nonce
      // Add nonce to cspScriptSrcHashes. Nuxt will populate all entries in this array
      // to the csp header and meta tags as part of the script-src csp policy.
      cspScriptSrcHashes.push(`'nonce-${nonce}'`)
    }
  )
}

此方法的一个警告是,nonce仅适用于script-src csp策略。但在大多数情况下,它只需要脚本无论如何。
来源
请记住,nonce(“仅使用一次的数字”)只对SSR有意义,因为它在每个请求上都必须是唯一的。对于SSG(即nuxt generate),这更难实现(也许使用Web服务器上的转换或边缘函数?).
more info

相关问题