Rendering formated text with ReactJS

Question

Sorry if you find this question silly or off-topic but I have the following issue. I am experimenting with ReactJS and trying to write simple blog-like Single Page Application.

I want users to write posts on my blog with rich features for text decoration. So I am going to allow them to use some html tags. The problem is: what is the best way to render users' input data?

I simply can get their html input, escape dangerous html tags (like script etc.), and then just use dangerouslySetInnerHTML to render raw html. Is it a good approach? Are there some ReactJS specific features to solve my problem?

Thanks!

Perhaps you could allow them to use markdown? This way you could escape all html tags input. — canaan seaton
– canaan seaton, Commented Jan 8, 2018 at 19:18

Felix · Accepted Answer · 2018-01-08 20:12:23Z

1

No, if you can, avoid dangerouslySetInnerHtml. This is also stated in the offical react documents:

In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

One possible approach would be to define a specific input format as @canaan seaton stated. My idea would be to use a component like draftjs to render rich text content and to give the editors the ability to see what they get (wysiwyg). Draftjs is really easy to understand and there are plenty resources and additional packages (like syntax highlighting, ...) out there.

Off course you can also use any other rich text editing component.

answered Jan 8, 2018 at 20:12

Felix

2,71119 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering formated text with ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related