转义用户生成的聊天消息但呈现链接

Question

用户输入聊天消息，这些消息会使用 Mustache 模板直接呈现到页面上。显然，应该转义 HTML 以防止 HTML 注入，但是 links 应该再次呈现为 <a href='...'>.

我尝试使用不同的方法 {{{ ... }}} 来 return 未转义的 HTML 内容，这意味着 link 会被渲染，我需要照顾HTML逃避自己。有没有一种安全的方法可以做到这一点而不依赖于我自己编写的半生不熟的解决方案？

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

我还能在这里做什么？

Answer 1

只是一个想法：您可以构建自己的转义函数

escape : function () {
    return function(val, render) {
        var $s = $(val);
        var $elements = $s.find("*").not("a"); //add other white-listed elements seperated by comma 
        for (var i = $elements.length - 1; i >= 0; i--) {
            var e = $elements[i];
            $(e).replaceWith(e.innerHTML);
        }
        return $s.html();
    }
}

您可以通过

调用函数

{{#escape}}{{{YOUR_TEXT}}}{{/escape}}

我还没有测试过这个。此解决方案需要 jQuery。上面的代码基于这个解决方案：

Answer 2

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

工作原理示例：

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

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

$('div').linkify();

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

Answer 3

尝试先在 .text() 中插入，然后使用正则表达式渲染 link 和 .html()。在这里你可以看到一个普通的例子：

var a="see formula a<b>c in http://test.com or https://x.com?p=3";

var hold=document.createElement('div');
hold.textContent=a;

hold.innerHTML=hold.innerHTML.replace(
    /(https?:\/\/[-$A-Za-z0-9%_?&.~+\/=]+)/g,
    '<a href=""></a>'
);

window.addEventListener('load',function(){
    document.body.appendChild(hold);
});

要获得更准确的正则表达式，您可以查看 here

Answer 4

如果您最终使用 regex 路由，则以下过滤器和 regex 是我发现的最激进的过滤器，用于获取您的用户将尝试输入的各种 url。

这里是一个正则表达式来玩弄它：http://regexr.com/3bjk9

(function () {
    'use strict';

    angular
        .module('core.filters')
        .filter('urlToA', urlToA);

    // --------------------

    function urlToA () {
        return function (string, noClick) {
            var urlPattern = /((?:(http|https|Http|Https|rtsp|Rtsp):\/\/(?:(?:[a-zA-Z0-9$\-\_\.\+\!\*\'\(\)\,\;\?\&\=]|(?:\%[a-fA-F0-9]{2})){1,64}(?:\:(?:[a-zA-Z0-9$\-\_\.\+\!\*\'\(\)\,\;\?\&\=]|(?:\%[a-fA-F0-9]{2})){1,25})?\@)?)?((?:(?:[a-zA-Z0-9][a-zA-Z0-9\-]{0,64}\.)+(?:(?:aero|arpa|asia|a[cdefgilmnoqrstuwxz])|(?:biz|b[abdefghijmnorstvwyz])|(?:cat|com|coop|c[acdfghiklmnoruvxyz])|d[ejkmoz]|(?:edu|e[cegrstu])|f[ijkmor]|(?:gov|g[abdefghilmnpqrstuwy])|h[kmnrtu]|(?:info|int|i[delmnoqrst])|(?:jobs|j[emop])|k[eghimnrwyz]|l[abcikrstuvy]|(?:mil|mobi|museum|m[acdghklmnopqrstuvwxyz])|(?:name|net|n[acefgilopruz])|(?:org|om)|(?:pro|p[aefghklmnrstwy])|qa|r[eouw]|s[abcdeghijklmnortuvyz]|(?:tel|travel|t[cdfghjklmnoprtvwz])|u[agkmsyz]|v[aceginu]|w[fs]|y[etu]|z[amw]))|(?:(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9])\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[0-9])))(?:\:\d{1,5})?)(\/(?:(?:[a-zA-Z0-9\;\/\?\:\@\&\=\#\~\-\.\+\!\*\'\(\)\,\_])|(?:\%[a-fA-F0-9]{2}))*)?(?:\b|$)/gi; // jshint ignore:line

            return string ? string.replace(urlPattern, replace) : string;

            function replace (url) {
                var httpUrl = url.indexOf('http') === -1 ? 'http://' + url : url;

                if (noClick) {
                    return '<a>' + url + '</a>';
                } else {
                    return '<a href="' + httpUrl + '">' + url + '</a>';
                }
            }
        };
    }

})();

转义用户生成的聊天消息但呈现链接

Escape user-generated chat messages but render links

html

javascript

jquery

escaping

mustache