Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Techicolors

Formatted string render

Recommended Posts

Posted · Original PosterOP

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? 

Link to post
Share on other sites

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.


I don't work for Floatplane Media, so any Floatplane comments that I make are my own and may be incorrect or in conflict with the official view.

 

For Floatplane support, please use the wizard linked in this topic

Link to post
Share on other sites
Posted · Original PosterOP
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. 

Link to post
Share on other sites
Posted · Original PosterOP
On 5/16/2019 at 5:09 AM, PAEz said:

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 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×