实现实时聊天中的链接

Implementing links in realtime chat

本文关键字:链接 聊天 实时 实现      更新时间:2023-09-26

所以我正在与socket进行实时聊天。io和node.js,我有聊天和一切工作,但如果有人在聊天中链接一个网站,我希望它是一个超链接自动。

我正在使用autolinker.js来做到这一点,它正在制作我想要的链接,但我的问题是我输出消息以避免HTML注入的方式。

for(var x = data.length - 1; x >= 0; x--) {
    var autolinker = new Autolinker();
    var linkedText = autolinker.link(data[x].message);
    var message = document.createElement('div');
    var linkOfMessage;
    message.setAttribute('class', 'chat-message');
    //message.textContent = data[x].name + ': ';
    message.innerHTML = data[x].name + ': ' + linkedText;
    // Append
    messages.insertBefore(message, messages.firstChild);
    messages.appendChild(message);
    messages.scrollTop = messages.scrollHeight;
    }

所以消息得到正确处理,但与innerHTML,他们基本上可以使用脚本在我的聊天,这是不好的。但

message.textContent = data[x].name + ': ' + linkedText;

将只是显示我的超链接在纯文本没有它是可点击的,有没有办法做到这一点,而不设置网站的风险?

我花了几个小时到处找,没有找到任何与此相关的东西。

提前感谢!

您应该始终清理用户输入。您需要链接,因此您必须允许在消息中使用一些html标记,但您希望过滤掉大多数标记(有些是危险的,如脚本,有些可能会"破坏"您的聊天视觉效果)。尝试使用像

这样的包https://www.npmjs.com/package/sanitize-html

自己卷消毒液不是个好主意。像这样的包允许指定允许哪些标签,删除哪些标签,并有各种其他有用的选项。