Use asExternalUri API to resolve TensorBoard iframe src (#16005)

microsoft · Apr 21, 2021 · 2954fca · 2954fca
1 parent 24b17a9
commit 2954fca
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/news/2 Fixes/15807.md b/news/2 Fixes/15807.md
@@ -0,0 +1 @@
+Fix TensorBoard integration in Remote-SSH by auto-configuring port forwards.
diff --git a/src/client/tensorBoard/tensorBoardSession.ts b/src/client/tensorBoard/tensorBoardSession.ts
@@ -6,6 +6,7 @@ import * as path from 'path';
 import {
     CancellationToken,
     CancellationTokenSource,
+    env,
     Position,
     Progress,
     ProgressLocation,
@@ -100,7 +101,7 @@ export class TensorBoardSession {
         }
         const startedSuccessfully = await this.startTensorboardSession(logDir);
         if (startedSuccessfully) {
-            this.showPanel();
+            await this.showPanel();
             // Not using captureTelemetry on this method as we only want to send
             // this particular telemetry event if the whole session creation succeeded
             sendTelemetryEvent(
@@ -408,23 +409,24 @@ export class TensorBoardSession {
         return urlThatTensorBoardIsRunningAt.promise;
     }
 
-    private showPanel() {
+    private async showPanel() {
         traceInfo('Showing TensorBoard panel');
-        const panel = this.webviewPanel || this.createPanel();
+        const panel = this.webviewPanel || (await this.createPanel());
         panel.reveal();
         this.active = true;
     }
 
-    private createPanel() {
+    private async createPanel() {
         const webviewPanel = window.createWebviewPanel('tensorBoardSession', 'TensorBoard', this.globalMemento.value, {
             enableScripts: true,
             retainContextWhenHidden: true,
         });
+        const fullWebServerUri = await env.asExternalUri(Uri.parse(this.url!));
         webviewPanel.webview.html = `<!DOCTYPE html>
         <html lang="en">
             <head>
                 <meta charset="UTF-8">
-                <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'; frame-src ${this.url} http: https:;">
+                <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'; frame-src ${fullWebServerUri} http: https:;">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>TensorBoard</title>
             </head>
@@ -444,7 +446,7 @@ export class TensorBoardSession {
                     }
                     window.addEventListener('resize', resizeFrame);
                     window.addEventListener('message', (event) => {
-                        if (!"${this.url}".startsWith(event.origin) || !event.data || !event.data.filename || !event.data.line) {
+                        if (!"${fullWebServerUri}".startsWith(event.origin) || !event.data || !event.data.filename || !event.data.line) {
                             return;
                         }
                         const args = { filename: event.data.filename, line: event.data.line };
@@ -455,7 +457,7 @@ export class TensorBoardSession {
                     id="vscode-tensorboard-iframe"
                     class="responsive-iframe"
                     sandbox="allow-scripts allow-forms allow-same-origin allow-pointer-lock"
-                    src="${this.url}"
+                    src="${fullWebServerUri}"
                     frameborder="0"
                     border="0"
                     allowfullscreen
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Fix TensorBoard integration in Remote-SSH by auto-configuring port forwards.