I mean, it is still easy to work around that because `f.constructor` is just `f['const'+'ructor']` and so on. Backslash was just a cheap way to avoid the exact pattern and it will be hard to fix them with a disallowed word list. For example, you may disallow string literals but then template string literals can be used: `const${``}ructor`, and some interesting code would be disallowed over the course. Literals fully disallowed, it is still possible to construct a string "constructor" without them, as the good old JSFuck [1] demonstrates. Disallowing brackets is almost sufficient, but your global worker scope is still exposed and that may be exploitable.

After some search, it seems that using a null-origin <iframe> seems the best approach you can use for now. Figma successfully used it in the production [2] and the only reason they switched was that no state can be ever shared, which is not a big problem for your case. They also tried the Realms shim for the aforementioned proposal but it seems to have a known vulnerability. And I guess you don't want to ship a WebAssembly JS interpreter ;-)

Anyway, sorry to bother you; it is hard to balance the fun and robustness at once. As a parting gift, the following is a genuine code that renders a 7-segment counter: https://muffinman.io/pulsar/?grid=classic&animate=opacity&co...

[1] https://jsfuck.com/

[2] https://www.figma.com/blog/how-we-built-the-figma-plugin-sys...

You are not bothering me, this is great stuff. I agree, iframe is probably a way to go (sites like codepen or openprocessing are also using it), but I wanted to keep the scope under control, while trying to minimize the potential damage. The worker plus list of disallowed strings is what I came up with as a compromise.

The 7-digit counter is mind blowing, I'll add it to the list of examples!

Thank you!

Thank you! If you are still on that, I think disallowing backslash is too much as it will make string-as-lookup-table harder. Also the highlighter seems to be a bit off when a code fragment that looks like a HTML tag appears, like `4<a && a<5` will display as `45`.

On the 7-segment counter, maybe I should commentate while my memory is still fresh:

    // This script recognizes 17 regions and paints each region according to
    // the lookup table, where the following number corresponds to `c`.
    //
    //    |12|   7   | 2|
    //    +--+-------+--+
    //    |  |       |  |
    //    |11|   6   | 1|
    //    |  |       |  |
    //    +--+-------+--+
    // XX |10|   5   | 0| XX
    //    +--+-------+--+
    //    |  |       |  |
    //    | 9|   4   |-1|
    //    |  |       |  |
    //    +--+-------+--+
    //    | 8|   3   |-2|
    //
    (abs(x)<5)*   // Removes the left and right edge (XX above)
    (1-t%1)**.3*  // Blinks every time the digit changes, but not too quickly
    ((c,d)=>      // c: region index (see above), d: the current digit
      c&1&        // Even-numbered region is always blank
      ~(c+1?      // Due to the JS number semantics, at least one segment
                  // should be encoded outside of the lookup table
        //          d=4     d=3    d=2    d=1    d=0
        // d<5:  0b011010_110000_100000_111110_000100
        // d>=5: 0b010000_000000_110110_000001_010001
        //          d=9     d=8    d=7    d=6    d=5
        268656721+(d<5)*180268851
        // Read the lookup table; c/2 will be truncated by `>>`
        >>d%5*6+c/2
      :
        d==2      // c==-1 case is handled separately
      )
    )(
      (y>4)-5*(x>2)+(y>0)-(y<0)+5*(x<-2)-(y<-4)+5, // Calculate a region index
      t%10|0                                       // `|0` for `Math.floor`
    )

Haha ok, I will spare the backslash.

The code is brilliant, I remember similar code golf in C years ago. Thanks for the comment, I'll link it next to the example.