如何在Netlify上配置X-Frame-Options与Content Security Policy

你不需要预先配置netlify.toml，有两种可直接使用的配置方案：

方案1：Netlify后台可视化配置 #

无需修改项目代码，直接在平台后台操作即可：

• 登录Netlify后台，进入对应站点的管理页面
• 点击顶部「站点配置」（Site configuration）选项
• 在左侧菜单栏依次进入「构建与部署」（Build & deploy）→「响应头」（Headers）
• 点击「添加响应头」按钮，按需求填写规则：
  • 匹配路径填/*即可覆盖全站所有资源
  • 新增第一个头：名称为X-Frame-Options，值根据你的需求填DENY（禁止所有站点嵌套）或SAMEORIGIN（仅允许同站嵌套）
  • 新增第二个头：名称为Content-Security-Policy，值填写你实际需要的CSP规则，示例参考：default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'
• 保存配置后重新部署站点即可生效

方案2：项目内添加_headers文件 #

适合希望把配置和代码放在一起管理的场景：

• 在你站点的发布根目录（即部署到Netlify的静态文件输出目录，比如public文件夹）新建名为_headers的纯文本文件，注意文件没有后缀名
• 在文件内按以下格式编写规则，可根据需求调整头的取值：

/*
  X-Frame-Options: SAMEORIGIN
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'

• 规则说明：第一行/*代表匹配全站路径，下方缩进的每一行对应一个响应头的名称和值
• 将_headers文件随站点代码一起提交部署，配置会自动生效

两种方案任选其一即可，无需同时配置。如果同时配置，_headers文件的规则优先级高于后台配置的规则。

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