javascript - 如何在 iframe 中实现 Frame Buster Javascript

Question

我看到这段代码可以帮助解决 iframe 中的点击劫持问题

<style> 
  html { display : none; } 
</style>

<script>
  if( self == top ) {
    document.documentElement.style.display = 'block';
  } else {
    top.location = self.location ;
  }
</script>

我不明白它是如何解决问题的？为什么 self == top 会解决它？

我可以使用 ALLOW-FROM header 还是建议同时使用这两种方法？

Answer 1

为了便于讨论，Mallary 的页面是包含 <iframe> 的页面元素，Bob 的页面就是放在框架中的页面。

I didn't understand how does it solve the problem?

如果 Mallary 一开始就不能将 Bob 的页面保存在一个框架中，那么她就无法点击劫持 Bob 的页面。

当然，这确实要求clickjack 攻击完全依赖于运行JS 的Bob 页面，否则Mallary 可以sandbox所以它的 JavaScript 都没有运行。

why self == top will solve it ?

不是。

top.location = self.location;导致浏览器离开 Mallary 的页面并在浏览器顶层加载 Bob 的页面。

self == top阻止浏览器离开 Bob 的页面并在其位置加载 Bob 的页面:即它防止重新加载的无限循环。

Can I use the ALLOW-FROM header or the recommendation is to use both approach ?

X-Frame-Options是停止将页面加载到框架中的更有效且破坏性更小的方法。 A CSP是 X-Frame-Options 的更灵活的替代品.

我会使用它们而不是像这样的 JavaScript hacks。