XSS vulnerability via component attributes

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 97.0.4692.71

Reproducible demo link

https://jsfiddle.net/ovrz5ug2/4/

Describe the bug

Hi - we ran across this XSS vulnerability while using GrapesJS in a multiplayer type scenario, with several privileged users able to make changes to templates and components via the editor (i.e., non-devs). Effectively, this renders them vulnerable to an attack from within the organization, where one user adds malicious code, and a different one can come across it and run it.

How to reproduce the bug?

1. Add malicious code into a component's id attribute, either directly in the HTML or via the trait manager (and save) - in this case, id="<details/open/ontoggle=alert(document.location)>
2. Click on the component in the live preview and observe the alert OR via the Style Manager, when using the component state dropdown and changing it to a different state, e.g., hover.

What is the expected behavior? No XSS via the component's attributes (including, but not limited to id).

What is the current behavior? GrapesJS runs the malicious code.

If is necessary to execute some code in order to reproduce the bug, paste it here below:

// see above, adding this code to the component's attribute, e.g., id
<details/open/ontoggle=alert(document.location)>

If you have any tips or guidance, I could lend a hand with a PR.

Code of Conduct

• I agree to follow this project's Code of Conduct