Use window messaging to pass sensitive data to terminal iframe (#929)

* Use window messaging to pass sensitive data to terminal iframe * Address feedback * Format * Update * Add tests
2021-07-12 14:48:13 -07:00 · 2021-07-12 14:48:13 -07:00 · 854bd2c149
parent cfce78242c
commit 854bd2c149
5 changed files with 198 additions and 206 deletions
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
@ -1,154 +1,90 @@
+import { shallow } from "enzyme";
+import React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import { NotebookTerminalComponent } from "./NotebookTerminalComponent";
+import { NotebookTerminalComponent, NotebookTerminalComponentProps } from "./NotebookTerminalComponent";

-const createTestDatabaseAccount = (): DataModels.DatabaseAccount => {
-  return {
-    id: "testId",
-    kind: "testKind",
-    location: "testLocation",
-    name: "testName",
+const testAccount: DataModels.DatabaseAccount = {
+  id: "id",
+  kind: "kind",
+  location: "location",
+  name: "name",
  properties: {
-      cassandraEndpoint: null,
    documentEndpoint: "https://testDocumentEndpoint.azure.com/",
-      gremlinEndpoint: null,
-      tableEndpoint: null,
  },
-    type: "testType",
-  };
+  type: "type",
 };

-const createTestMongo32DatabaseAccount = (): DataModels.DatabaseAccount => {
-  return {
-    id: "testId",
-    kind: "testKind",
-    location: "testLocation",
-    name: "testName",
-    properties: {
-      cassandraEndpoint: null,
-      documentEndpoint: "https://testDocumentEndpoint.azure.com/",
-      gremlinEndpoint: null,
-      tableEndpoint: null,
-    },
-    type: "testType",
-  };
+const testMongo32Account: DataModels.DatabaseAccount = {
+  ...testAccount,
 };

-const createTestMongo36DatabaseAccount = (): DataModels.DatabaseAccount => {
-  return {
-    id: "testId",
-    kind: "testKind",
-    location: "testLocation",
-    name: "testName",
+const testMongo36Account: DataModels.DatabaseAccount = {
+  ...testAccount,
  properties: {
-      cassandraEndpoint: null,
-      documentEndpoint: "https://testDocumentEndpoint.azure.com/",
-      gremlinEndpoint: null,
-      tableEndpoint: null,
    mongoEndpoint: "https://testMongoEndpoint.azure.com/",
  },
-    type: "testType",
-  };
 };

-const createTestCassandraDatabaseAccount = (): DataModels.DatabaseAccount => {
-  return {
-    id: "testId",
-    kind: "testKind",
-    location: "testLocation",
-    name: "testName",
+const testCassandraAccount: DataModels.DatabaseAccount = {
+  ...testAccount,
  properties: {
    cassandraEndpoint: "https://testCassandraEndpoint.azure.com/",
-      documentEndpoint: null,
-      gremlinEndpoint: null,
-      tableEndpoint: null,
  },
-    type: "testType",
-  };
 };

-const createTerminal = (): NotebookTerminalComponent => {
-  return new NotebookTerminalComponent({
-    notebookServerInfo: {
-      authToken: "testAuthToken",
-      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/",
-    },
-    databaseAccount: createTestDatabaseAccount(),
-  });
+const testNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
+  authToken: "authToken",
+  notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com",
 };

-const createMongo32Terminal = (): NotebookTerminalComponent => {
-  return new NotebookTerminalComponent({
-    notebookServerInfo: {
-      authToken: "testAuthToken",
+const testMongoNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
+  authToken: "authToken",
  notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongo",
-    },
-    databaseAccount: createTestMongo32DatabaseAccount(),
-  });
 };

-const createMongo36Terminal = (): NotebookTerminalComponent => {
-  return new NotebookTerminalComponent({
-    notebookServerInfo: {
-      authToken: "testAuthToken",
-      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongo",
-    },
-    databaseAccount: createTestMongo36DatabaseAccount(),
-  });
-};
-
-const createCassandraTerminal = (): NotebookTerminalComponent => {
-  return new NotebookTerminalComponent({
-    notebookServerInfo: {
-      authToken: "testAuthToken",
+const testCassandraNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
+  authToken: "authToken",
  notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/cassandra",
-    },
-    databaseAccount: createTestCassandraDatabaseAccount(),
-  });
 };

 describe("NotebookTerminalComponent", () => {
-  it("getTerminalParams: Test for terminal", () => {
-    const terminal: NotebookTerminalComponent = createTerminal();
-    const params: Map<string, string> = terminal.getTerminalParams();
+  it("renders terminal", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testAccount,
+      notebookServerInfo: testNotebookServerInfo,
+    };

-    expect(params).toEqual(
-      new Map<string, string>([["terminal", "true"]])
-    );
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
  });

-  it("getTerminalParams: Test for Mongo 3.2 terminal", () => {
-    const terminal: NotebookTerminalComponent = createMongo32Terminal();
-    const params: Map<string, string> = terminal.getTerminalParams();
+  it("renders mongo 3.2 shell", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testMongo32Account,
+      notebookServerInfo: testMongoNotebookServerInfo,
+    };

-    expect(params).toEqual(
-      new Map<string, string>([
-        ["terminal", "true"],
-        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.documentEndpoint).host],
-      ])
-    );
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
  });

-  it("getTerminalParams: Test for Mongo 3.6 terminal", () => {
-    const terminal: NotebookTerminalComponent = createMongo36Terminal();
-    const params: Map<string, string> = terminal.getTerminalParams();
+  it("renders mongo 3.6 shell", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testMongo36Account,
+      notebookServerInfo: testMongoNotebookServerInfo,
+    };

-    expect(params).toEqual(
-      new Map<string, string>([
-        ["terminal", "true"],
-        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.mongoEndpoint).host],
-      ])
-    );
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
  });

-  it("getTerminalParams: Test for Cassandra terminal", () => {
-    const terminal: NotebookTerminalComponent = createCassandraTerminal();
-    const params: Map<string, string> = terminal.getTerminalParams();
+  it("renders cassandra shell", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testCassandraAccount,
+      notebookServerInfo: testCassandraNotebookServerInfo,
+    };

-    expect(params).toEqual(
-      new Map<string, string>([
-        ["terminal", "true"],
-        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.cassandraEndpoint).host],
-      ])
-    );
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
  });
 });
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
@ -2,12 +2,12 @@
 * Wrapper around Notebook server terminal
 */

