管控两个网站时如何解决iframe嵌入触发X-Frame-Options SAMEORIGIN报错

你设置的Access-Control-Allow-*系列响应头是用来控制跨域异步请求（比如fetch、XMLHttpRequest）的权限，和iframe嵌入权限完全无关。你遇到的报错是站点A的X-Frame-Options响应头设置为SAMEORIGIN导致的，这个头的作用就是禁止非同源站点的iframe嵌入当前页面。

• 方案1：调整站点A对应页面的X-Frame-Options配置
  你需要在站点A的some-page.php页面里，把原来的X-Frame-Options: SAMEORIGIN响应头替换成允许站点B嵌入的配置。X-Frame-Options仅支持三个取值：DENY（禁止所有嵌入）、SAMEORIGIN（仅允许同源嵌入）、ALLOW-FROM <域名>（仅允许指定域名嵌入），添加如下代码即可：

  header('X-Frame-Options: ALLOW-FROM https://site-b.com');
  

  注意部分现代浏览器（比如Chrome、Safari的新版本）已经不再支持ALLOW-FROM语法，该方案兼容性一般。
• 方案2：使用Content-Security-Policy（CSP）的frame-ancestors指令（更推荐）
  这是当前W3C推荐的替代X-Frame-Options的标准配置，适配所有主流现代浏览器。你可以在站点A的some-page.php页面里添加如下响应头，同时删除原来的X-Frame-Options: SAMEORIGIN头即可：

  header("Content-Security-Policy: frame-ancestors 'self' https://site-b.com;");
  

  配置里的'self'代表允许站点A自己的页面嵌入该页面，如果不需要可以直接删掉，仅保留https://site-b.com即可。

• 如果你是用服务器软件（Nginx、Apache、CDN等）全局配置了X-Frame-Options: SAMEORIGIN，需要先在全局配置里给some-page.php页面做例外配置，否则页面单独添加的头会被全局配置覆盖。
• 如果站点A的页面需要用到Cookie等身份凭证，你之前配置的Access-Control-Allow-Credentials: true是有效的，同时需要给站点B的iframe标签加上allow="credentials"属性才能正常携带凭证。

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