Photo by Lautaro Andreani / Unsplash

TIL - React's Auto Escaping

Today I Learned Feb 9, 2023

React escapes most of the strings to prevent the possibility of cross-site scripting (XSS) attacks. However, there are certain cases where escaping does not happen by default.

The API for creating elements looks like this -

React.createElement(
  type,
  [props],
  [...children]
)

When passed a dangerous value to [...children], the data will be escaped and not be treated as code or executed in the Javascript context of the current page. This handy feature provides security controls preventing cross-site scripting (XSS) attacks.

That said, dangerous values passed as [props] will not be escaped, and any value given to it will be treated as code in the page rendered. So values passed to props must be sanitized both at the frontend and the backend.

Tags