# 点击劫持

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

```jsx
<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>` 移除。

像这样：

```jsx
<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>
```

## cookie samesite

cookie的samesite字段本来是用于防御跨站点请求伪造攻击的，但是在这里也可以用于防御点击劫持。

samesite有以下取值：

1. strict： Cookies 只会在第一方上下文中发送，不会与第三方网站发起的请求一起发送。
2. lax： Cookies 允许与顶级导航一起发送，并将与第三方网站发起的 GET 请求一起发送。这是浏览器中的默认值
3. none：Cookie 将在所有上下文中发送，即允许跨站发送。

strict模式最为严格，必须是同源才会发送cookie，这会导致一些问题，例如用户从搜索引擎页面点击链接进入到网站里，由于搜索页和网站不是同源，因此存储该网站的cookie不会被发送。

Lax相对宽松，该方法可以防止跨站点请求伪造攻击，并且不会破坏用户体验。

宽松（lax）模式，和 `strict` 模式类似，当从外部来到网站，则禁止浏览器发送 cookie，但是增加了一个例外。

如果以下两个条件均成立，则会发送含 `samesite=lax` 的 cookie：

1.  HTTP 方法是“安全的”（例如 GET 方法，而不是 POST）。

    所有安全的 HTTP 方法详见 [RFC7231 规范](https://tools.ietf.org/html/rfc7231)。基本上，这些都是用于读取而不是写入数据的方法。它们不得执行任何更改数据的操作。跟随链接始终是 GET，是安全的方法。
2.  该操作执行顶级导航（更改浏览器地址栏中的 URL）。

    这通常是成立的，但是如果导航是在一个 `<iframe>` 中执行的，那么它就不是顶级的。此外，用于网络请求的 JavaScript 方法不会执行任何导航，因此它们不适合。

samesite最大的缺点是有兼容性问题，在老版本的浏览器中不支持。

## 参考

[Cookie，document.cookie (javascript.info)](https://zh.javascript.info/cookie#samesite)

[点击劫持攻击 (javascript.info)](https://zh.javascript.info/clickjacking)

[SameSite cookies - HTTP | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie/SameSite)
