如何拦截不可控iframe对父页面的重定向并自定义跳转？

核心思路 #

通过代理顶层页面的window.location对象，拦截iframe发起的顶层重定向请求，解析出真实目标URL后直接跳转，绕过Figma的警告页。

实现代码 #

在顶层页面的<head>中添加以下脚本（需在iframe加载前执行）：

// 保存原始location对象，避免循环拦截
const originalLocation = window.location;

// 处理重定向逻辑的工具函数
function handleFigmaRedirect(url) {
    // 匹配Figma的重定向警告页URL（根据实际情况调整特征）
    const figmaRedirectPattern = /figma\.com\/(redirect|leave-site)\?/;
    if (figmaRedirectPattern.test(url)) {
        const redirectUrl = new URL(url);
        // 提取真实目标URL（Figma通常用url参数传递）
        const targetUrl = redirectUrl.searchParams.get('url');
        if (targetUrl) {
            // 跳转到真实目标，使用原始location避免触发代理拦截
            originalLocation.href = targetUrl;
            return true;
        }
    }
    return false;
}

// 用Proxy包装location，拦截href赋值和replace方法
window.location = new Proxy(originalLocation, {
    set(target, prop, value) {
        if (prop === 'href') {
            if (!handleFigmaRedirect(value)) {
                // 非Figma重定向，执行原始逻辑
                target.href = value;
            }
            return true;
        }
        target[prop] = value;
        return true;
    },
    get(target, prop) {
        if (prop === 'replace') {
            return function(url) {
                if (!handleFigmaRedirect(url)) {
                    target.replace(url);
                }
            };
        }
        // 其他属性/方法返回原始值
        return target[prop];
    }
});

关键说明 #

1. 拦截逻辑：通过Proxy监听location.href的赋值和replace方法调用，一旦检测到Figma的重定向警告页URL，就解析出真实跳转目标。
2. 绕过警告：直接使用原始location对象跳转，避免触发Figma的警告页逻辑，同时不会出现beforeunload的确认弹窗。
3. 适配调整：如果Figma的警告页URL结构变化，只需修改figmaRedirectPattern正则表达式即可。
4. 安全建议：可以添加目标URL白名单，只允许跳转到可信域名，防止恶意跳转。

最终iframe代码 #

保持原有嵌入代码不变即可：

<iframe src="your-figma-embed-url"></iframe>

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