如何在Webpack打包的单页应用中配置Frame Ancestors CSP规则

开发环境（webpack-dev-server 场景）配置 #

配置未生效大多是配置层级错误导致，webpack v4+ 版本需要将 headers 配置放在 devServer 根字段下，正确配置示例如下：

// webpack.config.js
module.exports = {
  // 入口、输出、loader等其他基础配置
  devServer: {
    // 其他devServer配置，比如port、open等
    headers: {
      'Content-Security-Policy': "frame-ancestors 'self';"
    }
  }
}

配置完成后重启devServer，打开浏览器开发者工具的「网络」面板，查看页面主请求的响应头，确认存在 Content-Security-Policy 字段且值符合预期即为生效。

生产环境配置 #

webpack-dev-server 仅用于本地开发，生产环境打包后的静态资源部署时，需要在对应的托管服务侧配置响应头，常见场景配置方式如下：

• Nginx：在server块或对应location块中添加配置

  add_header Content-Security-Policy "frame-ancestors 'self';" always;
  

• Apache：在虚拟主机配置或.htaccess文件中添加配置

  Header always set Content-Security-Policy "frame-ancestors 'self';"
  

• 云静态托管/CDN：直接在服务商后台的「自定义响应头」配置项中，添加对应规则即可

注意事项 #

• frame-ancestors 是CSP规范中明确不支持通过meta标签配置的规则，所有生效配置必须走响应头
• 如果需要同时配置多条CSP规则，不同规则之间用分号分隔即可，示例：

  Content-Security-Policy: frame-ancestors 'self'; default-src 'self'; script-src 'self' 'unsafe-inline'
  

• 调试阶段可以将响应头名替换为 Content-Security-Policy-Report-Only，此时仅会在控制台打印违规日志，不会实际拦截请求，方便排查问题

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