Formatted string render

[Techicolors]

so i am trying to figure how to render text stored with html tags from a mysql database onto a React frontend. the only way i can think of is using DangerouslysetinnerHTML which is a React API that behaves like innerHTML. but as the method suggests it can expose the app to XSS attacks. if i don't use it though, the text is just thrown on the page as text and not treated as html. so it'll be like <p>Hello there!</p> rather than rendered as html 

 

any workarounds for this? 

[colonel_mortis]

I'm not an expert with React, but I would be surprised if React has support for safely setting arbitrary HTML to filter out stuff like script tags. Instead, I would encourage you to filter the content on the server before it gets saved, to strip script tags and the like (but please use a library for it, such as HTMLPurifier for PHP, because there are a lot of edge cases that you need to consider). If you still want the scripts to be saved in the DB, you could filter them when returning them to the react app instead, but when done correctly the filtering is a relatively expensive operation, so it's not something that you should do per-request if it can be easily avoided.

[Techicolors]

On 5/6/2019 at 8:59 AM, colonel_mortis said:

I'm not an expert with React, but I would be surprised if React has support for safely setting arbitrary HTML to filter out stuff like script tags. Instead, I would encourage you to filter the content on the server before it gets saved, to strip script tags and the like (but please use a library for it, such as HTMLPurifier for PHP, because there are a lot of edge cases that you need to consider). If you still want the scripts to be saved in the DB, you could filter them when returning them to the react app instead, but when done correctly the filtering is a relatively expensive operation, so it's not something that you should do per-request if it can be easily avoided.

makes sense i was thinking of filtering out unnecessary html tags, because the saved data is just the review body with <p> and maybe <img> tags. i found a good alternative of just using <textarea> and save the contents and preserve whitespace, but the resulting html isn't as clean. 

[PAEz]

This article might be of interest....

https://dev.to/donghyukjacobjang/how-to-prevent-xss-attacks-when-using-dangerouslysetinnerhtml-in-react-1464

[Techicolors]

On 5/16/2019 at 5:09 AM, PAEz said:

This article might be of interest....

https://dev.to/donghyukjacobjang/how-to-prevent-xss-attacks-when-using-dangerouslysetinnerhtml-in-react-1464

sounds good, i sanitize the incoming request with trusted library and save that in the db. but i still feel pretty unsafe using a function like dangerouslysetinnerhtml