Question: Why don’t StackBlitz WebContainers work in Safari, Firefox or on-prem with StackBlitz Enterprise?
While it may seem like a simple question, a full answer requires a bit of a journey through web browser architecture, white hat hackers, and the Internet forums where browser core team devs figure out how to keep us all safe on the increasingly dangerous worldwide network we all plug into every day. You can strap in for the ride or just read the TLDR and go back to browsing Twitter.
The TL;DR: WebContainers require cutting-edge browser functionality called Shared Array Buffers that require COEP Credentialless to function properly. We need this functionality to ship to non-Chromium browsers before we can support Firefox, Safari and on-prem enterprise WebContainers. We expect COEP Credentialless to become widely adopted in Q2 2022 which should allow us to ship multi-browser and on-prem support in Q3 2022.
Key Definitions
Before we dive into the story, let’s define a few of the key technologies:
- WebContainers: the proprietary Node.js runtime that we launched in May 2021. The WebAssembly based kernel allows us to run Node (and other stuff) directly in the browser.
- Array Buffers: act like raw memory in the browser, emulating the kind of direct memory access you would have in a desktop language like C. More precisely, Array Buffers store a raw sequence of bytes, representing binary data.
- Shared Array Buffers (SABs): are Array Buffers that can be accessed by multiple threads concurrently which is critical for highly performant WebAssembly-based applications like StackBlitz WebContainers.
- Cross-origin resources: any resource served from an origin (domain, scheme, or port) other than the primary origin of the current browser tab. For example, loading an embedded 3rd party website via an iframe.
- Cross-origin isolation: a browser setting that limits what cross-origin resources a web application can access inside the browser to only those that explicitly opt-in to being accessed.
- Cross-Origin Embedder Policy (COEP) Credentialless: a cutting-edge approach that allows web applications to securely utilize SharedArrayBuffers in a seamless way, without manual opt-in for each individual resource, as required with the current implementation of Cross-origin isolation.
At the core of the WebContainers design goals is creating a highly performant and secure code execution environment within the browser’s security sandbox. In order to do that we are building on top of WebAssembly and using SharedArrayBuffers to allow multi-threading and supercharge performance. This is not unique to StackBlitz WebContainers, as other advanced web applications like Google Earth and Zoom also rely on SABs. Support for this tech initially shipped in 2017 and everything was fine, until…
Meltdown & Spectre
On Wednesday January 3rd, 2018 the Google Zero team published a post detailing some serious vulnerabilities discovered in the SharedArrayBuffers implementation. A globally distributed group of security researchers (including folks from the Graz University of Technology in Austria, Georgia Tech in the US, the University of Adelaide in Australia, as well as a few independent researchers) had discovered an attack that could allow malicious web applications to read private user data across browser tabs.
In the words of the Google Chrome team, “This was a problem for us browser vendors, as we want to allow sites to execute code in the form of JavaScript and WASM, but strictly control the memory this code can access. If you arrive on my website, I shouldn’t be able to read anything from the Internet banking site you also have open. In fact, I shouldn’t even know you have your Internet banking site open. These are fundamentals of web security.”
If you want to dive even deeper into the technical details of these vulnerabilities Dr. Daniel Gruss and Jann Horn, two of the researchers involved in uncovering and documenting Meltdown & Spectre, gave an excellent talk on these vulnerabilities that you can watch on YouTube.
Browser Vendors Respond
To mitigate the risk of these newly discovered vulnerabilities in SharedArrayBuffers, browser vendors implemented a requirement that web applications that wished to continue using SABs must opt-into cross-origin isolation. This eliminated the newly discovered risk of cross-origin data leakage; however, this was a breaking change for many advanced web applications, including StackBlitz WebContainers (see Google’s comments on this issue in the orange caution message).
To avoid unnecessary disruption, the Chrome team created an origin trial that allows application developers to opt out of this restriction on a domain level and continue using SharedArrayBuffers without cross-origin isolation. StackBlitz applied for and implemented this temporary workaround for our .com application. This is why WebContainers are currently operational for .com users in Chrome, but not yet fully operational in other browsers (for which an origin trial does not exist) or on other domains (for example, on-prem at domains like stackblitz.yourcompanyname.com) that are not covered by the StackBlitz.com origin trial*.*
The Long Term Solution
So finally this brings us to Cross-Origin Embedder Policy (COEP) Credentialless: the long-term solution to using SharedArrayBuffers in modern web applications. COEP Credentialless allows web applications to securely load cross-origin resources without an explicit opt-in required for each individual resource. This is accomplished by automatically removing any embedded credentials (cookies, client certs, etc.) from cross-origin requests, mitigating the risk of secure data leakage.
This will undo the breaking changes introduced by the Cross-origin isolation requirement (and the need for the Chrome origin trial), enable us to begin testing WebContainer support in non-chromium browsers that adopt the new COEP Credentialless standard, and ultimately pave the path for WebContainers to be hosted on-prem for our enterprise customers.
Though credentialless mode just landed in Chrome 96, it’s not supported by any other browsers yet. For this reason many developers, including our team, is waiting to deploy COEP until other browser vendors adopt this critically important feature. We are working with the Firefox team to implement the needed changes as soon as possible. While Safari has enabled WebAssembly threads, they have unfortunately not yet indicated an intention to ship Credentialless.
StackBlitz Action Plan
We are planning to switch our StackBlitz.com application from the Chrome origin trial over to the new Credentialless approach in Q2 2022 as browser support for COEP Credentialless rolls out beyond Chrome. As with all new StackBlitz feature releases, we will validate the new implementation on StackBlitz.com for a quarter or so before pushing to Enterprise Edition after we are fully confident in the stability and security of the approach. Of course, as with all new technology, this timeline is dependent on how many issues our internal team and the browser vendors run into as we move forward with the implementation and testing.
If you would like to learn more about the challenges of this rollout from an engineering perspective I recommend the excellent blog post by Sam Verschueren titled Cross-Browser support with Cross-Origin isolation.
Thanks for your patience and continued support for web standards that help us all advance the power of the web!
