search

jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.41k stars 1.16k forks source link

Image urlEnabled can be XSS #739

Open StevenYuysy opened 5 years ago

StevenYuysy commented 5 years ago

Step to reproduce

  1. open https://jpuri.github.io/react-draft-wysiwyg/#/demo
  2. input "><script src="a.js">sd</script> and click add

  3. image

swr7der commented 3 years ago

@StevenYuysy The library is developed and well known for its simplicity and I loved implementing it in my community blogging project. It used draft-to-html library to convert raw content to HTML content (referring to the HTML mentioned in your comment), but I, personally, won't suggest showing the received content directly to the DOM as there may be many vulnerabilities. And rather you can try sanitizing the HTML content using some library like dompurify which worked great in my case and also it's amazingly fast.

It removed the script part from the mentioned HTML and made it safe to insert in DOM.

Hope this helps someone who's finding the solution of XSS prevention for this library.

farisv commented 3 years ago

Although we can sanitize the returned HTML with a library like dompurify, this is certainly an unintended behavior (e.g., if the image link contains a double quote, the HTML will be broken).

The culprit is actually the draftjs-to-html library. As we can see here, it just uses string interpolation to put the src. There is no filter/escape. This bug should be fixed.