点击劫持

点击劫持是指在透明的iframe嵌入受害网站，然后在iframe底部添加一些诱导链接诱导用户点击，表面上用户是点击了该网站的链接，实际上是点击了iframe网站中的链接。


<style>
iframe { /* 来自受害网站的 iframe */
  width: 400px;
  height: 100px;
  position: absolute;
  top:0; left:-20px;
  opacity: 0.5; /* 在实际中为 opacity:0 */
  z-index: 1;
}
</style>

<div>点击即可变得富有：</div>

<!-- 来自受害网站的 url -->
<iframe src="/clickjacking/facebook.html"></iframe>

<button>点这里！</button>

<div>……你很酷（我实际上是一名帅气的黑客）！</div>

防护措施

X-Frame-Options

服务器端 header X-Frame-Options 可以允许或禁止在 frame 中显示页面。

它必须被完全作为 HTTP-header 发送：如果浏览器在 HTML <meta> 标签中找到它，则会忽略它。因此，<meta http-equiv="X-Frame-Options"...> 没有任何作用。

这个 header 可能包含 3 个值：

DENY始终禁止在 frame 中显示此页面。

SAMEORIGIN允许在和父文档同源的 frame 中显示此页面。

ALLOW-FROM domain允许在来自给定域的父文档的 frame 中显示此页面。

X-Frame-Options 可以预防点击劫持，但是可能会导致某些有正当理由的网站无法嵌入我们的网站。

top === window

另一种方法是通过判断window是否在最顶层来确定页面是否被嵌入到其他网站上，我们可以用一个样式为 height: 100%; width: 100%; 的 <div> “覆盖”页面，这样它就能拦截所有点击。如果 window == top 或者我们确定不需要保护时，再将该 <div> 移除。

像这样：


<style>
  #protector {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999999;
  }
</style>

<div id="protector">
  <a href="/" target="_blank">前往网站</a>
</div>

<script>
  // 如果顶级窗口来自其他源，这里则会出现一个 error
  if (top.document.domain == document.domain) {
    protector.remove();
  }
</script>