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 ;-)
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! 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`
)
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...