Webview assets do not load when requesting within Angular

[ajq0]

Bug Description:

I am reporting this bug after this.

When loading an extension within Theia and activating its webview (by editing a custom file), some of the assets of the webview cannot be loaded caused by the following error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading '1')
    at getWebviewIdForClient (service-worker.js:287:65)
    at processResourceRequest (service-worker.js:202:23)

service-worker.js:287:65

This error appears when the webview is actually an angular application. Somehow angular manages to break out of the resource fetching provided by the fake.html+service-worker.

This is a bug within Theia as the current version of the service-worker from VSCode does not have the same issue. Running the extension which contains an angular application as a webview, within vscode, does not cause the error, and all assets are loaded properly.

After a few hours of debugging, I have found the following:

• Within the webview, the request referrer is the same between a working request and a failing request.
• For a failing request, the client that is found is not root of the theia webview, or the fake.html, but a page within the webview.
• Requests that happen outside of angular, but happen after angular is loaded are also affected. This includes font requests made by stylesheets which are linked to from the index.html.
• In the above scenario, temporarily disabling angular makes the issue go away and assets are loaded properly.
• The service-worker instance seems to be the same for working requests and not working requests but the const client = await self.clients.get(event.clientId); here returns different clients for the same ID. Yes the event.clientId is the same between working and not working requests.

Steps to Reproduce:

I have not been able to create a repo with a reproducible setup as this would require some effort to recreate the setup that I currently have again, for debugging and sharing purposes. If this issue cannot be resolved without it, I might need to create such an example repo.

1. Create a basic angular application, and load a file from assets using the angular http client
2. Build the angular app
3. Create a basic VSCode extension which has a command to open up a webview
4. Link the webview with the index of the built angular app
   1. Here the base tag needs to updated to the extension Uri
5. Load the extension within VSCode and see that although angular loads properly. Requests from within angular/after angular has loaded, fail with the above error.

Additional Information

• Operating System: Browser: Latest chrome
• Theia Version: Latest as of ticket (1.59.0)
• Angular Version: Latest Angular (19.2.3)

[ajq0]

An update from my side:

Service worker clients get corrupted

It appears that the clients available to the service worker do indeed change. Taking a snapshot of the state of self.clients, before angular is loaded it includes the index.html and fake.html entries from Theia:

And after angular is loaded, the fake.html entry is replaced by something that the angular router produces:

Angular Router is the culprit

Just to test, i removed the angular router from the app and that does resolve the issue. So i would consider that the work around for anyone who can accept removing the router and handling view loading manually. In my case it is doable.

The fix is in the service worker

Taking a look at the VSCode service worker that Theia's is based on, in their current version (V4) the service worker stores the ID from the search params locally on load as seen here and then later uses it here.

A colleague of mine applied a simplified version of this in a local fork and it does indeed resolve the issue, I asked him to add a pull request for it.

Currently i am workarounding this by removing the angular router, but I expect this to be fixed eventually as VSCode webview does not have this issue.

GL

[ngfelixl]

With debugger attached, I experience this issue since Thursday last week with Chrome and since today with Edge. I don't use Angular for my project, but webviews with and without React. They open a lot slower and sometimes not even at all. My assumption is that it is related to a Chrome security update

https://chromereleases.googleblog.com/2025/03/stable-channel-update-for-desktop_25.html

[TBD][405143032] High CVE-2025-2783: Incorrect handle provided in unspecified circumstances in Mojo on Windows. Reported by Boris Larin (@oct0xor) and Igor Kuznetsov (@2igosha) of Kaspersky on 2025-03-20

On a german new site (heise) it says

In the version announcement, Google's developers state that, under unspecified circumstances, an incorrect handle is assigned in the Mojo component, which provides interprocess communication functions, by Chrome on Windows (CVE-2025-2783, no CVSS, risk rated as "high" by Google). A handle provides access to resources, but in this case, it grants access to the wrong ones, which attackers can exploit—and they already are, as Google also mentions in the version announcement: "Google is aware of reports that an exploit for CVE-2025-2783 exists in the wild."

I really don't know if this is related. Just an assumption.

[tsmaeder]

A colleague of mine applied a simplified version of this in a local fork and it does indeed resolve the issue, I asked him to add a pull request for it.

Cool, it would also help if you could share the "basic angular application" you're using to reproduce. No point in us reinventing the wheel.