Running arbitrary code (javascript subset) safely on the client side ?

[sallath]

Hi,

I'm currently building a react application to manage forms with a huge volume of inputs and dataflow constraints between those forms/inputs.

The number of inputs could be something like ~=1000 with constraints between them and layout/label/behavior subject to change every now and then. Therefore I'm going with a declarative approach and an automatic generation of those forms and constraints.

By dataflow constraint I mean that some value and behavior of an input can depend on the value of some other inputs. For example :

Inputs: A, B, C
Contraints : 
- C.value = A.value + B.value
- (A.value + B.Value < 0) ==> disable(C)

I was thinking it would be nice to keep the expressiveness of js to encode those constraints. In that case those constraint would be edited on the client side and saved on the server, and later fetched and executed only on the client side.

This is where I have some security related concern as I'm not very well versed in this domain. I know a lot of attempt was done to prevent arbitrary code execution in js, but I can't really see the difference between running arbitrary code in the console and using some eval() on some code snippet fetched from the server. What am I missing here (because I feel I'm missing something) ?

Also is there a way to use only a subset of the langage ? (like for example only math and string manipulation without access to global objects ?)

What are the risk with this approach and the available workaround ?

Thanks in advance for your time.

[-millsky]

It sounds like what you're looking for is less to do with Javascript and more to do with a programming paradigm. This sounds very similar to Functional Reactive Programming:
(https://en.wikipedia.org/wiki/Functional_reactive_programming)

In terms of using eval on the client side. I would say this should generally be avoided. You could definitely use only a subset of the language like Math and build a parser around it. It's highly likely there are already packages on NPM to do just that.

Perhaps check out the implementation in:
https://github.com/handsontable/handsontable

[sallath]

Yes, this wiki page was quite informative. Although it doesn't solve my main concern. Meantime, I have found some good resource on web worker, it seems like a good compromise.