THEIA_WEBVIEW_EXTERNAL_ENDPOINT='{{uuid}}-webview-{{hostname}}' generates invalid cspSource()

[struanb]

Bug Description:

Setting THEIA_WEBVIEW_EXTERNAL_ENDPOINT='{{uuid}}-webview-{{hostname}}' leads to an invalid value of cspSource() and in turn this.panel.webview.cspSource, which breaks VS code extensions like git-graph. (A value of THEIA_WEBVIEW_EXTERNAL_ENDPOINT like this is useful when running Theia over HTTPS and relying upon a wildcard SSL certificate.)

cspSource() in webview-environment.ts returns *-webview-{{hostname}} which is later turned into *-webview-myhostname.com (if e.g. {{hostname}} is substituted with myhostname.com).

This results in browser errors for extensions like e.g. the git-graph extension, when they use this.panel.webview.cspSource.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src suggests this is indeed an invalid CSP value, as a wildcard * is only allowed in front of a ..

Steps to Reproduce:

1. Set THEIA_WEBVIEW_EXTERNAL_ENDPOINT='{{uuid}}-webview-{{hostname}}' and launch Theia.
2. Install git-graph extension.
3. Open git-graph extension.
4. In Chrome Dev Tools, the out.min.css asset (e.g. https://72939179-1cbe-4b51-90d8-92865963f3ee-webview-myhostname.com/webview/theia-resource/file///home/www-data/.theia/extensions/mhutchie.git-graph-1.27.0/extension/media/out.min.css will fail to load with a cspSource error)

Comments and workaround/solution

I’m not sure why it is useful to substitute {{uuid}} with * to generate the CSP, as it would seem to allow code running with one webview uuid to access resources available in another webview uuid.

I have tested that disabling the substitution of {{uuid}} with * altogether fixes git-graph, as code elsewhere in Theia will still substitute {{uuid}} with the webview uuid. Doing this results in a cspSource() value like https://72939179-1cbe-4b51-90d8-92865963f3ee-webview-myhostname.com, which is (a) valid and (b) at least in git-graph’s case, seems to work fine.

Assuming it is useful to substitute {{uuid}} with * to generate the CSP where this is valid, and given the CSP standard states it is only valid to replace {{uuid}} with * if {{uuid}} is followed by ., then I'd propose the following patch:

diff --git a/node_modules/@theia/plugin-ext/src/main/browser/webview/webview-environment.ts b/node_modules/@theia/plugin-ext/src/main/browser/webview/webview-environment.ts
index aa3657e..d359efc 100644
--- a/node_modules/@theia/plugin-ext/src/main/browser/webview/webview-environment.ts
+++ b/node_modules/@theia/plugin-ext/src/main/browser/webview/webview-environment.ts
@@ -64,7 +64,7 @@ export class WebviewEnvironment {
     }
 
     async cspSource(): Promise<string> {
-        return (await this.externalEndpointUrl()).withPath('').withQuery('').withFragment('').toString(true).replace('{{uuid}}', '*');
+        return (await this.externalEndpointUrl()).withPath('').withQuery('').withFragment('').toString(true).replace(/{{uuid}}\./, '*.');
     }
 
 }

I've tested the JS version of this:

--- a/node_modules/@theia/plugin-ext/lib/main/browser/webview/webview-environment.js
+++ b/node_modules/@theia/plugin-ext/lib/main/browser/webview/webview-environment.js
@@ -141,7 +141,7 @@
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, this.externalEndpointUrl()];
-                    case 1: return [2 /*return*/, (_a.sent()).withPath('').withQuery('').withFragment('').toString(true).replace('{{uuid}}', '*')];
+                    case 1: return [2 /*return*/, (_a.sent()).withPath('').withQuery('').withFragment('').toString(true).replace(/{{uuid}}\./, '*.')];
                 }
             });
         });

Additional Information

• Operating System: Alpine Linux
• Theia Version: 1.8.0 (and perhaps earlier versions)