拖拽劫持怎么防?加了X-Frame-Options还是被绕过?

Good“嘉木 阅读 3

最近在做上传功能,用户可以拖拽文件到页面区域上传。但安全扫描说存在「拖拽劫持」风险——攻击者用透明 iframe 覆盖在我们页面上,诱导用户把敏感文件拖进恶意区域。我试了加 X-Frame-Options: DENY 响应头,但好像只防点击劫持,对拖拽没用?

也试过用 CSS 禁止拖拽穿透,但不确定是否有效。比如下面这段:

.upload-zone {
  pointer-events: auto;
  position: relative;
  z-index: 10;
}
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 9999;
}

但测试时发现如果攻击页面把我们的 iframe 设为可拖拽目标,用户还是可能误操作……前端有办法彻底阻止这种拖拽劫持吗?

我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
W″雨欣
嗯,这问题确实头疼。除了 X-Frame-Options,还得用 CSP 策略限制 frame-ancestors,再加上检测拖拽事件的源头。建议在 dragenter 和 dragover 时检查 event.dataTransfer.types,排除可疑类型。

document.querySelector('.upload-zone').addEventListener('dragover', function(e) {
if (!e.dataTransfer.types.includes('Files')) e.preventDefault();
});


差不多就行,别想完全杜绝,重点是让用户意识到风险。
点赞
2026-03-30 22:07