socket.io+express實現聊天室的思考（三）

JerryZou 發布于2019-08-20 18:36 / 1128人閱讀

摘要：不過這種方案存在一個問題，就是無法發送圖片。尤其是對等標簽需要格外的注意。后端必須對前端傳過來的數據進行再次驗證。

這一篇文章主要是對 安全性 的思考，首先了解一下一些常見的網絡攻擊

xss跨站點腳本攻擊

XSS是注入攻擊的一種，其特點是不對服務器造成任何傷害，而是通過一些正常的站內交互途徑，發布含有js的攻擊代碼，如果服務器沒有沒有過濾或者轉義這些腳本，作為內容發布到了頁面上，其他用戶訪問這個頁面時會運行這些腳本

儲存型XSS

也叫作 持久性XSS，會把攻擊者的數據儲存在服務器端，攻擊行為將伴隨攻擊數據一直存在。
舉個栗子

攻擊者以一個普通用戶登錄進來，然后在輸入框提交以下數據

更多

攻擊者提交了這條帶標簽的數據，該條數據保存在數據庫中，而當用戶user登錄后點擊更多時，在 "abc.com" 所在的服務器上，攻擊者就可以竊取到user的sessionID。有了該sessionID，攻擊者在會話有效期內可以獲得user權限

反射型XSS

即被動的非持久性XSS,通過篡改頁面，誘騙用戶點擊帶攻擊代碼的鏈接。XSS代碼出現在URL中，作為輸入提交到服務器中，服務器解析后響應，XSS代碼隨著響應內容一起傳回瀏覽器，由瀏覽器解析執行XSS代碼，從而攻擊用戶。

DOM-XSS 在本次項目中的漏洞(部分)

完成demo后，我并沒有對用戶的輸入進行過濾然后嘗試了一下標簽的腳本注入發現：

結果：輕而易舉得到了用戶名。顯然,如果不做過濾想要得到用戶的密碼也是十分簡單的

解決方案

一. 將 innerHTML替換成 textContent

innerHTML和 textContent區別：

innerHTML 返回 HTML 文本。通常，為了在元素中檢索或寫入文本，人們使用innerHTML。但是，textContent通常具有更好的性能，因為文本不會被解析為HTML。此外，使用textContent可以防止 XSS 攻擊。

showImg("https://segmentfault.com/img/bVSsUD?w=570&h=425");
不過這種方案存在一個問題，就是無法發送圖片。我暫時也沒有一個好一點的思路，還請大家指教一下~
二. input輸入框登錄名驗證
var username = document.getElementById("username").value;
var legal = true,
    pattern = new RegExp("[<>`/?!%"]|~")
if (username.trim() != "") {
    if (pattern.test(username)) {
        alert("昵稱不能包含特殊字符:[<>`/?!%"]|~~")
            return false
        }
    else that.socket.emit("login", username)  //不為空，發起一個login事件并將輸入的昵稱發送到服務器
}
else {
    alert("昵稱不能為空")
    document.getElementById("username").focus() //否則輸入框獲得焦點
}
總結
總而言之，我們不能信任用戶的任何輸入，只要是需要用戶輸入的地方都需要做數據的驗證和過濾。尤其是對,等標簽需要格外的注意。
當然，僅僅前端做過濾是沒有用的，用戶可以繞過前端的驗證，將數據傳送到后端。后端必須對前端傳過來的數據進行再次驗證。

GPU云服務器云服務器 socket.io cdn socket.io webrtc socket.io socket.io webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84749.html

socket.io+express實現聊天室的思考（一）

摘要：但是需要注意的一點是協議是建立在協議基礎之上的，需要經過一次握手。所以連接的發起方仍是客戶端。是一個簡潔而靈活的應用框架提供一系列強大特性幫助你創建各種應用。這也是為什么要采用協議來實現聊天室的原因。從開始寫到完善差不多斷斷續續差不多半個月時間，雖然還沒有打到想要的效果但還是階段性總結一下。（下一步加入打算視頻通訊功能）本文默認你已掌握 node 相關基礎知識 GitHub地址：ht...

fjcgreat 2019-08-21 12:00 評論0 收藏0
socket.io+express實現聊天室的思考（二）

摘要：優化聊天室的一些新的技巧調色盤調用效果圖如下打開新頁面圖片預覽優化聊天室的一些新Get的技巧調色盤調用效果圖如下：showImg(https://segmentfault.com/img/bVSksq?w=558&h=454); 打開新Tab頁面圖片預覽 _DisplayImage:(user,imgData,color)=>{ var userMsg=document...

付永剛 2019-08-01 17:22 評論0 收藏0
socket.io+express實現聊天室的思考（二）

摘要：優化聊天室的一些新的技巧調色盤調用效果圖如下打開新頁面圖片預覽優化聊天室的一些新Get的技巧調色盤調用效果圖如下：showImg(https://segmentfault.com/img/bVSksq?w=558&h=454); 打開新Tab頁面圖片預覽 _DisplayImage:(user,imgData,color)=>{ var userMsg=document...

weakish 2019-08-20 18:34 評論0 收藏0
手把手教你擼一個網頁聊天室

摘要：前端邏輯搞定之后，思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件，這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數，即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。一些廢話:) 最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想...

nemo 2019-08-20 12:34 評論0 收藏0
手把手教你擼一個網頁聊天室

摘要：前端邏輯搞定之后，思考一下這個聊天室的交互是怎么實現的。在前端監聽一個事件，這個事件的觸發條件是成功和服務端建立連接。攜帶一個參數，即用戶的輸入。別人發送的消息現在就需要在前端建立一個響應服務端有新消息的監聽事件了。一些廢話:) 最近在學校比較閑，終于有這么一塊時間可以自由支配了，所以內心還是十分的酸爽舒暢的。當然了，罪惡的事情也是有的，比如已經連續一周沒有吃早飯了，其實現在回頭想想...

leiyi 2019-08-01 16:00 評論0 收藏0