拖拽劫持怎么防?加了X-Frame-Options还是被绕过?
最近在做上传功能,用户可以拖拽文件到页面区域上传。但安全扫描说存在「拖拽劫持」风险——攻击者用透明 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 设为可拖拽目标,用户还是可能误操作……前端有办法彻底阻止这种拖拽劫持吗?
frame-ancestors,再加上检测拖拽事件的源头。建议在 dragenter 和 dragover 时检查 event.dataTransfer.types,排除可疑类型。差不多就行,别想完全杜绝,重点是让用户意识到风险。