转义用户生成的聊天消息,但渲染链接

Question

用户输入聊天消息,使用Mustache模板直接呈现给页面.显然,HTML应该被转义以防止HTML注入,但是再次链接应该呈现为<a href='...'>.

我尝试使用不同的方法{{{ ... }}}来返回未转义的HTML内容,这意味着链接将被呈现,我需要处理HTML转义自己.有没有一种安全的方法可以做到这一点,而不依赖于我自己写的半生不熟的解决方案？

jQuery.text()会很棒,但我想它会<a>再次呈现为文本.

我还能在这做什么？

Answer 1

如果您不想编写自己的转义或解析解决方案,可以使用jQuery插件来处理名为Linkify的链接.您可以简单地转义消息,然后在客户端解析它们.

它的工作原理示例:

var text = "<div>Test<br>Test<br>Test http://stackoverflow.com</div>";
$('div').text(text);

// Before: &lt;div&gt;Test&lt;br&gt;Test&lt;br&gt;Test http://stackoverflow.com&lt;/div&gt;

$('div').linkify();

// After: lt;div&gt;Test&lt;br&gt;Test&lt;br&gt;Test <a href="http://stackoverflow.com" class="linkified" target="_blank">http://stackoverflow.com</a>&lt;/div&gt;