Nuxt Security：如何配置修复缺失的安全响应头

数据老陈

2026-8-27

Nuxt 框架下基于 Nuxt Security 模块的安全响应头配置方法

先完成模块基础安装注册：

执行安装命令：npm install @nuxtjs/security
在项目根目录的nuxt.config.ts配置文件中，将模块加入modules数组，所有安全头配置统一写在配置项的security.headers字段下即可。
基础配置骨架参考：

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/security'
    // 项目其他已有模块
  ],
  security: {
    headers: {
      // 各安全头配置写在此处
    }
  }
})

1. Strict-Transport-Security（HSTS 强制HTTPS传输）

作用是告知浏览器在指定有效期内必须通过HTTPS访问站点，禁止HTTP明文连接，防止协议降级、中间人劫持攻击。
配置示例：

strictTransportSecurity: {
  maxAge: 63072000, // 强制HTTPS有效期，单位秒，此处为2年，为生产环境推荐值
  includeSubDomains: true, // 规则覆盖所有子域名
  preload: true // 支持申请加入浏览器内置HSTS预加载列表
}

注意：必须确认站点所有服务、所有子域名全站支持HTTPS时再开启该配置，否则会导致HTTP路径用户无法正常访问

2. Content Security Policy（CSP 内容安全策略）

作用是限制页面可加载的资源来源、可执行的脚本权限，从根源上阻断XSS跨站脚本、资源注入类攻击，是所有安全头中灵活度最高、防护效果最好的配置项。
基础生产环境配置参考（可根据自身业务的第三方资源加载需求调整白名单）：

contentSecurityPolicy: {
  value: {
    'default-src': ["'self'"], // 默认仅允许加载同域资源
    'script-src': ["'self'"], // 生产环境开启模块自带的nonce自动注入时，不需要加unsafe-inline/unsafe-eval即可兼容Nuxt的内联脚本逻辑
    'style-src': ["'self'", "'unsafe-inline'"], // 允许同域样式、内联样式，适配前端框架的样式注入逻辑
    'img-src': ["'self'", "data:", "blob:"], // 允许加载同域图片、data/blob格式的本地图片资源
    'font-src': ["'self'"], // 字体资源仅允许同域加载
    'connect-src': ["'self'"], // 接口请求、WebSocket连接仅允许同域，有第三方接口、统计服务需求时将对应域名加入数组即可
    'frame-ancestors': ["'none'"], // 禁止任何站点将当前页面嵌入iframe
    'base-uri': ["'self'"],
    'form-action': ["'self'"] // 表单仅允许提交到同域地址
  },
  route: '/**' // 全站所有路径生效
}

开发环境下模块会自动放宽CSP规则适配热更新，不需要单独写环境判断逻辑。如果上线后出现资源加载报错，优先调整对应资源类型的源白名单，不要直接关闭CSP防护。

3. X-Frame-Options

作用是控制页面是否允许被其他站点通过iframe、frame、object标签嵌入，防范点击劫持攻击，可作为CSP frame-ancestors 规则的旧浏览器兜底配置。
可选配置值：

DENY：完全禁止任何页面嵌入，包括同域页面
SAMEORIGIN：仅允许同域页面嵌入
配置示例：

xFrameOptions: {
  value: "SAMEORIGIN",
  route: '/**'
}

注：ALLOW-FROM 语法兼容性较差，需要给特定域名开嵌入权限时，优先通过CSP的frame-ancestors配置实现

4. X-Content-Type-Options

作用是禁止浏览器自动嗅探资源MIME类型，防止恶意脚本伪装成图片、文本等静态资源被解析执行。
该头仅支持一个有效值nosniff，无业务兼容问题，建议所有站点强制开启：

xContentTypeOptions: {
  value: "nosniff",
  route: '/**'
}

5. Referrer-Policy

作用是控制页面跳转、跨域请求时携带的Referrer信息范围，避免路径、请求参数等敏感信息通过Referrer泄露给第三方站点。
推荐兼顾业务统计需求和隐私保护的配置值为strict-origin-when-cross-origin，即同域请求时携带完整路径信息，跨域请求时仅携带域名不携带路径和参数：

referrerPolicy: {
  value: "strict-origin-when-cross-origin",
  route: '/**'
}

其他常用可选值：no-referrer（完全不携带Referrer）、same-origin（仅同域请求携带Referrer，跨域不携带）。

6. Permissions-Policy

作用是精细化控制页面对浏览器敏感权限的调用资格，比如摄像头、麦克风、定位等，避免站点在用户无感知的情况下擅自调用敏感权限。
配置示例（可根据自身业务需求调整权限开关）：

permissionsPolicy: {
  value: {
    camera: ["()"], // 完全禁止调用摄像头
    microphone: ["()"], // 完全禁止调用麦克风
    geolocation: ["()"], // 完全禁止获取用户定位
    notifications: ["'self'"], // 仅允许同域页面发起通知权限请求
    payment: ["'self'"], // 仅允许同域页面唤起支付权限
    'pop-up': ["'self'"] // 仅允许同域页面弹出弹窗
  },
  route: '/**'
}

配置语法说明：() 代表对应权限完全禁用，'self' 代表仅允许同域页面使用该权限，需要给信任的第三方域名开放权限时，将对应域名加入数组即可。

所有配置完成后执行nuxt build打包部署即可，上线后可以通过浏览器控制台网络面板查看响应头是否生效。

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

Nuxt Security：如何配置修复缺失的安全响应头

1. Strict-Transport-Security（HSTS 强制HTTPS传输） #

2. Content Security Policy（CSP 内容安全策略） #

3. X-Frame-Options #

4. X-Content-Type-Options #

5. Referrer-Policy #