JavaScript教程：深入理解Clickjacking攻击与防御

JavaScript教程：深入理解Clickjacking攻击与防御

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

Clickjacking（点击劫持）是一种常见的Web安全威胁，它通过欺骗用户在不知情的情况下点击恶意页面上的透明或伪装的元素，从而在受害者网站上执行非预期的操作。本文将深入探讨这种攻击的原理、实现方式以及有效的防御策略。

Clickjacking攻击原理

Clickjacking攻击的核心思想是利用iframe的透明特性，将目标网站的交互元素（如按钮）覆盖在诱骗用户点击的内容之上。当用户认为自己点击的是可见内容时，实际上点击的是透明iframe中的元素。

典型攻击流程

1. 攻击者创建恶意页面，包含诱人的内容（如"立即致富"按钮）
2. 在诱人内容上方放置透明iframe，加载目标网站（如Facebook）
3. 精心调整iframe位置，使目标按钮（如"点赞"）与诱人内容重叠
4. 用户点击可见内容时，实际触发的是iframe中的操作

<style>
iframe {
  width: 400px;
  height: 100px;
  position: absolute;
  top:0; left:-20px;
  opacity: 0; /* 完全透明 */
  z-index: 1;
}
</style>

<div>点击立即致富：</div>
<iframe src="facebook.html"></iframe>
<button>点击这里！</button>

传统防御方式及其局限性

Frame Busting技术

早期防御方法是使用JavaScript检测页面是否被嵌套在iframe中：

if (top !== window) {
  top.location = window.location;
}

这种方法存在明显缺陷，攻击者可以通过多种方式绕过：

1. 阻止top导航：通过beforeunload事件拦截页面跳转
2. Sandbox属性限制：使用sandbox属性禁止iframe修改top.location

// 攻击者页面代码
window.onbeforeunload = function() {
  return false; // 阻止导航
};

<!-- 使用sandbox限制 -->
<iframe sandbox="allow-scripts allow-forms" src="facebook.html"></iframe>

现代防御策略

X-Frame-Options HTTP头

最可靠的防御方式是使用X-Frame-OptionsHTTP响应头，它有三种取值：

• DENY：禁止在任何frame中显示
• SAMEORIGIN：只允许同源frame
• ALLOW-FROM domain：允许指定域的frame

X-Frame-Options: SAMEORIGIN

注意：此头必须通过HTTP响应发送，HTML中的<meta>标签无效。

覆盖层防御技术

对于需要允许特定frame展示的情况，可以使用覆盖层技术：

<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>
  if (top.document.domain === document.domain) {
    document.getElementById('protector').remove();
  }
</script>

SameSite Cookie属性

设置SameSite属性的cookie不会被iframe中的请求发送：

Set-Cookie: sessionid=123; SameSite=Strict

这种方式能有效防止需要认证的操作被劫持，但对公开页面无效。

Clickjacking攻击的特点

1. 仅影响鼠标操作：难以劫持键盘输入
2. 依赖视觉欺骗：需要精确控制元素位置
3. 可扩展性：可引导用户进行一系列非预期操作

防御建议总结

1. 对敏感操作使用X-Frame-Options: SAMEORIGIN
2. 对需要嵌入的页面实现覆盖层保护
3. 为会话cookie设置SameSite属性
4. 对关键操作添加二次确认
5. 定期进行安全审计，测试潜在风险

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info