How to evaluate string encoded conditions from an API call?

[datenspast]

We are currently exploring the use of fromvulate in an application where the schemas should be generated in independent backend.
The reasons behind the selection of formvuelate are the simplicity and flexibility the framework provides.

We are now facing one issue related to conditional display of fields: The API provides the conditions as strings and they are not evaluated:

const SCHEMA = [
    {
        model: 'size_specification',
        component: 'FormSelect',
        label: 'How would you like to enter the size of the system?',
        required: true,
        options: ['By Power rating (kWp)', 'By area (m2)'],
    },
    {
        model: 'power_rating',
        component: 'FormFloat',
        label: 'What is the power rating of the system?',
        condition: "(model) => model.size_specification === 'By Power rating (kWp)'",
    },
    {
        model: 'area',
        component: 'FormInteger',
        label: 'What is the size of the system?',
        condition: "(model) => model.size_specification === 'By area (m2)'",
    },
]

To enable evaluation we convert the string into a function which is then interpreted:

...
const model= ref({})
useSchemaForm(model)
const schema = computed(() => {
    SCHEMA.forEach(function (s) {
        if (s.condition) {
            // eslint-disable-next-line no-new-func
            s.condition = Function(`"use strict";return (${s.condition})`)(model.value)
        }
    })
    return SCHEMA
})
...

Our question is now: Is this approach acceptable in terms of security and/or are there better ways while keeping the same flexibility?
Many thanks for your ideas and opinion!

[marina-mosti]

Hey @datenspast that sounds like a cool use case. The Function() evaluation is definitely a security concern as would be using eval. The question here is how much do you trust your backend? Is this something that can be manipulated by the user? Because it can definitely lead to some ugliness - but I'm not a secops expert.

Another solution would be for your backend to give you a different way to parse the condition, where maybe it says ['equal', 'size', 'By area m2'] and then you parse that into a function

if `param1 is 'equal'` && model[param2] === param3)

Maybe in a later release of FormVueLate we can take into consideration doing some magic schema conditions like this, and would be a great feature to have, but I have to put this on the wishlist for now cause I am a little pressed on time with other things

[datenspast]

Hi @marina-mosti, thanks for the quick reply!
No, users will not be able to manipulate the generation of schemas in the backend.
In case this is the only reason why we should avoid Function() I think we can continue to use the approach. (?)

Indeed, setting up a more abstract convention for the formulation of conditions is also an option.
On the other hand: the beauty is the flexibility we have now.

[marina-mosti]

From a technical point of view, yeah I mean, it works! But I would def consult someone with a sec-ops background because this is way out of my comfort zone :D

[logaretm]

I would follow @marina-mosti advice and avoid using Function.

The concerns also include sending untranspiled code so if an engineer used new/unsupported syntax in some browsers. Also, it could send malformed functions, either invalid JavaScript functions or functions with their return type that isn't a boolean (common with && and ||).

I would recommend going to a harder path where you explicitly define what kind of conditions possible via JSON, for example, I did something like this a while back:

{
  "model": "area",
  "type": "integer",
  "label": "What is the size of the system?",
  "when": { "field": "size_specification", "eq": "By area (m2)" }
}

Or if you are a fan of tuples:

{
  "model": "area",
  "type": "integer",
  "label": "What is the size of the system?",
  "when": ["size_specification", "By area (m2)"],
}

And before you would pass these to formvuelate you would need to transform the condition object expression to a function, which is straight forward:

function transformSchemaConditions(schema, model) {
  const transform = schema.map(field => {
    let condition = undefined;
    if (field.when) {
      condition = transformCondition(field.when, model);
    }
    
    return {
      ...field,
      condition
    }
  });
}

// assuming you go with tuples
function transformCondition(condition, model) {
 return () => model.value[condition[0]] === condition[1];
}

With added complexity, you could scale this to include operators like Mongo's API like: eq, in, gt, lte, and so on, or use arrays (of tuples or objects) to express multiple conditions. You can also add nested conditions support with or, and operators.

The main benefit of this condition schema to me is that it can be type-safe with TypeScript, which might come in handy. Of course, this is quite an investment to implement, and if your current solution works for you, then by all means.

This might be a nice plugin for Formvuelate as well 🤔

[datenspast]

@logaretm : Thanks for the quick and detailed assessment and suggestions. Really helpful!
It seems the extra effort is manageable.
Indeed a plugin with a standardized syntax would be great.
@ALL: Keep up the good work!

[marina-mosti]

This might be a nice plugin for Formvuelate as well

re @logaretm I really would like to have this as part of core tbh :)