+import postRobot from "post-robot";
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import * as StringUtils from "../../../Utils/StringUtils";
+import { TerminalProps } from "../../../Terminal/TerminalProps";
 import { userContext } from "../../../UserContext";
-import { TerminalQueryParams } from "../../../Common/Constants";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
+import * as StringUtils from "../../../Utils/StringUtils";

 export interface NotebookTerminalComponentProps {
  notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
@ -15,79 +15,69 @@ export interface NotebookTerminalComponentProps {
 }

 export class NotebookTerminalComponent extends React.Component<NotebookTerminalComponentProps> {
+  private terminalWindow: Window;
+
  constructor(props: NotebookTerminalComponentProps) {
    super(props);
  }

+  componentDidMount(): void {
+    this.sendPropsToTerminalFrame();
+  }
+
  public render(): JSX.Element {
    return (
      <div className="notebookTerminalContainer">
        <iframe
          title="Terminal to Notebook Server"
-          src={NotebookTerminalComponent.createNotebookAppSrc(this.props.notebookServerInfo, this.getTerminalParams())}
+          onLoad={(event) => this.handleFrameLoad(event)}
+          src="terminal.html"
        />
      </div>
    );
  }

-  public getTerminalParams(): Map<string, string> {
-    let params: Map<string, string> = new Map<string, string>();
-    params.set(TerminalQueryParams.Terminal, "true");
-
-    const terminalEndpoint: string = this.tryGetTerminalEndpoint();
-    if (terminalEndpoint) {
-      params.set(TerminalQueryParams.TerminalEndpoint, terminalEndpoint);
+  handleFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
+    this.terminalWindow = (event.target as HTMLIFrameElement).contentWindow;
+    this.sendPropsToTerminalFrame();
  }

-    return params;
+  sendPropsToTerminalFrame(): void {
+    if (!this.terminalWindow) {
+      return;
    }

-  public tryGetTerminalEndpoint(): string | null {
-    let terminalEndpoint: string | null;
+    const props: TerminalProps = {
+      terminalEndpoint: this.tryGetTerminalEndpoint(),
+      notebookServerEndpoint: this.props.notebookServerInfo?.notebookServerEndpoint,
+      authToken: this.props.notebookServerInfo?.authToken,
+      subscriptionId: userContext.subscriptionId,
+      apiType: userContext.apiType,
+      authType: userContext.authType,
+      databaseAccount: userContext.databaseAccount,
+    };

-    const notebookServerEndpoint: string = this.props.notebookServerInfo.notebookServerEndpoint;
+    postRobot.send(this.terminalWindow, "props", props, {
+      domain: window.location.origin,
+    });
+  }
+
+  public tryGetTerminalEndpoint(): string | undefined {
+    let terminalEndpoint: string | undefined;
+
+    const notebookServerEndpoint = this.props.notebookServerInfo?.notebookServerEndpoint;
    if (StringUtils.endsWith(notebookServerEndpoint, "mongo")) {
-      let mongoShellEndpoint: string = this.props.databaseAccount.properties.mongoEndpoint;
-      if (!mongoShellEndpoint) {
-        // mongoEndpoint is only available for Mongo 3.6 and higher.
-        // Fallback to documentEndpoint otherwise.
-        mongoShellEndpoint = this.props.databaseAccount.properties.documentEndpoint;
-      }
-      terminalEndpoint = mongoShellEndpoint;
+      // mongoEndpoint is only available for Mongo 3.6 and higher, fallback to documentEndpoint otherwise
+      terminalEndpoint =
+        this.props.databaseAccount?.properties.mongoEndpoint || this.props.databaseAccount?.properties.documentEndpoint;
    } else if (StringUtils.endsWith(notebookServerEndpoint, "cassandra")) {
-      terminalEndpoint = this.props.databaseAccount.properties.cassandraEndpoint;
+      terminalEndpoint = this.props.databaseAccount?.properties.cassandraEndpoint;
    }

    if (terminalEndpoint) {
      return new URL(terminalEndpoint).host;
    }
-    return null;
-  }

-  public static createNotebookAppSrc(
-    serverInfo: DataModels.NotebookWorkspaceConnectionInfo,
-    params: Map<string, string>
-  ): string {
-    if (!serverInfo.notebookServerEndpoint) {
-      handleError(
-        "Notebook server endpoint not defined. Terminal will fail to connect to jupyter server.",
-        "NotebookTerminalComponent/createNotebookAppSrc"
-      );
-      return "";
-    }
-
-    params.set(TerminalQueryParams.Server, serverInfo.notebookServerEndpoint);
-    if (serverInfo.authToken && serverInfo.authToken.length > 0) {
-      params.set(TerminalQueryParams.Token, serverInfo.authToken);
-    }
-
-    params.set(TerminalQueryParams.SubscriptionId, userContext.subscriptionId);
-
-    let result: string = "terminal.html?";
-    for (let key of params.keys()) {
-      result += `${key}=${encodeURIComponent(params.get(key))}&`;
-    }
-
-    return result;
+    return undefined;
  }
 }
--- a/src/Explorer/Controls/Notebook/snapshots/NotebookTerminalComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Notebook/snapshots/NotebookTerminalComponent.test.tsx.snap
@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotebookTerminalComponent renders cassandra shell 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
+
+exports[`NotebookTerminalComponent renders mongo 3.2 shell 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
+
+exports[`NotebookTerminalComponent renders mongo 3.6 shell 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
+
+exports[`NotebookTerminalComponent renders terminal 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
--- a/src/Terminal/TerminalProps.ts
+++ b/src/Terminal/TerminalProps.ts
@ -0,0 +1,13 @@
+import { AuthType } from "../AuthType";
+import * as DataModels from "../Contracts/DataModels";
+import { ApiType } from "../UserContext";
+
+export interface TerminalProps {
+  authToken: string;
+  notebookServerEndpoint: string;
+  terminalEndpoint: string;
+  databaseAccount: DataModels.DatabaseAccount;
+  authType: AuthType;
+  apiType: ApiType;
+  subscriptionId: string;
+}
--- a/src/Terminal/index.ts
+++ b/src/Terminal/index.ts
@ -1,43 +1,36 @@
 import { ServerConnection } from "@jupyterlab/services";
 import "@jupyterlab/terminal/style/index.css";
-import { HttpHeaders, TerminalQueryParams } from "../Common/Constants";
+import postRobot from "post-robot";
+import { HttpHeaders } from "../Common/Constants";
 import { Action } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { updateUserContext } from "../UserContext";
 import "./index.css";
 import { JupyterLabAppFactory } from "./JupyterLabAppFactory";
+import { TerminalProps } from "./TerminalProps";

-const getUrlVars = (): { [key: string]: string } => {
-  const vars: { [key: string]: string } = {};
-  window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, (_m, key, value): string => {
-    vars[key] = decodeURIComponent(value);
-    return value;
-  });
-  return vars;
-};
-
-const createServerSettings = (urlVars: { [key: string]: string }): ServerConnection.ISettings => {
+const createServerSettings = (props: TerminalProps): ServerConnection.ISettings => {
  let body: BodyInit | undefined;
  let headers: HeadersInit | undefined;
-  if (urlVars.hasOwnProperty(TerminalQueryParams.TerminalEndpoint)) {
+  if (props.terminalEndpoint) {
    body = JSON.stringify({
-      endpoint: urlVars[TerminalQueryParams.TerminalEndpoint],
+      endpoint: props.terminalEndpoint,
    });
    headers = {
      [HttpHeaders.contentType]: "application/json",
    };
  }

-  const server = urlVars[TerminalQueryParams.Server];
+  const server = props.notebookServerEndpoint;
  let options: Partial<ServerConnection.ISettings> = {
    baseUrl: server,
    init: { body, headers },
    fetch: window.parent.fetch,
  };
-  if (urlVars.hasOwnProperty(TerminalQueryParams.Token)) {
+  if (props.authToken) {
    options = {
      baseUrl: server,
-      token: urlVars[TerminalQueryParams.Token],
+      token: props.authToken,
      appendToken: true,
      init: { body, headers },
      fetch: window.parent.fetch,
@ -47,30 +40,41 @@ const createServerSettings = (urlVars: { [key: string]: string }): ServerConnect
  return ServerConnection.makeSettings(options);
 };

-const main = async (): Promise<void> => {
-  const urlVars = getUrlVars();
-
-  // Initialize userContext. Currently only subscriptionId is required by TelemetryProcessor
+const initTerminal = async (props: TerminalProps) => {
+  // Initialize userContext (only properties which are needed by TelemetryProcessor)
  updateUserContext({
-    subscriptionId: urlVars[TerminalQueryParams.SubscriptionId],
+    subscriptionId: props.subscriptionId,
+    apiType: props.apiType,
+    authType: props.authType,
+    databaseAccount: props.databaseAccount,
  });

-  const serverSettings = createServerSettings(urlVars);
-
+  const serverSettings = createServerSettings(props);
  const data = { baseUrl: serverSettings.baseUrl };
  const startTime = TelemetryProcessor.traceStart(Action.OpenTerminal, data);

  try {
-    if (urlVars.hasOwnProperty(TerminalQueryParams.Terminal)) {
    await JupyterLabAppFactory.createTerminalApp(serverSettings);
-    } else {
-      throw new Error("Only terminal is supported");
-    }
-
    TelemetryProcessor.traceSuccess(Action.OpenTerminal, data, startTime);
  } catch (error) {
    TelemetryProcessor.traceFailure(Action.OpenTerminal, data, startTime);
  }
 };

+const main = async (): Promise<void> => {
+  postRobot.on(
+    "props",
+    {
+      window: window.parent,
+      domain: window.location.origin,
+    },
+    async (event) => {
+      // Typescript definition for event is wrong. So read props by casting to <any>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const props = (event as any).data as TerminalProps;
+      await initTerminal(props);
+    }
+  );
+};
+
 window.addEventListener("load", main);