How to allow style attributes and base64 images when using rehypeSanitize

[Sagie501]

Hi!

I am using react-markdown version 9.0.0. I am also using the following plugins: rehype-raw (version 7.0.0), rehype-sanitize (version 6.0.0), remark-gfm (version 4.0.0).

And this is how I am using it:

<ReactMarkdown
    remarkPlugins={[remarkGfm]}
    rehypePlugins={[rehypeRaw, rehypeSanitize]}
>
    {content}
</ReactMarkdown>

Since I am using rehypeSanitize when I have in my markdown string something like this: <span style="color:blue">Should be blue</span> the result is without the style attribute.

I would like to know how can I configure rehypeSanitize (and pass it to react-markdown) to allow style attributes. I would also like to know how can I allow base64 images (allow the data protocol).

Would also like to know why style atrribute is disabled by default by rehypeSanitize, there are any security issues with it?

[wooorm]

Style isn’t safe. You probably shouldn’t.... data protocols aren’t safe either.

If you‘re going to do unsafe things, don’t use rehype-sanitize

[Sagie501]

So what is the "correct" way of having colorful text in my markdown?
Event though it is not safe, can't I configure rehype-sanitize to my specific needs?

[wooorm]

You can get “colorful text”. It isn’t safe though. If you don’t care about safety, because for example it’s just you writing markdown or other authors you trust, it‘s fine: don’t use sanitize.

The readme of rehype-sanitize has extensive examples of how to use it.

See also https://github.com/ChALkeR/notes/blob/master/Improper-markup-sanitization.md

[ChristianMurphy]

@Sagie501 you could also consider leveraging directives https://github.com/remarkjs/remark-directive
And giving author(s) a set of known and trusted styles they can apply.
E.G.

:red[text to be colorful] :blue[text to be different color]