点击劫持Self检测为啥没生效？

Designer°一诺提问于 2026-03-02 09:37:18 阅读 9

安全

我按照网上教程加了点击劫持的Self检测，但嵌套在iframe里还是能正常加载，根本没被拦截。是我写法有问题吗？

我试过在页面顶部加这段CSS：

body {
  display: block !important;
}
body:has(iframe) {
  display: none !important;
}

但好像完全没用，iframe照样显示内容。是不是这个方案本身就有问题？还是浏览器不支持？

Self检测

我来解答赞 5 收藏

反馈

1 条解答

Mc.光耀 Lv1

你这个CSS检测的逻辑搞反了。

body:has(iframe) 是在找"body里面包含iframe的情况"，但你的页面是被嵌套在别人的iframe里，你的body里根本没有iframe，是别人的页面里有iframe装着你的页面。所以这个选择器永远不会命中。

正确的CSS防护思路是：默认隐藏页面，只有检测到不在iframe中才显示。但纯CSS做不到这个检测，必须配合JS。

给你一个优雅的写法：

先在CSS里默认隐藏：

html {

  display: none;

}

然后在head里加这段JS，要放在最前面：

if (self === top) {

  document.documentElement.style.display = 'block';

} else {

  top.location = self.location;

}

原理很简单：默认把html藏起来，如果当前窗口就是顶层窗口（没有被嵌套），就显示出来；否则直接跳转到自己的地址，把父框架给顶掉。

不过说实话，现在更推荐用HTTP响应头来防，一劳永逸。配置一下 X-Frame-Options: DENY 或者 Content-Security-Policy: frame-ancestors 'none'，服务器层面就拦住了，不依赖前端JS，更可靠。

2026-03-02 10:05