Use custom scheme for loading webview wrapper contents

This moves us closer to using iframes directly instead of webview elements
microsoft · Jun 23, 2020 · 61f796e · 61f796e
1 parent 688b97d
commit 61f796e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 8 deletions.
diff --git a/src/main.js b/src/main.js
@@ -86,11 +86,10 @@ setCurrentWorkingDirectory();
 // Register custom schemes with privileges
 protocol.registerSchemesAsPrivileged([
 	{
-		scheme: 'vscode-resource',
+		scheme: 'vscode-webview',
 		privileges: {
+			standard: true,
 			secure: true,
-			supportFetchAPI: true,
-			corsEnabled: true,
 		}
 	}, {
 		scheme: 'vscode-webview-resource',

diff --git a/src/vs/base/common/network.ts b/src/vs/base/common/network.ts
@@ -62,6 +62,14 @@ export namespace Schemas {
 
 	export const webviewPanel = 'webview-panel';
 
+	/**
+	 * Scheme used for loading the wrapper html and script in webviews.
+	 */
+	export const vscodeWebview = 'vscode-webview';
+
+	/**
+	 * Scheme used for loading resources inside of webviews.
+	 */
 	export const vscodeWebviewResource = 'vscode-webview-resource';
 
 	/**

diff --git a/src/vs/code/electron-main/app.ts b/src/vs/code/electron-main/app.ts
@@ -172,11 +172,12 @@ export class CodeApplication extends Disposable {
 						return false;
 					}
 
-					if (source === 'data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%20style%3D%22width%3A%20100%25%3B%20height%3A%20100%25%22%3E%0D%0A%3Chead%3E%0D%0A%3Ctitle%3EVirtual%20Document%3C%2Ftitle%3E%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%20style%3D%22margin%3A%200%3B%20overflow%3A%20hidden%3B%20width%3A%20100%25%3B%20height%3A%20100%25%22%20role%3D%22document%22%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E') {
-						return true;
+					const uri = URI.parse(source);
+					if (uri.scheme === Schemas.vscodeWebview) {
+						return uri.path === '/index.html';
 					}
 
-					const srcUri = URI.parse(source).fsPath.toLowerCase();
+					const srcUri = uri.fsPath.toLowerCase();
 					const rootUri = URI.file(this.environmentService.appRoot).fsPath.toLowerCase();
 
 					return srcUri.startsWith(rootUri + sep);

diff --git a/src/vs/platform/webview/electron-main/webviewProtocolProvider.ts b/src/vs/platform/webview/electron-main/webviewProtocolProvider.ts
@@ -23,6 +23,10 @@ interface WebviewMetadata {
 
 export class WebviewProtocolProvider extends Disposable {
 
+	private static validWebviewFilePaths = new Map([
+		['/index.html', 'index.html'],
+	]);
+
 	private readonly webviewMetadata = new Map<string, WebviewMetadata>();
 
 	constructor(
@@ -87,8 +91,23 @@ export class WebviewProtocolProvider extends Disposable {
 
 			return callback({ data: null, statusCode: 404 });
 		});
-
 		this._register(toDisposable(() => sess.protocol.unregisterProtocol(Schemas.vscodeWebviewResource)));
+
+
+		sess.protocol.registerFileProtocol(Schemas.vscodeWebview, (request, callback: any) => {
+			try {
+				const uri = URI.parse(request.url);
+				const entry = WebviewProtocolProvider.validWebviewFilePaths.get(uri.path);
+				if (typeof entry === 'string') {
+					const url = require.toUrl(`vs/workbench/contrib/webview/electron-browser/pre/${entry}`);
+					return callback(url.replace('file://', ''));
+				}
+			} catch {
+				// noop
+			}
+			callback({ error: -10 /* ACCESS_DENIED - https://cs.chromium.org/chromium/src/net/base/net_error_list.h?l=32 */ });
+		});
+		this._register(toDisposable(() => sess.protocol.unregisterProtocol(Schemas.vscodeWebview)));
 	}
 
 	private streamToNodeReadable(stream: VSBufferReadableStream): Readable {

diff --git a/src/vs/workbench/contrib/webview/electron-browser/pre/index.html b/src/vs/workbench/contrib/webview/electron-browser/pre/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" style="width: 100%; height: 100%">
+
+<head>
+	<title>Virtual Document</title>
+</head>
+
+<body style="margin: 0; overflow: hidden; width: 100%; height: 100%" role="document">
+</body>
+
+</html>
diff --git a/src/vs/workbench/contrib/webview/electron-browser/webviewElement.ts b/src/vs/workbench/contrib/webview/electron-browser/webviewElement.ts
@@ -289,7 +289,7 @@ export class ElectronWebviewBasedWebview extends BaseWebview<WebviewTag> impleme
 		}
 
 		this.element!.preload = require.toUrl('./pre/electron-index.js');
-		this.element!.src = 'data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%20style%3D%22width%3A%20100%25%3B%20height%3A%20100%25%22%3E%0D%0A%3Chead%3E%0D%0A%3Ctitle%3EVirtual%20Document%3C%2Ftitle%3E%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%20style%3D%22margin%3A%200%3B%20overflow%3A%20hidden%3B%20width%3A%20100%25%3B%20height%3A%20100%25%22%20role%3D%22document%22%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E';
+		this.element!.src = `${Schemas.vscodeWebview}://${id}/index.html`;
 	}
 
 	protected createElement(options: WebviewOptions) {