Controlling access to global variables via an ES6 proxy

The following function evalCode() traces the global variables that are accessed while evaluating a piece of JavaScript code.

    // Simple solution
    const _glob = typeof global !== 'undefined' ? global : self;
    
    function evalCode(code) {
        const func = new Function ('proxy',
            `with (proxy) {${code}}`); // (A)
        const proxy = new Proxy(_glob, {
            get(target, propKey, receiver) {
                console.log(`GET ${String(propKey)}`); // (B)
                return Reflect.get(target, propKey, receiver);
            },
            set(target, propKey, value, receiver) { // (C)
                console.log(`SET ${String(propKey)}=${value}`);
                return Reflect.set(target, propKey, value, receiver);
            },
        });
        return func(proxy);
    }

The way this works is as follows:

• The with statement wrapped around the code (line A) means that every variable access that “leaves” the scope of the code becomes a property access of proxy.


• The proxy observes what properties are accessed via its handler, which traps the operations “get” (line B) and “set” (line C),

Unsing evalCode():

    > evalCode('String.prototype')
    GET Symbol(Symbol.unscopables)
    GET String
    undefined
    > evalCode('String = 123')
    GET Symbol(Symbol.unscopables)
    SET String=123
    undefined

Explanations:

• We don’t return what code does, which is why the result is undefined.


• Symbol.unscopables shows up, because with checks its operand for a property with this key to determine which properties it should not expose as variables to its body. This mechanism is explained in “Exploring ES6”.

This is very hacky! with is a deprecated sloppy mode feature that is used in conjunction with a brand new ES6 feature.

Source of this hack: Vue.js, explained by qgustavor on reddit.

Further reading

• Chapter “Metaprogramming with proxies” in ”Exploring ES6”.


• Section “Property key Symbol.unscopables” in Exploring ES6”.


• Blog post “ES proposal: global” (demonstrates how to properly access the global object)