How JavaScript Symbol protects against XSS

How JavaScript Symbol protects against XSS

Viktor Turskyi (WebbyLab)

JavaScript recently added the Symbol data type. People use Symbol to store metadata in an object or to implement private object properties. But there is another side, Symbol solves a number of security issues for the application.

Great post from Dan Abramov is about it. The basic idea is that the React nodes inside are represented as JSON objects. And the code that you think is safe, `<p>{message.text}</p>`, actually contains an XSS vulnerability. 

If message.text contains user input and we render React on the server, then an attacker can insert a JSON object into message.text that describes any React node. In order to protect against this, in the JSON object, there should be a property $$typeof and Symbol as a value. In this case, the attacker will not be able to predict the Symbol in advance.

The article - https://overreacted.io/why-do-react-elements-have-typeof-property/

Another great example is Sequalize. Previously, string operators were used to describe a query.

Post.findAll({
where: { 'or': [{authorId: 12}, {authorId: 13}] }
});

right now it is:

Post.findAll({
where: { [Op.or]: [{authorId: 12}, {authorId: 13}] }
});

where Op.or is a Symbol, which does not allow an attacker to do an ORM Injection.


Report Page