I am using dangerouslySetInnerHtml to render html from a mustache template into React. I am reading about the security concerns of this and it is new to me.
My use case is that I have some html which contains a svg. This is static and not being pulled from any database. I want to just render this.
I read that you should 'sanitize' the html. The examples given on this provide libraries that people use where they sanitize the html and then using this sanitized variant in the dangerouslySetInnerHtml attribute.
However what is stopping someone from simply going into the JS and editing the html via devtools or something so that the sanitization doesn't take place.
I don't have a lot of context on this so sorry I couldn't be more specific with an example.
I have tried many parsers for html to React. Have came to the conclusion that I need to use dangerouslySetInnerHtml
You should 'sanitize' the HTML when this HTML code comes from user, like you have input for the user can submit HTML code to your server, and then show it on other users' browser.
"However what is stopping someone from simply going into the JS and editing the html via devtools or something so that the sanitization doesn't take place." That seems not correct, sorry. the reason is dangerous HTML code can affect only user, who viewing it. If they're editing JS files in their browser, that makes no sense because they are the victim of themselves.
Read more about https://en.wikipedia.org/wiki/Cross-site_scripting (what HTML sanitization using for)