标题“VSCode Web 的静态部署”特指如下情况:

  • 官方 VSCode 或 Code - OSS
  • 在默认设置的浏览器中运行
  • 无后端服务,只使用 HTTP 文件服务器
  • 仅通过静态文件进行部署

有很多项目尝试达成此目标,下面是一个不完整的列表:

由于 VSCode/Code - OSS 的 Web 构建在设计上用于github.dev这样的在线服务,为了完全静态地使用它,需要一些补丁(github1s/vscode-web)。


不考虑上面的现有方案,受wylieconlon的启发,我们可以从vscode-test-web工具中获取达成此目标的参考。

VSCode 的官方 Web 构建通过API提供,通过恰当的 Workbench 初始化,我们可以获得基于官方构建的可用版本。

在解压静态文件后,应用下面的 Patch:

注:我们假定用户不会通过此部署处理凭据或其他秘密信息,也不会受到针对性攻击。理想的使用环境为 Chromium 的无痕窗口且仅打开此页面。

此 Patch 用于修补 Webview 的子域名 Hash 校验,因为静态部署无法动态处理任意子域名(通常用于github.dev环境),仅验证是否同源。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
diff --git a/build/out/vs/workbench/contrib/webview/browser/pre/index.html b/build/out/vs/workbench/contrib/webview/browser/pre/index.html
index 9f3f70dc..20d95d5f 100644
--- a/build/out/vs/workbench/contrib/webview/browser/pre/index.html
+++ b/build/out/vs/workbench/contrib/webview/browser/pre/index.html
@@ -391,7 +391,7 @@
 					throw err instanceof Error ? err : new Error(String(err));
 				}

