子域名iframe中强制window.location.href使用自身源地址的方案问询

1 最常见诱因：iframe src未写全协议头 #

你当前的iframe代码里src属性缺少http://或https://协议标识，浏览器会将该地址识别为相对路径，自动拼接父页面的域名，最终出现路径读取错误。
直接修正iframe代码即可：

<iframe src='https://b.example.com/foo'></iframe>

修改后先验证是否恢复正常，若问题依旧，继续向下排查。

2 同根域document.domain设置导致的浏览器兼容问题 #

如果两个子域名页面都配置了document.domain = 'example.com'用于跨子域通信，会触发部分浏览器的兼容问题，导致iframe内的window.location.href错误继承父页面域名。
对应两种解决方向：

• 无需父子页面跨域通信的场景：直接删除两个页面中document.domain = 'example.com'的配置，iframe的location会自动恢复为真实地址。
• 必须保留跨域通信能力的场景：在iframe页面（b.example.com/foo）的最前端注入如下代码，重写location.href的读取逻辑：

// 直接填入b.example.com/foo的真实访问地址，也可由服务端渲染时动态输出
const realHref = 'https://b.example.com/foo';
Object.defineProperty(window.location, 'href', {
  get: () => realHref,
  configurable: true
});

该方案不会影响页面其他逻辑，同时适配第三方库读取window.location.href的行为。

3 反向代理配置错误 #

如果a.example.com的服务端配置了路径代理，将/foo的请求转发到了b.example.com/foo，浏览器感知不到资源的真实来源，会自然读取父页面域名作为前缀。这种情况需要调整反向代理规则，取消对/foo路径的代理，让iframe直接请求b.example.com的真实服务。

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