PSA: You should sanitize user input
SixBeeps (1308)

If I had a nickel for the amount of chat rooms I've used that simply don't sanitize, well, I'd have at least 15 cents. That's not a lot of nickels, but it's 3 nickels too many.

What even is sanitation?

When you have an application like a chat room, you have the user input what they'd like to send, then display it for everyone else to see. Now, usually this is text, but if left unsanitized, they could just as easily send over some HTML code too. This doesn't sound too bad until you realize you can also send over JavaScript code as well. That's not good.

So, to prevent this, the programmer should sanitize their user input. Sanitation is the process of turning some HTML code into something that doesn't get parsed as HTML. There are many ways of doing this.

The hacky way

The hacky way involves replacing characters in a user's message. There are characters that look like the greater-than and less-than signs (> and < respectively) that won't get turned into HTML tags. Feel free to copy and paste these into your project.

‹›

The efficient way

JS has three similar values for tags: innerHTML, innerText, and textContent (thank you @AdCharity for telling me about this). If you can, use either innerText or textContent because your browser will force this value to not be turned into HTML.

The reason why you wouldn't want to use this is if you weren't using innerHTML in the first place. I don't see any other way than to use these two, but you never know ¯\_(ツ)_/¯

Wrapup

For the last time, SANITIZE

Edit: Relevant xkcd

You are viewing a single comment. View All
AdCharity (1112)

@SixBeeps ... Replace all characters with their approprite character entity. You could do so using:

function makeEntities(rawStr) {
    return rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
    return '&#'+i.charCodeAt(0)+';';
    });
}
//credits to... some guy on my team did it