XSS Prevention with React
What is XSS?
Cross-site scripting (XSS) is a type of web security vulnerability that allows attackers to inject malicious code into a vulnerable web application.
Why to prevent XSS?
As our client side code is visible to everyone and also can be modified, it can be dangerous if someone inject some malicious scripts or modify our DOM, which can lead to unexpected situations, so in order to avoid those circumstances, XSS Prevention is must.
How to prevent XSS in React?
JSX Support : By default, Luckily, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.
But still, it is not all in one solution.
We can use :
- DOMPurify
- CSP to prevent URLs or scripts from unauthorised sources
Best Solution for XSS in React:
DOMPurify: DOMPurify sanitizes HTML and prevents XSS attacks. You can feed DOMPurify with string full of dirty HTML and it will return a string (unless configured otherwise) with clean HTML. DOMPurify will strip out everything that contains dangerous HTML and thereby prevent XSS attacks and other nastiness. It’s also damn bloody fast. It uses the technologies the browser provides and turn them into an XSS filter. The faster your browser, the faster DOMPurify will be.
NPM Weekly Downloads: 3,464,529
Unpacked Size: 703 kB
Last Updated: 8days ago
Github: https://github.com/cure53/DOMPurify NPM: https://www.npmjs.com/package/dompurify CDN: https://cdnjs.com/libraries/dompurify (edited)
#happy_learning
My Github: https://github.com/trishan9
My LinkedIn: https://www.linkedin.com/in/trishan9/
