How are you guys saving the editor values in databases?

[kenhuang1964]

Are you guys saving it as JSON files and then loading it?

[Maxx59]

I store the JSON, then I use conditions and switches to create the HTML and Tailwind classes

[kenhuang1964]

Can I please see how you are doing it? I'm currently also storing the JSON and when I load it, I simply load it inside an editor component with read only set to true.

[dylans]

We store the current JSON state, but we also manage a collection of CRDT to support collaboration. We also have a tree of pages which makes it more interesting.

We load in a read only state and then once things are loaded and ready for collab, we toggle read only.

[12joan]

createElement(element.type, { className }, element.children.map((child:TDescendant) => {

I would be cautious when using createElement with a user-supplied type. It's possible that this could be used as part of an XSS attack. It might be a good idea to check element.type against an allowlist before passing it to createElement.

Edit for anyone reading this answer: Calling createElement with a user-supplied type is indeed vulnerable to passing script as an element type. If you use this approach in your app, ensure that only allowlisted strings are passed to the first argument of createElement, santisize any URLs passed to a href or src attribute, and do not allow arbitrary DOM attributes.

[Maxx59]

createElement(element.type, { className }, element.children.map((child:TDescendant) => {

I would be cautious when using createElement with a user-supplied type. It's possible that this could be used as part of an XSS attack. It might be a good idea to check element.type against an allowlist before passing it to createElement.

Users cannot enter text, only I can, but you are right

[12joan]

I've hidden your other answer to prevent people from unintentionally including vulnerable code in their apps. If you want to make a new answer with a fixed version of the code, go ahead.

[Maxx59]

With DOMPurify?

Also, I create the html manually, but isn't there a way to do it with platejs by deserializing? How does it work?

[12joan]

I don't think DOMPurify would work here, since your createElements code is emitting a JSX object rather than a HTML string.

So long as you follow these guidelines, I'm pretty sure your existing code can be made secure:

1. Do not allow arbitrary strings as the first argument of createElements
2. Check that the URL scheme of any URLs passed as DOM attributes is present in an allowlist (e.g. http, https, tel, mailto)
3. Do not allow arbitrarily named DOM attributes (especially those starting with on)