如何在Nuxt.js中配置X-XSS-Protection响应头为1; mode=block

因为nuxt-helmet默认仅支持将X-XSS-Protection设为0或不设置，你可以通过以下思路解决，分Nuxt版本给出具体操作：

针对Nuxt 2 #

方案1：自定义Server中间件 #

1. 在项目根目录创建server/middlewares/securityHeaders.js文件，写入以下代码：

export default function (req, res, next) {
  res.setHeader('X-XSS-Protection', '1; mode=block')
  next()
}

2. 在nuxt.config.js中注册该中间件：

export default {
  serverMiddleware: [
    '~/server/middlewares/securityHeaders.js'
  ],
  // 保留你原有的其他配置
}

方案2：修改nuxt-helmet的配置 #

直接在nuxt.config.js中调整helmet的设置，先关闭自带的xssFilter，再添加自定义响应头：

export default {
  helmet: {
    xssFilter: false, // 关闭nuxt-helmet默认的XSS过滤配置
    customHeaders: {
      'X-XSS-Protection': '1; mode=block' // 手动设置目标响应头
    }
    // 保留你原有的其他helmet配置
  }
}

针对Nuxt 3 #

方案1：使用Nitro全局Headers配置 #

直接在nuxt.config.ts（或nuxt.config.js）中通过Nitro配置添加响应头，无需额外中间件：

export default defineNuxtConfig({
  nitro: {
    headers: {
      'X-XSS-Protection': '1; mode=block'
    }
  }
  // 保留你原有的其他配置
})

方案2：自定义Server中间件 #

1. 在项目根目录创建server/middleware/securityHeaders.ts（或.js）文件，写入以下代码：

export default defineEventHandler((event) => {
  setResponseHeader(event, 'X-XSS-Protection', '1; mode=block')
})

2. Nuxt 3会自动加载server/middleware目录下的文件作为全局中间件，无需额外注册。

注意：如果你的项目中仍在使用nuxt-helmet相关依赖，需要确保其默认的xssFilter配置已关闭，避免覆盖你手动设置的响应头。

内容的提问来源于stack exchange，提问作者Saus