如何允许主域动态加载子域iframe？解决同源策略拦截问题

问题根源 #

你碰到的错误是同源策略拦截了不同子域框架间的脚本交互。虽然你说只是创建iframe，但实际代码里大概率存在隐性的跨域访问操作（比如不经意读取了iframe的contentWindow或document属性）。另外你之前的配置方向错了：

• Access-Control-Allow-Origin：只对AJAX、fetch这类CORS请求生效，管不了iframe的跨域脚本交互。
• frame-ancestors：是用来限制哪些页面能把当前页面嵌成iframe，不是允许当前页面去嵌其他页面并交互。

正确配置方案 #

根据你的域名场景（同主域的子域www.example.com和www3.example.com），分两种情况处理：

情况1：在www3.example.com页面中创建并访问www.example.com的iframe #

因为是同主域子域，最简单的方法是在两个页面的JS里添加：

document.domain = 'example.com';

同时在www.example.com的.htaccess里补充：

# 允许www3子域的跨域请求（配合document.domain使用）
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Origin "https://www3.example.com"

这种方式让两个子域共享根域名，绕过同源策略的限制。

如果不想改JS，也可以用现代浏览器支持的跨域隔离头部，在www.example.com的.htaccess中配置：

Header set Cross-Origin-Embedder-Policy "require-corp"
Header set Cross-Origin-Opener-Policy "same-origin"

同时在www3.example.com的.htaccess里也加上同样的配置，让两个页面处于同一跨域隔离上下文，允许脚本交互。

情况2：在www.example.com页面中创建www3.example.com的iframe #

如果是这种场景，你之前的frame-ancestors配置写反了——要在www3.example.com的.htaccess里设置：

# 允许www.example.com页面嵌入当前域名的iframe
Header set Content-Security-Policy "frame-ancestors 'self' https://www.example.com;"

单纯创建iframe的话，这个配置就能解决被拦截的问题；要是之后需要访问iframe内容，还是得用前面的document.domain或跨域隔离头部方案。

重要提醒 #

• 要是真的只是创建iframe完全不做脚本交互，理论上不会触发这个错误，建议排查代码里有没有不小心访问iframe内部属性的逻辑。
• 确保Apache服务器开启了mod_headers模块（默认是开启的，没开的话得先启用），否则.htaccess的头部配置不会生效。

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