-				if (hostname === parentOriginHash || hostname.startsWith(parentOriginHash + '.')) {
+				if (hostname === parentOriginHash || hostname.startsWith(parentOriginHash + '.') || location.origin === parentOrigin) {
 					// validation succeeded!
 					return start(parentOrigin);
 				}

此 Patch 用于禁用可能导致问题的 Content-Security-Policy。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
diff --git a/build/out/vs/workbench/contrib/webview/browser/pre/index.html b/build/out/vs/workbench/contrib/webview/browser/pre/index.html
index 20d95d5f..7ad2d215 100644
--- a/build/out/vs/workbench/contrib/webview/browser/pre/index.html
+++ b/build/out/vs/workbench/contrib/webview/browser/pre/index.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="UTF-8">

-	<meta http-equiv="Content-Security-Policy"
+	<meta http-equiv="Content-Security-Policy-Report-Only"
 		content="default-src 'none'; script-src 'sha256-ZcIhtIuU4M9PbKfs7w/CLqHimFJRK8L7mYTXOfiUv0I=' 'self'; frame-src 'self'; style-src 'unsafe-inline';">

 	<!-- Disable pinch zooming -->
diff --git a/build/out/vs/workbench/services/extensions/worker/webWorkerExtensionHostIframe.html b/build/out/vs/workbench/services/extensions/worker/webWorkerExtensionHostIframe.html
index 372f26d5..0fc538ba 100644
--- a/build/out/vs/workbench/services/extensions/worker/webWorkerExtensionHostIframe.html
+++ b/build/out/vs/workbench/services/extensions/worker/webWorkerExtensionHostIframe.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta http-equiv="Content-Security-Policy" content="
+		<meta http-equiv="Content-Security-Policy-Report-Only" content="
 			default-src 'none';
 			child-src 'self' data: blob:;
 			script-src 'self' 'unsafe-eval' 'sha256-cl8ijlOzEe+0GRCQNJQu2k6nUQ0fAYNYIuuKEm72JDs=' https: http://localhost:* blob:;

使用如下index.html启动:

注:此案例中添加了vscode-web-extension-memfs扩展。

此处使用的配置禁用了所有在线服务以减少隐私问题和违反微软协议的可能性,并允许用户打开本地文件夹。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!-- https://github.com/Felx-B/vscode-web/issues/39 -->
<!-- https://github.com/microsoft/vscode-test-web -->
<!-- https://update.code.visualstudio.com/api/update/web-standalone/stable/latest -->
<!-- Set access-control-allow-origin: * if not working -->
<!-- Use HTTPS if still not working -->
<!DOCTYPE html>
<html>
    <head>
        <script>
            performance.mark("code/didStartRenderer");
        </script>
        <meta charset="utf-8" />

        <!-- Mobile tweaks -->
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-title" content="Code" />
        <link rel="apple-touch-icon" href="./build/code-192.png" />

        <!-- Disable pinch zooming -->
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
        />

        <!-- Workbench Configuration -->
        <!--
        <meta
            id="vscode-workbench-web-configuration"
            data-settings='{"productConfiguration":{"enableTelemetry":false,"webEndpointUrlTemplate":"http://{{uuid}}.localhost:3000/static/build","webviewContentExternalBaseUrlTemplate":"http://{{uuid}}.localhost:3000/static/build/out/vs/workbench/contrib/webview/browser/pre/"},"workspaceUri":{"$mid":1,"path":"/default.code-workspace","scheme":"tmp"}}'
        />
        -->

        <!-- Builtin Extensions (running out of sources) -->
        <meta id="vscode-workbench-builtin-extensions" data-settings="[]" />

        <!-- Workbench Icon/Manifest/CSS -->
        <link rel="icon" href="./build/favicon.ico" type="image/x-icon" />
        <link rel="manifest" href="./build/manifest.json" />

        <link
            data-name="vs/workbench/workbench.web.main"
            rel="stylesheet"
            href="./build/out/vs/workbench/workbench.web.main.css"
        />
        <style id="vscode-css-modules" type="text/css" media="screen"></style>
    </head>

    <body aria-label=""></body>

    <!-- Startup (do not modify order of script tags!) -->
    <script>
        const url = new URL(window.location.href);
        const path = url.pathname.split("/").slice(0, -1).join("/") + "/";
        const dir = url.origin + path;
        // BASE URL
        const baseUrl = new URL("./build", dir).toString();
        globalThis._VSCODE_FILE_ROOT = baseUrl + "/out/";
        globalThis._VSCODE_WEB_PACKAGE_TTP = window.trustedTypes?.createPolicy(
            "amdLoader",
            {
                createScriptURL(value) {
                    return value;
                },
            },
        );
    </script>
    <script>
        performance.mark("code/willLoadWorkbenchMain");
    </script>
    <script src="./build/out/nls.messages.js"></script>
    <script type="module">
        import {
            create,
            URI,
            Emitter,
        } from "./build/out/vs/workbench/workbench.web.main.internal.js";
        class WorkspaceProvider {
            workspace;
            payload;
            static QUERY_PARAM_EMPTY_WINDOW = "ew";
            static QUERY_PARAM_FOLDER = "folder";
            static QUERY_PARAM_WORKSPACE = "workspace";
            static QUERY_PARAM_PAYLOAD = "payload";
            static create(config) {
                let foundWorkspace = false;
                let workspace;
                let payload = Object.create(null);
                const query = new URL(document.location.href).searchParams;
                query.forEach((value, key) => {
                    switch (key) {
                        case WorkspaceProvider.QUERY_PARAM_FOLDER:
                            workspace = { folderUri: URI.parse(value) };
                            foundWorkspace = true;
                            break;
                        case WorkspaceProvider.QUERY_PARAM_WORKSPACE:
                            workspace = { workspaceUri: URI.parse(value) };
                            foundWorkspace = true;
                            break;
                        case WorkspaceProvider.QUERY_PARAM_EMPTY_WINDOW:
                            workspace = undefined;
                            foundWorkspace = true;
                            break;
                        case WorkspaceProvider.QUERY_PARAM_PAYLOAD:
                            try {
                                payload = JSON.parse(value);
                            } catch (error) {
                                console.error(error);
                            }
                            break;
                    }
                });
                if (!foundWorkspace) {
                    if (config.folderUri) {
                        workspace = { folderUri: URI.revive(config.folderUri) };
                    } else if (config.workspaceUri) {
                        workspace = {
                            workspaceUri: URI.revive(config.workspaceUri),
                        };
                    }
                }
                return new WorkspaceProvider(workspace, payload);
            }
            trusted = true;
            constructor(workspace, payload) {
                this.workspace = workspace;
                this.payload = payload;
            }
            async open(workspace, options) {
                if (
                    options?.reuse &&
                    !options.payload &&
                    this.isSame(this.workspace, workspace)
                ) {
                    return true;
                }
                const targetHref = this.createTargetUrl(workspace, options);
                if (targetHref) {
                    if (options?.reuse) {
                        window.location.href = targetHref;
                        return true;
                    } else {
                        return !!window.open(targetHref);
                    }
                }
                return false;
            }
            createTargetUrl(workspace, options) {
                let targetHref = undefined;
                if (!workspace) {
                    targetHref = `${document.location.origin}${document.location.pathname}?${WorkspaceProvider.QUERY_PARAM_EMPTY_WINDOW}=true`;
                } else if ("folderUri" in workspace) {
                    const queryParamFolder = encodeURIComponent(
                        workspace.folderUri.toString(true),
                    );
                    targetHref = `${document.location.origin}${document.location.pathname}?${WorkspaceProvider.QUERY_PARAM_FOLDER}=${queryParamFolder}`;
                } else if ("workspaceUri" in workspace) {
                    const queryParamWorkspace = encodeURIComponent(
                        workspace.workspaceUri.toString(true),
                    );
                    targetHref = `${document.location.origin}${document.location.pathname}?${WorkspaceProvider.QUERY_PARAM_WORKSPACE}=${queryParamWorkspace}`;
                }
                if (options?.payload) {
                    targetHref += `&${
                        WorkspaceProvider.QUERY_PARAM_PAYLOAD
                    }=${encodeURIComponent(JSON.stringify(options.payload))}`;
                }
                return targetHref;
            }
            isSame(workspaceA, workspaceB) {
                if (!workspaceA || !workspaceB) {
                    return workspaceA === workspaceB;
                }
                if ("folderUri" in workspaceA && "folderUri" in workspaceB) {
                    return this.isEqualURI(
                        workspaceA.folderUri,
                        workspaceB.folderUri,
                    );
                }
                if (
                    "workspaceUri" in workspaceA &&
                    "workspaceUri" in workspaceB
                ) {
                    return this.isEqualURI(
                        workspaceA.workspaceUri,
                        workspaceB.workspaceUri,
                    );
                }
                return false;
            }
            isEqualURI(a, b) {
                return (
                    a.scheme === b.scheme &&
                    a.authority === b.authority &&
                    a.path === b.path
                );
            }
        }
        class LocalStorageURLCallbackProvider {
            _callbackRoute;
            static REQUEST_ID = 0;
            static QUERY_KEYS = [
                "scheme",
                "authority",
                "path",
                "query",
                "fragment",
            ];
            _onCallback = new Emitter();
            onCallback = this._onCallback.event;
            pendingCallbacks = new Set();
            lastTimeChecked = Date.now();
            checkCallbacksTimeout = undefined;
            onDidChangeLocalStorageDisposable;
            constructor(_callbackRoute) {
                this._callbackRoute = _callbackRoute;
            }
            create(options = {}) {
                const id = ++LocalStorageURLCallbackProvider.REQUEST_ID;
                const queryParams = [`vscode-reqid=${id}`];
                for (const key of LocalStorageURLCallbackProvider.QUERY_KEYS) {
                    const value = options[key];
                    if (value) {
                        queryParams.push(
                            `vscode-${key}=${encodeURIComponent(value)}`,
                        );
                    }
                }
                if (
                    !(
                        options.authority === "vscode.github-authentication" &&
                        options.path === "/dummy"
                    )
                ) {
                    const key = `vscode-web.url-callbacks[${id}]`;
                    localStorage.removeItem(key);
                    this.pendingCallbacks.add(id);
                    this.startListening();
                }
                return URI.parse(window.location.href).with({
                    path: this._callbackRoute,
                    query: queryParams.join("&"),
                });
            }
            startListening() {
                if (this.onDidChangeLocalStorageDisposable) {
                    return;
                }
                const fn = () => this.onDidChangeLocalStorage();
                window.addEventListener("storage", fn);
                this.onDidChangeLocalStorageDisposable = {
                    dispose: () => window.removeEventListener("storage", fn),
                };
            }
            stopListening() {
                this.onDidChangeLocalStorageDisposable?.dispose();
                this.onDidChangeLocalStorageDisposable = undefined;
            }
            async onDidChangeLocalStorage() {
                const ellapsed = Date.now() - this.lastTimeChecked;
                if (ellapsed > 1000) {
                    this.checkCallbacks();
                } else if (this.checkCallbacksTimeout === undefined) {
                    this.checkCallbacksTimeout = setTimeout(() => {
                        this.checkCallbacksTimeout = undefined;
                        this.checkCallbacks();
                    }, 1000 - ellapsed);
                }
            }
            checkCallbacks() {
                let pendingCallbacks;
                for (const id of this.pendingCallbacks) {
                    const key = `vscode-web.url-callbacks[${id}]`;
                    const result = localStorage.getItem(key);
                    if (result !== null) {
                        try {
                            this._onCallback.fire(
                                URI.revive(JSON.parse(result)),
                            );
                        } catch (error) {
                            console.error(error);
                        }
                        pendingCallbacks =
                            pendingCallbacks ?? new Set(this.pendingCallbacks);
                        pendingCallbacks.delete(id);
                        localStorage.removeItem(key);
                    }
                }
                if (pendingCallbacks) {
                    this.pendingCallbacks = pendingCallbacks;
                    if (this.pendingCallbacks.size === 0) {
                        this.stopListening();
                    }
                }
                this.lastTimeChecked = Date.now();
            }
            dispose() {
                this._onCallback.dispose();
            }
        }
        /**
        (function () {
            const configElement = window.document.getElementById(
                "vscode-workbench-web-configuration"
            );
            const configElementAttribute = configElement
                ? configElement.getAttribute("data-settings")
                : undefined;
            if (!configElement || !configElementAttribute) {
                throw new Error("Missing web configuration element");
            }
            const config = JSON.parse(configElementAttribute);
            create(window.document.body, {
                ...config,
                workspaceProvider: WorkspaceProvider.create(config),
                urlCallbackProvider: new LocalStorageURLCallbackProvider(
                    config.callbackRoute
                ),
            });
        })();
        */
        (function () {
            const url = new URL(window.location.href);
            const path = url.pathname.split("/").slice(0, -1).join("/") + "/";
            const dir = url.origin + path;
            const config = {
                // https://github.com/microsoft/vscode/blob/main/src/vs/workbench/browser/web.api.ts#L149
                authenticationProviders: false,
                tunnelProvider: false,
                settingsSyncOptions: false,
                // https://github.com/microsoft/vscode/blob/main/src/vs/base/common/product.ts#L66
                productConfiguration: {
                    nameShort: "Not VSCode",
                    nameLong: "Not Visual Studio Code",
                    enableTelemetry: false,
                    webEndpointUrlTemplate: `${dir}build`,
                    webviewContentExternalBaseUrlTemplate: `${dir}build/out/vs/workbench/contrib/webview/browser/pre/`,
                    extensionsGallery: false, // CORS breaks gallery
                    tasConfig: false, // AB Testing
                    mcpGallery: false,
                    aiConfig: false,
                    chatParticipantRegistry: false,
                    "configurationSync.store": false,
                    enableSyncingProfiles: false,
                    "editSessions.store": false,
                    extensionEnabledApiProposals: {
                        "YieldRay.vscode-web-extension-memfs": [
                            "fileSearchProvider",
                            "textSearchProvider",
                        ],
                    },
                },
                workspaceUri: {
                    $mid: 1,
                    path: "/default.code-workspace",
                    scheme: "tmp",
                },
                additionalBuiltinExtensions: [
                    {
                        scheme: location.protocol.replace(":", ""),
                        authority: location.host,
                        path: location.pathname + "vscode-web-extension-memfs",
                    },
                ],
                // If you really need an out-of-box place to write stuff:
                // folderUri: { scheme: "vscode-userdata", path: "/" },
            };
            create(window.document.body, {
                ...config,
                workspaceProvider: WorkspaceProvider.create(config),
                urlCallbackProvider: new LocalStorageURLCallbackProvider(
                    config.callbackRoute,
                ),
            });
        })();
    </script>
</html>

为了使扩展主机和 Webview 可用,除了应用上面的 Patch,还需要设置access-control-allow-origin: *并使用 HTTPS。

注:对官方构建进行自定义部署和修补可能违反微软许可协议。此方法仅为 PoC,不适用于非个人使用。

虽然官方测试 Web 示例提供了下面的可选 Header,但是没有发现必要性:

  • cross-origin-opener-policy: same-origin
  • cross-origin-embedder-policy: require-corp
  • cross-origin-resource-policy: cross-origin