React-markdown: How to protect against XSS?

[IonicaBizau]

For instance, this is currently failing for inputs like:

<img src="" onerror="alert()">
<a href="javascript:alert()">hey</a>

How to fix that? Is/how to make this component safe enough to be used?

[rexxars]

By disallowing HTML, basically. I don't think protecting against XSS should be part of this library - there are better alternatives for that. In the next major version of react-markdown, I actually aim to disable rendering of HTML by default - only enabling it behind an explicit property.

We do try to prevent XSS in markdown however, such as images and links rendered with actual markdown tags. Sorry if that wasn't the answer you were hoping for, but trying to handle sanitation of HTML is just a slippery slope to madness that I'd rather not handle unless I have to.

[IonicaBizau]

@rexxars Thanks for the quick reply. I'm learning React these days and I simply want to render a piece of markdown in my app (which may contain HTML, because it's coming from the user).

Is there an option to disable the HTML rendering in this component currently?

[rexxars]

Yes, you can either pass the skipHtml property, which will simply... skip HTML.
Or, you can use the escapeHtml property, which will render HTML as plain text.

[IonicaBizau]

Thanks! escapeHtml is what I wanted. Next time I'll check the docs more carefully. :memo: :eyes: