Google Chrome：在 rel="noopener" 之后为 target="_blank" 链接访问 window.opener 是新的默认设置

Question

我刚刚了解了rel="noopener" 属性，它使打开的窗口不知道它们的开启器。我玩了一下，一直得到window.opener === null，直到我发现它现在是所有现代浏览器的新默认值。

现在，我想实际阅读window.opener 属性，看看它是如何工作的：

<!-- http://opener-from.test/ -->
<a href="http://opener-to.test/" target="_blank">no rel</a>
<a href="http://opener-to.test/" target="_blank" rel="opener">rel="opener"</a>
<a href="http://opener-to.test/" target="_blank" rel="noopener">rel="noopener"</a>

<!-- http://opener-to.test/ -->
<script>
console.log(window.opener);
</script>

no rel 和 rel="noopener" 链接只会使目的地获得 window.opener === null。至于rel="opener"，它在 Firefox 和 Safari 上运行良好，但在 Google Chrome 中我得到了错误：

Uncaught DOMException: Blocked a frame with origin "http://opener-to.test" 访问跨域框架。

我在 Chrome 91 中对其进行了测试。如何在 Google Chrome 中的 target="_blank" 上下文中访问 window.opener？

Answer 1

这与默认rel无关，与跨域访问有关。来自MDN's documentation for opener：

如果打开器与当前页面不在同一个来源，则打开器对象的功能受到限制。例如，window对象上的变量和函数是不可访问的。但是，打开器窗口的导航是可能的，这意味着打开的页面可以在原来的选项卡或窗口中打开一个URL。 p>

（我的重点）

console.log(window.opener) 将尝试访问 window.opener 上的属性。

拥有rel="opener" 可以在开启程序中进行导航，但不能访问该窗口公开的全局变量（包括函数）。它还可以使用postMessage 与开启者窗口对话。

如果您只想查看是否可以访问 opener，请改为使用 console.log(window.opener === null) 并查看是 true（您没有访问权限）还是 false（您的访问权限有限）。

尽管使用rel="opener"，但它的访问权限受限，如上面的 MDN 引用所示。您无法获得对 window.opener 跨域（仅同源）的完全访问权限。

这种只允许有限访问对象内容的能力不仅仅是浏览器可以做到的魔法，你可以通过Proxy在JavaScript本身中做到这一点：

const realOpenerWindow = {
    x: 42,
};

const opener = new Proxy(realOpenerWindow, {
    get(target, property, receiver) {
        if (allow) {
            return Reflect.get(target, property, receiver);
        }
        throw new Error(`Access is disallowed`);
    }
})


let allow = true;
console.log(opener === null); // false
console.log(opener.x);        // 42
allow = false;
console.log(opener === null); // false
console.log(opener.x);        // Throws error

关于为什么 Chrome 会出现错误，但 Firefox 等非 Chromium 浏览器不会：不同的控制台实现方式不同。显然 Firefox 的控制台是为了向您展示它允许向您展示的内容，但 Chrome 只是应用其通常的对象处理并触发访问错误。