React应用嵌入iframe：如何设置Content Security Policy的frame-ancestors？

你的思路是对的，frame-ancestors确实是控制哪些域名可以将你的应用嵌入iframe的正确Content-Security-Policy（CSP）指令。之前尝试的方法无效的原因如下：

• meta标签：frame-ancestors属于CSP的"导航类"指令，不能通过meta标签设置，必须通过HTTP响应头返回给浏览器
• axios请求头：axios是前端向服务端发请求时携带的头，而CSP是服务端返回给浏览器的响应头，两者完全无关，所以无效
• Django后端配置：如果你的React应用是单独部署在AWS Amplify，而非由Django托管静态资源，那么Django的响应头配置不会影响Amplify返回的页面响应头

针对AWS Amplify部署的场景，有两种可靠的配置方式：

方式一：通过Amplify控制台配置自定义HTTP头 #

1. 登录AWS Amplify控制台，打开你的React应用
2. 左侧导航栏选择「App settings」→「HTTP headers」
3. 点击「Edit」→「Add header」，填写以下内容：
   • Header name：Content-Security-Policy
   • Header value：frame-ancestors 'self' https://app.ourdomain.com https://partnerdomain.com;
   • Apply to：/*（表示对所有路径生效）
4. 保存配置，Amplify会自动重新部署应用，部署完成后规则即可生效

方式二：通过amplify.yml代码化配置 #

如果希望将配置纳入代码版本管理，可以在项目根目录创建/修改amplify.yml文件，在headers节点添加CSP配置：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
headers:
  - pattern: '/*'
    headers:
      - key: Content-Security-Policy
        value: frame-ancestors 'self' https://app.ourdomain.com https://partnerdomain.com;

提交修改后的amplify.yml到关联的代码仓库，Amplify会触发自动部署，生效后浏览器会强制执行iframe嵌入限制。

测试验证 #

• 允许的域名（如partnerdomain.com）嵌入你的应用iframe时，页面可以正常加载
• 未在白名单的域名（如otherdomain.com）嵌入时，浏览器控制台会抛出CSP相关错误，iframe内容无法加载

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