Chrome 对无用户行为触发的父页面跳转的默认屏蔽行为

前端

2023-10-01 06:49:22

简介

跨域限制是 Web 浏览器为了保证安全而实施的一项重要机制，它防止恶意网站访问或修改来自不同域的敏感信息。然而，在某些情况下，需要绕过这些限制以实现特定功能。

在 iframe 中嵌入跨域页面时，Chrome 浏览器会默认屏蔽“非用户行为触发”的父页面跳转。这意味着如果 iframe 中的页面尝试使用 JavaScript 代码将父页面重定向到另一个 URL，浏览器将阻止这种跳转。

原因

Chrome 对无用户行为触发的父页面跳转的屏蔽行为是为了防止以下安全风险：

跨站点脚本攻击 (XSS)： 攻击者可以利用 XSS 漏洞在 iframe 中注入恶意代码，该代码可以控制父页面并将其重定向到恶意网站。
钓鱼攻击： 恶意网站可以将 iframe 嵌入到合法的网站中，并使用 JavaScript 代码将父页面重定向到仿冒网站，诱骗用户输入敏感信息。

绕过限制

在某些情况下，可能需要绕过 Chrome 的父页面跳转屏蔽行为。以下是一些方法：

使用用户交互触发跳转： 当用户在 iframe 中执行特定操作（例如单击按钮）时，Chrome 浏览器允许使用 JavaScript 代码触发父页面跳转。
使用postMessage() 方法： postMessage() 方法允许 iframe 与其父页面通信。iframe 中的代码可以使用 postMessage() 方法向父页面发送消息，然后父页面可以使用 JavaScript 代码执行跳转。
使用 history.replaceState() 方法： history.replaceState() 方法允许 iframe 中的代码修改浏览器的历史记录，这可以绕过 Chrome 的父页面跳转屏蔽行为。

示例

以下是一个示例，演示了如何使用postMessage() 方法绕过 Chrome 的父页面跳转屏蔽行为：

// 在 iframe 中的页面
const parentOrigin = "https://example.com";
window.addEventListener("message", (event) => {
  if (event.origin === parentOrigin && event.data === "redirect") {
    parent.location.href = "https://new-website.com";
  }
});

// 在父页面中
const iframe = document.getElementById("my-iframe");
iframe.contentWindow.postMessage("redirect", parentOrigin);