Security best practices

[moritzuehling]

Hi! I'm using remark via react-remark. The code is quite simple,

            import { Remark } from 'react-remark';
            //...
            return (<Remark>{ comment.body }</Remark>);

The thing is, comment.body is provided by the user, so you can trivially create xss ([click me!](javascript:alert(1)))

What are some security best practices? Which plugins should I use to prevent stuff like this?

[ChristianMurphy]

See the security section of the readme
https://github.com/remarkjs/react-markdown#security

[remcohaszing]

On top of that I recommend to always configure a content security policy.

[moritzuehling]

Hm, this seems to use react-markdown, which isn't the same than react-remark, but I guess the recommendation is to use react-markdown instead of react-remark, as both are based on remark?

---

On top of that I recommend to always configure a content security policy.

Of course, a CSP should be set on the server, but it's always good to have a defense-in-depth strategy :)
Swiss cheese and all that.
(Optimally, we'd even go the whateverusercontent.com route, and render the markdown as iframe, but that's a bit of a hassle, and not necessarily worth the trade-off.)

[ChristianMurphy]

I guess the recommendation is to use react-markdown instead of react-remark, as both are based on remark?

Either can work.
react-markdown has safer defaults.
remark-react supports more plugins.

I'm more noting rehype-sanitize can be used to scrub content.

And as @remcohaszing notes, content security policy can add another layer of defense.