如何将anchorme检测到的URL渲染为可点击超链接而非纯文本

问题根因 #

你使用的Mustache模板引擎默认会对双大括号{{ }}包裹的插值内容做HTML转义处理，避免XSS注入风险。因此服务端通过anchorme生成的<a>超链接标签会被转义为<a href="xxx">xxx</a>这类实体字符，浏览器会将其识别为普通文本渲染，不会生成可点击的超链接。

解决方案 #

1. 调整Mustache模板插值语法 #

将消息模板中用来渲染消息内容的双大括号改为三对大括号{{{ }}}，这是Mustache提供的非转义插值语法，会直接将内容作为HTML插入页面。
修改你的HTML模板代码如下：

<script id="message-template" type="text/html">
    <div class="message">
        <p>
            <span class="message__name">{{username}}</span>
            <span class="message__meta">{{createdAt}}</span>
        </p>
        <!-- 把{{message}}改成{{{message}}} -->
        <p>{{{message}}}</p>
    </div>
</script>

2. 优化服务端处理顺序（可选，建议调整） #

你当前的服务端逻辑是先转换链接再做敏感词校验，可能会出现敏感词隐藏在HTML标签内导致漏检的问题，建议调整顺序，先校验敏感词，通过后再转换链接：
修改服务端sendMsg事件处理代码如下：

socket.on('sendMsg', (message, callback) => {
    const user = getUser(socket.id)
    // 先做敏感词校验
    var filter = new Filter()
    if (filter.isProfane(message)) {
        return callback('Profanity is not allowed')
    }
    // 校验通过后再转换链接
    var result = anchorme(message, {
        attributes: [{
            name: "target",
            value: "_blank"
        }, ]
    });
    console.log(result)
    io.to(user.room).emit('message', generateMessage(user.username, result))
    callback()
})

补充说明 #

如果担心非转义插值带来的XSS注入风险，可以将anchorme的转换逻辑移到客户端，在渲染消息之前对纯文本内容做链接转换，同时搭配XSS过滤库处理恶意内容，进一步提升安全性。

内容的提问来源于stack exchange，提问作者Michael Evans