如何在Docusaurus v2中配置安全响应头防止站点被iframe嵌入

Docusaurus v2是静态站点生成器，开发环境和生产环境的响应头配置逻辑不一样，按实际使用场景配置即可：

本地开发环境配置 #

直接修改项目根目录下的docusaurus.config.js配置文件，添加devServer对应的头配置，把需要的安全头全部写入即可：

module.exports = {
  // 保留原有所有配置项，比如title、themeConfig等
  devServer: {
    headers: {
      'X-XSS-Protection': '1; mode=block',
      'X-Content-Type-Options': 'nosniff',
      'X-Download-Options': 'noopen',
      'Cache-Control': 'no-store',
      'X-Frame-Options': 'SAMEORIGIN'
    }
  }
}

修改完成后重启本地开发服务，再访问页面就能在浏览器开发者工具的网络面板里看到对应响应头已经生效。

生产环境配置 #

执行npm run build后Docusaurus会输出纯静态资源到build目录，生产环境下响应头由托管这些静态资源的服务端配置，以下是几种最常见部署方式的配置示例：

• 使用Nginx托管
  找到站点对应的Nginx配置文件，在对应的server或location配置块中添加头规则：

  server {
    listen 80;
    server_name 你的站点域名;
    root /你的站点部署路径/build;
    index index.html;
  
    # 安全响应头配置
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
    add_header X-Download-Options "noopen";
    add_header Cache-Control "no-store";
    add_header X-Frame-Options "SAMEORIGIN";
  
    # 保留原有路由、缓存等其他配置
    location / {
      try_files $uri $uri/ =404;
    }
  }
  

  改完执行nginx -t校验配置格式正确，再重载Nginx服务即可生效。
• 使用Vercel托管
  在项目根目录新建vercel.json配置文件，写入以下内容：

  {
    "headers": [
      {
        "source": "/(.*)",
        "headers": [
          {"key": "X-XSS-Protection", "value": "1; mode=block"},
          {"key": "X-Content-Type-Options", "value": "nosniff"},
          {"key": "X-Download-Options", "value": "noopen"},
          {"key": "Cache-Control", "value": "no-store"},
          {"key": "X-Frame-Options", "value": "SAMEORIGIN"}
        ]
      }
    ]
  }
  

  把配置提交到代码仓库后触发重新部署即可。
• 使用Netlify托管
  在项目根目录新建名为_headers的文件，写入以下内容：

  /*
    X-XSS-Protection: 1; mode=block
    X-Content-Type-Options: nosniff
    X-Download-Options: noopen
    Cache-Control: no-store
    X-Frame-Options: SAMEORIGIN
  

  提交文件到仓库重新部署即可生效。

注：配置里的X-Frame-Options: SAMEORIGIN已经可以满足阻止第三方网站通过iframe嵌入你站点的核心需求，仅同域名下的页面可正常嵌入你的站点内容。

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