在实时聊天中实现链接

Posted 2023-04-18

【中文标题】在实时聊天中实现链接

【英文标题】：Implementing links in realtime chat

【发布时间】：2015-11-19 00:34:47

【问题描述】：

所以我正在与 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;

只会以纯文本形式显示我的超链接而不可点击，有没有办法做到这一点而不会使网站处于危险之中？

我花了几个小时环顾四周，找不到与此相关的任何内容。

提前致谢！

【参考方案1】：

您应该始终清理用户输入。您需要链接，因此您必须在消息中允许一些 html 标签，但您希望过滤掉其中的大部分（有些是危险的，例如脚本，有些可能会“损坏”您的聊天视觉效果）。尝试使用诸如

之类的软件包

https://www.npmjs.com/package/sanitize-html

自行推出消毒剂不是一个好主意。像这样的包允许指定允许哪些标签，删除哪些标签以及其他各种有用的选项。

【讨论】：

这个包似乎工作正常，你可以选择你允许的标签。