Shared Text Content - XSS Safe

Question

I have a bulletin on my site that all valid users have access to (read and write). User input posted to this bulletin is stored in JSON. Because of these qualities there is definitely some concern for XSS. Im hoping to figure out the best way to protect my app and its users when using this feature.

Some thoughts:

Validation - because this is a bulletin/message board I would prefer to allow users access to any character they can type. One user might need to say Boss says "Specials for ages < 12 & > 65 are as follows...". Because of my requirements, validation does not seem possible.

Sansitization - this has the same issues as validation, we would lose functionality.

Encoding - Im fairly new to this and do not know how one might encode user input to make it safe within the DOM (or JSON). If this is the preferred route I am interested in links to documentation or examples.

More Context:

I am adding to the content by doing something similar to the following; where obj is the full entry and message is the user supplied input.

var body = $('<p>').text(obj.message);

Because I am only adding user input in the text context does that mean I can avoid concern?

Lastly, I am newer to using JSON to store user supplied info. I have not been able to find much on JSON security but if you have any topics related to the above, I would appreciate links to documentation.

EDIT: a user here said the following:

Note that this function also does the reverse - so calling it on already escaped data will result in it being unescaped which can inadvertently result in an XSS

Is this correct?

Answer 1

JSON is merely a data interchange format, and has no inherent "vulnerabilities" of its own.

Also fortunately for you, the text takes the input and renders it as plain text in the given element. As a result there is no concern for XSS. Note though that it is only the use of the text method that protects you. If later on you decide that you want to also inject your own formatting so do something like this:

var body = $('<p>').innerHTML = '<strong>' + obj.message + '</strong>';

Then you will absolutely end up with a stored XSS payload. This is one of the good reasons to use front end frameworks like Angular and React. They automatically handle output sanitization for you, so you don't have to worry about these things.

Finally, for completeness, sanitization/encoding are more or less the same thing, and are quite possible. You would just need to replace " ' < > & with their HTML equivalents, and that will work in 99.9% of cases. Still, it's even safer to use a framework that will handle those details for you.