typing in lit.dev playground can lock up entire tab or browser

[aomarks]

1. Open https://lit.dev/playground/ to load the default "Hello World (TypeScript)" example.

2. Paste the following code into the class (after the name property):

constructor() {
  super();
  this.go();
}

3. Type (don't paste) the following code after that:

async go() {
  for |
}

4. If the browser does not lock up, try deleting/re-typing the code around the |. Eventually the tab will lock up. For @justinfagnani this also caused the entire origin to lock up, even after closing/opening tabs!

[AndrewJakubowicz]

The rollback also fixes the two styling issues #409 and #410 . Should I close these issues since they are no longer relevant and just need to be kept in mind when we re-upgrade.

[aomarks]

The rollback also fixes the two styling issues #409 and #410 . Should I close these issues since they are no longer relevant and just need to be kept in mind when we re-upgrade.

Let's keep them because they need to be addressed still. Thanks for filling!

[aomarks]

Simpler repro:

https://lit.dev/playground/#project=W3sibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPHNjcmlwdD5cbiAgLy8gdW5jb21tZW50IHRvIGxvY2tcbiAgLy8gZm9yKDs7KTtcbjwvc2NyaXB0PiJ9XQ

The main issue here seems to be that if the iframe locks up, the parent frame does too. This shouldn't happen, because on lit.dev we run the playground iframe on a separate origin (playground.lit.dev), so it should get its own thread.

The reason the specific repro in the issue description caused this error is that TypeScript compiles { for } to { for (;;); } -- so it transforms a runtime syntax error into a valid infinite loop (https://www.typescriptlang.org/play?#code/N4AgZg9gTiC+Q)!

[aomarks]

This shouldn't happen, because on lit.dev we run the playground iframe on a separate origin (playground.lit.dev), so it should get its own thread.

Turns out process isolation is per site, not per origin, by default (https://www.chromium.org/developers/design-documents/site-isolation#TOC-Threat-Model), so lit.dev and playground.lit.dev share a process.

However there is a new Origin-Agent-Cluster header that we should be able to use to switch to per origin, so that they would be isolated: https://web.dev/origin-agent-cluster/. Trying that out now!