Using properties that set plain text values are great if you’re only adding text, but if you’re adding a lot of markup around it, using
document.createElement() for every element can get tedious. Properties that inject HTML like
Element.outerHTML properties are so much easier.
Today, we’re going too look at a technique that allows you to use HTML string injection while also reducing your risk of XSS attacks: encoding. Let’s dig in!
What is encoding?
To make third-party strings safer to use, you can encode the content before injecting it. Encoding is the process of converting
For our purposes, encoding is the process of converting any characters that aren’t letters or numbers into their unicode equivalents. This will cause them to be rendered as plain text rather than markup.
How to encode your strings
If your third-party code is not allowed to contain any markup, you can use a helper method to encode your string:
This works by finding every character that’s not whitespace (), a dash (
-), or an underscore (
_), and replacing it with an encoded HTML string instead. As a result, those characters are rendered as literal text strings rather than as HTML.
It also uses the
String.replace() method to find and replace all instances of
Drawbacks with this approach
This approach is lightweight, but has two drawbacks:
- You need to remember to pass every third-party string into it.
- It will also encode emoji. For example, the waving hand emoji (👋) is returned as
A savvy reader also pointed out that the
String.replace() approach to removing
Tomorrow, we’ll look a third approach that we can use instead: sanitizing.