"new Function" is incompatible with "safe" content-security-policy

[amfine-soft-drault]

Any Content-Security-Policy that block 'unsafe-eval' will prevent the component from working properly

as much as i could tell, this is due to the use of new Function

i found 2 use cases :
https://github.com/leezng/vue-json-pretty/blame/dev/src/components/Tree/index.tsx#L242
https://github.com/leezng/vue-json-pretty/blob/dev/src/components/TreeNode/index.tsx#L251

any way to implement these bits in a "safer" way ?

thanks

[amfine-soft-drault]

i'm not particularly skilled in Typescript so there's probably a lot to say about it but
i was thinking of a patch along these lines (for Tree/index.tsx):

    const extractSubdoc = (obj: Record<string, unknown>, prop: string) : Record<string, unknown> => {
      const re = /^([^[]*)\[([0-9]+)\]?$/.exec(prop);
      if (re && re.length > 2) {
        const o = obj[re[1]] as Record<string, unknown>;
        return { o, k: re[2], v: o[re[2]] };
      }
      return { o: obj, k: prop, v: obj[prop] };
    }

    const updatePath = (obj: Record<string, unknown>, path: string[] = [], previousPath: string[] = [], value: unknown) : void => {
      const [first, ...tail] = path;
      if (obj == null) {
        throw new Error(`Could not update path : failed at ${previousPath.join('.')}.${first}`)
      }
      const sub = extractSubdoc(obj, first);
      if (tail && tail.length) { // go deeper
        updatePath(sub.v as Record<string, unknown>, tail, [...previousPath, first], value);
      } else {
        (sub.o  as Record<string, unknown>)[sub.k as string] = value;
      }
    };

    const handleValueChange = (value: unknown, path: string) => {
      const newData = cloneDeep(props.data);
      const jsonPath = path.split('.').slice(1);
      updatePath(newData as Record<string, unknown>, jsonPath, [], value);
      emit('update:data', newData);
    };