FYI All the content of this post suits best for some edge cases, and the solution proposed here is probably not the more safe way to do it.
Cross-site Scripting (XSS Attacks)
Among all the web vulnerabilities, one of the most common is cross-site scripting, this type of vulnerability allows the attackers to inject scripts on the page to get access to any sensitive information the browser and the site are sharing (cookies, tokens, etc...).
Types of XSS Attacks
There are 3 types of XSS attacks:
Stored XSS Attacks occurs when the injected script is store on the server (i.e. store on a database) so each time the user request a something from the server the malicious script is sent to the client.
Reflected XSS Attacks happens when the malicious script is reflect on the web that's vulnerable, this could be due to a click on an email link that's malformed or any other external source.
DOM Based XSS Attacks is a vulnerability that occurs on the DOM (Document Object Model) instead of the HTML.
Let's say you have this code on your app:
Now, imagine someone visits your site using the URL https://www.nicesite.com/index.html#alert('test'), the script will be executed because the code above writes whatever comes on url to the document using document.write.
We can point one of the main differences between this type of XSS attack and the Stored and Reflected: The servers can't stop this attack, since the hash (#) part of the url is not being sent to the server on the request.
Prevent XSS Attacks
For most of the XSS attacks the solution is simple, just sanitize your input data, even if comes from a trusted source.Doing this will ensure that no matter what's the input or output, is always secure.
Inputs & Outputs
element.src (in some elements like img)
React and cross-site scripting
Element.innerHTML:The Element property innerHTML gets or sets the HTML or XML markup contained within the element
So, you can set the HTML content from an element using this property, but what happen when the content has an script inside?
The first 2 lines create a variable that holds a plain string, then using innerHTML set the content of an element to be this value, so far so good, nothing harmless here.
dangerously-set-html-content is a tiny (297B Gzipped), no-dependencies, library that allows you to render dynamic html and execute any scripts tag within it.
1) Add it to your project:
2) Start using it:
Of course this doesn't prevent any attack (in fact, does the opposite of that), but sometimes this functionally could be what you are looking for.
I built this because I actually needed this functionality.
All the web is full of vulnerabilities that can cause you headaches if you are not aware of how to prevent them. Mostly of the common frontend libraries already handle a few of these in a way, so you don't have to worry about it but still is good to know what we are dealing with as front-end developers.
Additionally of what React offers us, there are several techniques that can help you to prevent an attack, so if you are having a problem of this type just head to the docs and you'll probably find the solution.