PSA: You should sanitize user input
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?
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:
textContent (thank you @AdCharity for telling me about this). If you can, use either
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 ¯\_(ツ)_/¯
For the last time, SANITIZE
Edit: Relevant xkcd
I'd say the best form of sanitation is to use .textContent . Basically the html tags show but don't do crap.
a good service that can sanitise inputs and can even block attackers is sqreen.com.
beware: enable all other options BUT CSP (Content Security Protection) unless you want no JS or CSS.
@SixBeeps regex matches patterns regardless of content... there’s probably not a one size fits all regex but I would probably just replace script tags with their equivalent html symbol using regex