prevent Xss using encoding, but user readability is so poor

Question

To protect the xss attack I try to encode every messages which I want to display to user using below function.

function encodeRFC5987ValueChars(str) 
{
    return encodeURIComponent(str).
        // Note that although RFC3986 reserves "!", RFC5987 does not,
        // so we do not need to escape it
        replace(/['()]/g, escape). // i.e., %27 %28 %29
        replace(/\*/g, '%2A').
            // The following are not required for percent-encoding per RFC5987, 
            // so we can allow for a little better readability over the wire: |`^
            replace(/%(?:7C|60|5E)/g, unescape);
}

Example input message is like below

Start 20 TV's test; star ;; '' -- testagain., comma. </>

The output message I received from this function is like below.

Start%2020%20TV%27s%20test%3B%20star%20%3B%3B%20%27%27%20--%20testagain.%2C%20comma.%20%3C%2F%3E

I try to display like below.

 document.getElementById("labelResult").innerHTML = "Start%2020%20TV%27s%20test%3B%20star%20%3B%3B%20%27%27%20--%20testagain.%2C%20comma.%20%3C%2F%3E";

Everything work fine, but user readability is very very poor.
Do i need to decode? If I decoded, then I afraid it will lead to xss attack?

Any suggestion please.

I wouldn't use `encodeURIComponent` to escape strings, the amount of things it'll replace is super overkill. Take a look at this question/answers: http://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript — Joe Clay, Apr 05 '16 at 10:51

score 0 · Answer 1 · answered Apr 05 '16 at 10:51

0

You are inserting data into HTML, not into a URL.

To defend against XSS you need to properly encode it for HTML. encodeURIComponent shouldn't be anywhere near this.

var textNode = document.createTextNode("Start 20 TV's test; star ;; '' -- testagain., comma. </>");
document.getElementById("labelResult").innerHTML = ""; // Erase existing content
document.getElementById("labelResult").appendChild(textNode);

There might be a vector for XSS in whatever method you use to take Start 20 TV's test; star ;; '' -- testagain., comma. </> as user input and put it into the JavaScript … but you haven't shown us how you do that.

answered Apr 05 '16 at 10:51

Quentin

914,110
126
1,211
1,335

Let's assume that user key in that messages which have to be kept in my database. Before saving to DB, I encoded it and save it into DB. When user want to see data back, I have to retrieve and display back to user. Thank. – Frank Myat Thu Apr 05 '16 at 10:58
Don't encode it before putting it into the database (to prevent SQL Injection use prepared statements and bound variables). How you encode it before putting it into the page depends on the method you are using to get it out of the database and to the page. Putting it in an HTML attribute when the page loads? Generating raw JavaScript in a script element with the page loads? Getting it later with XMLHttpRequest and returning it as plain text? Three different techniques to get it out and three different techniques needed to defend against SQL Injection. – Quentin Apr 05 '16 at 11:53

prevent Xss using encoding, but user readability is so poor

1 Answers1