socket.io+express实现聊天室的思考（三）

JerryZou 发布于2019-08-20 18:36 / 1130人阅读

摘要：不过这种方案存在一个问题，就是无法发送图片。尤其是对等标签需要格外的注意。后端必须对前端传过来的数据进行再次验证。

这一篇文章主要是对 安全性 的思考，首先了解一下一些常见的网络攻击

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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