Search code examples
javascriptangularevalangular-dom-sanitizer

Javascript execution of custom user scripts using eval or domsanitizer


We have are working on an Angular 8 PWA app. Part of the app allows our clients to create their own custom forms to collect data.

As part of the development we are putting together a set functions to interact with the data. However as we it's hard to provide a function for every scenario we are considering allowing user admins to create their own scripts to be saved in our database and executed in the forms.

To enable this we are looking at passing the scripts through DomSanitizer.bypassSecurityTrustScript()

or possibly the 'evil' javascript eval()

This would run within an isolated function where we would provide access to a limited set of functions within the app. For example:

if (fnGetFieldValue('FIELD1') === fnGetFieldValue('FIELD2')) {setFnFieldValue('FIELD3')= 'PASS')}

Where fnGetFieldValue() and setFnFieldValue would be defined functions accessible by the script to run a limited set of operations.

The question is we we do have a major security concern on allowing this feature, the obvious XSS scripting attacks. Are there any strategies to safely run these user custom scripts?

Given companies such as Squarepace, Zoho, powerapps allows users to run custom code, wouldn't these solutions also be prone to the same issues? Does anyone know how they get around 'evil' use of eval?

Appreciate thoughts on this and whether there are any npm packages that may deal with this to sanitize some concerning functions?


Solution

  • The big issue you have when integrating users' scripts into your own code using eval or via embedded scripts is: That code can access your application's context, modify it and pose a security risk (e.g. XSS).

    One way to avoid that is to force the users' scripts to run in a sandboxed, pre-defined context that they cannot leak out of. A NPM package helping with that is https://www.npmjs.com/package/safe-eval.