Double escaping angle bracelet and ampersand

Question

I applied this answer in project, I need to escape both at client and server:

function replaceTag(tag) {
        var tagsToReplace = {
            "&": "&amp;",
            "<": "&lt;",
            ">": "&gt;"
        };
        return tagsToReplace[tag] || tag;
    }

    function safe_tags_replace(str) {
        var self = this;
        return str.replace(/[&<>]/g, self.replaceTag);
    }
    
    var result = safe_tags_replace(">");
    result = safe_tags_replace(result);
    console.log(result);

How can I make special character > is "escaped" to > instead of &gt;

Why do you think you need to call `safe_tags_replace` twice? That's why you have double escaping...? — James Thorpe, Jan 25 '16 at 08:56
First of all, why do you think you need this on both the client and the server? Typically you'd handle this on the server only. — Patrick Roberts, Jan 25 '16 at 08:57
@PatrickRoberts it is chat application, and sender also should display message at his screen, but if it is hacked then I should also escape at server — asdf_enel_hak, Jan 25 '16 at 08:59
Then what would be the purpose of doing it server side if it's just for rendering ? — Denys Séguret, Jan 25 '16 at 09:00
For displaying messages on a client, assign to `element.textContent` or use `document.createTextNode()`, there's no need to do this. — Patrick Roberts, Jan 25 '16 at 09:00

score 0 · Answer 1 · answered Jan 25 '16 at 09:13

There's no need to reinvent the wheel here. If you just need to display text without rendering HTML, use a built-in escape mechanism like this:

var
  input = document.getElementById('input'),
  chat = document.getElementById('chat');

input.addEventListener('keypress', function(event) {
  if ((event.keyCode || event.which) === 13) {
    var msg = document.createElement('div');

    msg.textContent = input.value;
    // msg.appendChild(document.createTextNode(input.value));

    input.value = '';

    chat.appendChild(msg);
  }
});

<div id="chat"></div>
<input id="input" type="text" value="&lt;script&gt;alert('dangerous');&lt;/script&gt;"/>

Press Enter and see what happens. I dare you.

score -1 · Accepted Answer · answered Jan 25 '16 at 09:01

-1

Try this regex:

/[<>]|&(?!amp;|gt;|lt;)/g

using it like this:

str.replace(/[<>]|&(?!amp;|gt;|lt;)/g, self.replaceTag);

answered Jan 25 '16 at 09:01

jcubic

61,973
54
229
402

@asdf_enel_hak Use this regex in `str.replace`, I've updated the code. It will replace `&` only if not followed by `amp;` `gt;` or `lt;`. – jcubic Jan 25 '16 at 09:07

Double escaping angle bracelet and ampersand

2 Answers2