How to protect from XSS, with textarea to create javascript code

Question

I have a textarea and I will have some users that will create react components inside the textarea, they will be able to save, edit them. I want to be able to execute that javascript without being attacked with xss.

This javascript will be use to create Graphs, and other graphical components for the user that creates them.

Answer 1

This is going to be extremely challenging, even with a whitelist of functions. You could consider loading a new page that is not associated with the domain, so it wouldn't have a cookie for session data. It would be on a separate domain that is untrusted.

Answer 2

1. Any sort of "sanitisation" of arbitrary JavaScript is doomed to fail, but there's Caja project which defines a subset of JavaScript and DOM that can be analyzed statically, and can reject suspicious scripts (and unfortunately also benign scripts when it can't fully understand them).

2. A better approach may be to simply to execute JavaScript as-is, but on a separate domain. This way your site will be protected by same-origin policy, the same way browsers protect all sites from each other.

You'll need a completely separate TLD if you use cookies (since a script on any subdomain can poison cookies on the entire domain). That's the approach Google takes with googleusercontent.com that's used to run arbitrary scripted pages for Google Translate, etc.

When you run JS on a separate domain, via an iframe, you'll need to use postMessage to communicate between your page and the untrusted script. Make sure you carefully validate the messages you receive, as you would any user input or an API call.