react-md-editor
react-md-editor copied to clipboard
uiwjs
[Security] Vulnerable to XSS
Issue : Textarea still accepting HTML code and inline script although I have passed all props to the MDEditor component.
### snippet
<MDEditor value={editorValue} onChange={handleChange} previewOptions={{ skipHtml: true, escapeHtml: true, transformLinkUri: null, renderers, linkTarget: '_blank' }} commands={commands} />
As markdown is sometimes used for HTML, and improper use of HTML can open you up to a cross-site scripting (XSS) attack, use of remark can also be unsafe. When going to HTML, use remark in combination with the rehype ecosystem, and use rehype-sanitize to make the tree safe.
@bhavinsen
By the way, here's the HTML from @bhavinsen 's screenshot:
<?xml version="1.0"standalone="no"?
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="full">
<polygon id="triangle" points="0,0 0,50 50,0" fill="#009900" stroke="#004400"/>
<script type="text/javascript">
alert("hello");
</script>
</svg>
And here's a minimal working example:
<svg>
<script type="text/javascript">
alert("hello");
</script>
</svg>
After reading the documentation it turns out that there's a simple workaround, which is adding rehype-sanitize to the editor (like @jaywcjlove suggested). In order to do that, simply add:
import rehypeSanitize from "rehype-sanitize";
<MDEditor previewOptions={{ rehypePlugins: [rehypeSanitize] }} />
Hello @samuelemarro , in your workaround does it sanitize the below payload:
[a] (javascript:prompt(document.domain))
Note: remove the space after [a]
