检测到iFrame时重定向子页面失效的问题排查

嘿，我来帮你排查下这个问题！你已经正确检测到了iframe环境，但重定向没生效，咱们一步步来分析：

首先先把你的代码整理出来，方便参考：

点击劫持测试页面代码 #

<html>
<head>
<title>Clickjack test page</title>
</head>
<body>
<p>Website is not vulnerable to clickjacking.</p>
<iframe src="../page1" width="500" height="500" id="iframe"></iframe>
</body>
</html>

page1.html中的脚本 #

<script type="text/javascript">
console.log(window.location != window.parent.location);
if(window.location != window.parent.location){
    console.log("iFrame Detected");
    window.location.replace("redirectMessage.html");
    window.location.href = "redirectMessage.html";
    console.log("after redirect");
} else {
    // no iframe
}
</script>

问题现象 #

控制台已经输出了iFrame Detected和after redirect，说明条件判断逻辑没问题，但iframe内的页面就是没跳转到redirectMessage.html。

可能的原因&解决方案 #

1. 冗余的跳转代码冲突

你同时使用了window.location.replace()和window.location.href来触发跳转，这两个操作的逻辑不一样：

• replace()会替换当前页面的历史记录，不会留下后退痕迹
• 设置href会在历史记录中添加新条目

同时执行这两个操作可能会让浏览器的跳转逻辑混乱，导致其中一个被覆盖或者失效。只保留其中一种跳转方式即可：

修改后的脚本：

<script type="text/javascript">
console.log(window.location !== window.parent.location);
if (window.location !== window.parent.location) {
    console.log("iFrame Detected");
    // 二选一即可，这里用href示例
    window.location.href = "redirectMessage.html";
    console.log("after redirect");
} else {
    // no iframe
}
</script>

2. 相对路径错误

检查redirectMessage.html的路径是否正确：

• 你的iframe引用的是../page1，说明page1位于测试页面的上一级目录
• 如果redirectMessage.html和page1在同一个目录，那当前路径是对的；如果它在测试页面的目录下，你需要调整路径为./redirectMessage.html或者使用绝对路径

用绝对路径可以彻底避免相对路径的坑：

window.location.href = window.location.origin + "/redirectMessage.html";

3. 脚本执行时机问题

如果你的脚本放在page1的<head>标签里，可能在页面尚未完全解析完成时就执行了跳转，部分浏览器可能会忽略这个操作。可以把脚本放在<body>的末尾，或者用DOMContentLoaded事件包裹，确保页面加载完成后再执行：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    console.log(window.location !== window.parent.location);
    if (window.location !== window.parent.location) {
        console.log("iFrame Detected");
        window.location.href = "redirectMessage.html";
        console.log("after redirect");
    }
});
</script>

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