Escape user-generated chat messages but render links

Question

User enter chat messages, which gets rendered directly to the page using Mustache templates. Obviously, HTML should be escaped to prevent HTML injection, but then again links should be rendered as <a href='...'>.

There are different approaches I've tried to use {{{ ... }}} to return the unescaped HTML content, which means the link would get rendered and I need to take care of HTML escaping myself. Is there a safe way of doing that without relying on a half-baked solution I write myself?

jQuery.text() would be great, but I guess it will render the <a> again as text.

What else can I do here?

What do you think about using different kind of markup for links in chat, such as BBCode or Markdown? This is how it usually works on various discussion boards as well as here. — JacobMiki, Aug 10 '15 at 10:13
@JacobMiki But this is not about establishing a general syntax for markdown, but just to render links. Facebook Chat doesn't need that either. — Mahoni, Aug 10 '15 at 10:15
But Facebook chat doesn't require users to use tags for links. Maybe I didn't understand correctly what do you want to do. Do you want users to enter tags or just wrap links like Facebook chat does? — JacobMiki, Aug 10 '15 at 10:19

score 10 · Accepted Answer · answered Aug 10 '15 at 10:32

If you don't want to write your own escaping or parsing solution there is a jQuery plugin to handle links called Linkify. You could simply escape messages and then parse them client-side.

Example of how it works:

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;

score 0 · Answer 2 · edited May 23 '17 at 12:22

Just an idea: You could build your own escaping function

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();
    }
}

You can call the function by

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

I have not tested this. This solution needs jQuery. The code above is based on this solution: https://stackoverflow.com/a/27764431/1479486

score 0 · Answer 3 · edited May 23 '17 at 12:14

0

try inserting first in .text() and then use regexp for render the link with .html(). Here you can see a vanilla example:

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="$1">$1</a>'
);

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

For a more acurate regexp you can see here

edited May 23 '17 at 12:14

Community

1
1

answered Aug 13 '15 at 16:20

Emilio Platzer

2,327
21
29

1

[Here](https://mathiasbynens.be/demo/url-regex) you can see more alternatives por the regexp – Emilio Platzer Aug 13 '15 at 18:16

score 0 · Answer 4 · answered Aug 17 '15 at 07:30

If you end up going down the regex route the following filter and regex was the most aggressive one i found for picking up all kinds of urls that your users will try to type.

Heres a regexr to play around with it: 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

4 Answers4