Use the forwarded address for integrated browser previews

src/editorPreview/previewManager.ts

@@ -67,7 +67,14 @@ export class PreviewManager extends Disposable {
 
 		// Check if we should use the integrated browser instead
 		if (await SettingUtil.shouldUseIntegratedBrowser()) {
-			const url = `http://${connection.host}:${connection.httpPort}${path}?vscode-livepreview=true`;
+			const externalUri = await connection.resolveExternalHTTPUri();
+			const query = new URLSearchParams(externalUri.query);
+			query.set('vscode-livepreview', 'true');
+			const url = vscode.Uri.joinPath(externalUri, path)
+				.with({
+					query: query.toString(),
+				})
+				.toString(true);
 			await vscode.commands.executeCommand(INTEGRATED_BROWSER_COMMAND, {
 				url,
 				openToSide: true,

src/test/suite/preview.test.ts

@@ -14,6 +14,7 @@ import { makeSetting, testWorkspaces } from './common';
 import { Connection } from '../../connectionInfo/connection';
 import { WebviewComm } from '../../editorPreview/webviewComm';
 import { ExternalBrowserUtils } from '../../utils/externalBrowserUtils';
+import { INTEGRATED_BROWSER_COMMAND } from '../../utils/constants';
 
 describe('PreviewManager', () => {
 	let sandbox: sinon.SinonSandbox;
@@ -76,6 +77,39 @@ describe('PreviewManager', () => {
 		assert.ok(goToFile.getCall(3).calledWith('/page.html', true));
 	});
 
+	it('uses the forwarded address in the integrated browser', async () => {
+		const shouldUseIntegratedBrowser = sinon
+			.stub(SettingUtil, 'shouldUseIntegratedBrowser')
+			.resolves(true);
+		const resolveExternalHTTPUri = sinon
+			.stub(connection, 'resolveExternalHTTPUri')
+			.resolves(
+				vscode.Uri.parse('https://forwarded.example.dev/base/?token=secret')
+			);
+		const executeCommand = sinon.stub(vscode.commands, 'executeCommand');
+
+		try {
+			await previewManager.launchFileInEmbeddedPreview(
+				undefined,
+				connection,
+				vscode.Uri.joinPath(testWorkspaces[0].uri, '/index.html')
+			);
+
+			assert.ok(resolveExternalHTTPUri.calledOnce);
+			assert.ok(
+				executeCommand.calledOnceWith(INTEGRATED_BROWSER_COMMAND, {
+					url: 'https://forwarded.example.dev/base/index.html?token=secret&vscode-livepreview=true',
+					openToSide: true,
+					reuseUrlFilter: '**?vscode-livepreview=true',
+				})
+			);
+		} finally {
+			executeCommand.restore();
+			resolveExternalHTTPUri.restore();
+			shouldUseIntegratedBrowser.restore();
+		}
+	});
+
 	it("previews in external preview (non-debug)", async () => {
 		const openInBrowser = sinon.stub(ExternalBrowserUtils, 'openInBrowser');
 
@@ -95,4 +129,4 @@ describe('PreviewManager', () => {
 		assert.ok(executeCommand.calledOnce);
 		assert.ok(executeCommand.getCall(0).calledWith('extension.js-debug.debugLink', `http://${connection.host}:${connection.httpPort}/index.html`));
 	});
-});
+});