点击劫持

点击劫持是指在透明的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>

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

samesite有以下取值：

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

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

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

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

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

HTTP 方法是“安全的”（例如 GET 方法，而不是 POST）。
该操作执行顶级导航（更改浏览器地址栏中的 URL）。
这通常是成立的，但是如果导航是在一个 <iframe> 中执行的，那么它就不是顶级的。此外，用于网络请求的 JavaScript 方法不会执行任何导航，因此它们不适合。

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

参考

上一页跨站点请求伪造(CSRF)下一页中间人攻击

最后更新于1年前

点击劫持

<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

像这样：

<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字段本来是用于防御跨站点请求伪造攻击的，但是在这里也可以用于防御点击劫持。

samesite有以下取值：

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

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

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

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

HTTP 方法是“安全的”（例如 GET 方法，而不是 POST）。
所有安全的 HTTP 方法详见。基本上，这些都是用于读取而不是写入数据的方法。它们不得执行任何更改数据的操作。跟随链接始终是 GET，是安全的方法。
该操作执行顶级导航（更改浏览器地址栏中的 URL）。
这通常是成立的，但是如果导航是在一个 <iframe> 中执行的，那么它就不是顶级的。此外，用于网络请求的 JavaScript 方法不会执行任何导航，因此它们不适合。

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

参考

上一页跨站点请求伪造(CSRF)下一页中间人攻击

最后更新于1年前

防护措施

X-Frame-Options

top === window

cookie samesite

参考

防护措施

X-Frame-Options

top === window

cookie samesite

参考