Warn development webview extensions that use `vscode-resource` uris directly

Fixes #81685

src/vs/workbench/api/common/extHostWebview.ts

@@ -7,7 +7,7 @@ import { Emitter, Event } from 'vs/base/common/event';
 import { URI, UriComponents } from 'vs/base/common/uri';
 import { generateUuid } from 'vs/base/common/uuid';
 import * as modes from 'vs/editor/common/modes';
-import { IExtensionDescription } from 'vs/platform/extensions/common/extensions';
+import { IExtensionDescription, ExtensionIdentifier } from 'vs/platform/extensions/common/extensions';
 import * as typeConverters from 'vs/workbench/api/common/extHostTypeConverters';
 import { EditorViewColumn } from 'vs/workbench/api/common/shared/editor';
 import { asWebviewUri, WebviewInitData } from 'vs/workbench/api/common/shared/webview';
@@ -20,6 +20,7 @@ type IconPath = URI | { light: URI, dark: URI };
 export class ExtHostWebview implements vscode.Webview {
 	private _html: string;
 	private _isDisposed: boolean = false;
+	private _hasCalledAsWebviewUri = false;
 
 	public readonly _onMessageEmitter = new Emitter<any>();
 	public readonly onDidReceiveMessage: Event<any> = this._onMessageEmitter.event;
@@ -28,7 +29,8 @@ export class ExtHostWebview implements vscode.Webview {
 		private readonly _handle: WebviewPanelHandle,
 		private readonly _proxy: MainThreadWebviewsShape,
 		private _options: vscode.WebviewOptions,
-		private readonly _initData: WebviewInitData
+		private readonly _initData: WebviewInitData,
+		private readonly _extensionId: ExtensionIdentifier | undefined,
 	) { }
 
 	public dispose() {
@@ -36,6 +38,7 @@ export class ExtHostWebview implements vscode.Webview {
 	}
 
 	public asWebviewUri(resource: vscode.Uri): vscode.Uri {
+		this._hasCalledAsWebviewUri = true;
 		return asWebviewUri(this._initData, this._handle, resource);
 	}
 
@@ -53,6 +56,12 @@ export class ExtHostWebview implements vscode.Webview {
 		this.assertNotDisposed();
 		if (this._html !== value) {
 			this._html = value;
+			if (this._initData.isExtensionDevelopmentDebug && this._extensionId && !this._hasCalledAsWebviewUri) {
+				if (/(["'])vscode-resource:([^\s'"]+?)(["'])/i.test(value)) {
+					this._hasCalledAsWebviewUri = true;
+					console.warn(`${this._extensionId.value} created a webview that appears to use the vscode-resource scheme directly. Please migrate to use the 'webview.asWebviewUri' api instead: https://aka.ms/vscode-webview-use-aswebviewuri`);
+				}
+			}
 			this._proxy.$setHtml(this._handle, value);
 		}
 	}
@@ -290,7 +299,7 @@ export class ExtHostWebviews implements ExtHostWebviewsShape {
 		const handle = ExtHostWebviews.newHandle();
 		this._proxy.$createWebviewPanel(handle, viewType, title, webviewShowOptions, convertWebviewOptions(options), extension.identifier, extension.extensionLocation);
 
-		const webview = new ExtHostWebview(handle, this._proxy, options, this.initData);
+		const webview = new ExtHostWebview(handle, this._proxy, options, this.initData, extension.identifier);
 		const panel = new ExtHostWebviewEditor(handle, this._proxy, viewType, title, viewColumn, options, webview);
 		this._webviewPanels.set(handle, panel);
 		return panel;
@@ -405,7 +414,7 @@ export class ExtHostWebviews implements ExtHostWebviewsShape {
 			return Promise.reject(new Error(`No serializer found for '${viewType}'`));
 		}
 
-		const webview = new ExtHostWebview(webviewHandle, this._proxy, options, this.initData);
+		const webview = new ExtHostWebview(webviewHandle, this._proxy, options, this.initData, undefined);
 		const revivedPanel = new ExtHostWebviewEditor(webviewHandle, this._proxy, viewType, title, typeof position === 'number' && position >= 0 ? typeConverters.ViewColumn.to(position) : undefined, options, webview);
 		this._webviewPanels.set(webviewHandle, revivedPanel);
 		return Promise.resolve(serializer.deserializeWebviewPanel(revivedPanel, state));
@@ -432,7 +441,7 @@ export class ExtHostWebviews implements ExtHostWebviewsShape {
 
 		this._proxy.$setExtension(handle, extension.identifier, extension.extensionLocation);
 
-		const webview = new ExtHostWebview(handle, this._proxy, options, this.initData);
+		const webview = new ExtHostWebview(handle, this._proxy, options, this.initData, extension.identifier);
 		const revivedPanel = new ExtHostWebviewEditor(handle, this._proxy, viewType, title, typeof position === 'number' && position >= 0 ? typeConverters.ViewColumn.to(position) : undefined, options, webview);
 		this._webviewPanels.set(handle, revivedPanel);
 		return Promise.resolve(provider.resolveWebviewEditor(URI.revive(resource), revivedPanel));

src/vs/workbench/api/common/shared/webview.ts

@@ -7,6 +7,7 @@ import { URI } from 'vs/base/common/uri';
 import * as vscode from 'vscode';
 
 export interface WebviewInitData {
+	readonly isExtensionDevelopmentDebug: boolean;
 	readonly webviewResourceRoot: string;
 	readonly webviewCspSource: string;
 }

src/vs/workbench/test/electron-browser/api/extHostWebview.test.ts

@@ -18,7 +18,11 @@ suite('ExtHostWebview', () => {
 		const viewType = 'view.type';
 
 		const shape = createNoopMainThreadWebviews();
-		const extHostWebviews = new ExtHostWebviews(SingleProxyRPCProtocol(shape), { webviewCspSource: '', webviewResourceRoot: '' });
+		const extHostWebviews = new ExtHostWebviews(SingleProxyRPCProtocol(shape), {
+			webviewCspSource: '',
+			webviewResourceRoot: '',
+			isExtensionDevelopmentDebug: false,
+		});
 
 		let lastInvokedDeserializer: vscode.WebviewPanelSerializer | undefined = undefined;
 
@@ -52,7 +56,8 @@ suite('ExtHostWebview', () => {
 		const shape = createNoopMainThreadWebviews();
 		const extHostWebviews = new ExtHostWebviews(SingleProxyRPCProtocol(shape), {
 			webviewCspSource: '',
-			webviewResourceRoot: 'vscode-resource://{{resource}}'
+			webviewResourceRoot: 'vscode-resource://{{resource}}',
+			isExtensionDevelopmentDebug: false,
 		});
 		const webview = extHostWebviews.createWebviewPanel({} as any, 'type', 'title', 1, {});
 
@@ -92,7 +97,8 @@ suite('ExtHostWebview', () => {
 
 		const extHostWebviews = new ExtHostWebviews(SingleProxyRPCProtocol(shape), {
 			webviewCspSource: '',
-			webviewResourceRoot: `https://{{uuid}}.webview.contoso.com/commit/{{resource}}`
+			webviewResourceRoot: `https://{{uuid}}.webview.contoso.com/commit/{{resource}}`,
+			isExtensionDevelopmentDebug: false,
 		});
 		const webview = extHostWebviews.createWebviewPanel({} as any, 'type', 'title', 1, {});