@oceanum/oceanumlab 4.6.1 → 4.6.2

package/lib/DatameshUI.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
 export declare class DatameshUI extends ReactWidget {
+    private _url;
+    /** `url` is the `datameshUiUrl` setting. */
+    constructor(_url: string);
+    /**
+     * Point the panel at the `datameshUiUrl` setting's new value. The iframe
+     * reloads only if its address actually changes.
+     */
+    set url(url: string);
+    /** The iframe's window, for telling its messages apart; `null` if none. */
+    get frame(): Window | null;
     render(): React.ReactElement;
 }

package/lib/DatameshUI.js

@@ -1,8 +1,26 @@
 import React from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
-import { DATAMESH_UI_SERVICE } from './constants';
+import { datameshUiSrc } from './datameshUiUrl';
 export class DatameshUI extends ReactWidget {
+    /** `url` is the `datameshUiUrl` setting. */
+    constructor(_url) {
+        super();
+        this._url = _url;
+    }
+    /**
+     * Point the panel at the `datameshUiUrl` setting's new value. The iframe
+     * reloads only if its address actually changes.
+     */
+    set url(url) {
+        this._url = url;
+        this.update();
+    }
+    /** The iframe's window, for telling its messages apart; `null` if none. */
+    get frame() {
+        var _a, _b;
+        return (_b = (_a = this.node.querySelector('iframe')) === null || _a === void 0 ? void 0 : _a.contentWindow) !== null && _b !== void 0 ? _b : null;
+    }
     render() {
-        return (React.createElement("iframe", { src: `${DATAMESH_UI_SERVICE}`, className: "datamesh-iframe" }));
+        return (React.createElement("iframe", { src: datameshUiSrc(this._url), className: "datamesh-iframe" }));
     }
 }

package/lib/DatameshWidget.d.ts

@@ -40,6 +40,10 @@ export interface IDatameshWidgetProps {
     name: string;
     icon: LabIcon;
     openDatameshUI: any;
+    /** The `datameshUiUrl` setting. */
+    datameshUiUrl: () => string;
+    /** The Datamesh UI panel's iframe window; `null` when the panel is closed. */
+    datameshUiFrame: () => Window | null;
     commands: CommandRegistry;
     getCurrentWidget: () => Widget;
 }

package/lib/DatameshWidget.js

@@ -10,6 +10,7 @@ import React from 'react';
 import { marked } from 'marked';
 import { DatasourceItem } from './DatasourceItem';
 import { OCEANUM_AI_BACKEND_URL } from './constants';
+import { isDatameshUiMessage } from './datameshUiUrl';
 import { describeProgress, onProgress } from './progress';
 // Configure marked for safe rendering
 marked.setOptions({
@@ -541,6 +542,11 @@ export class DatameshConnectWidget extends ReactWidget {
         window.addEventListener('message', this.receiveIFrameMessage.bind(this), false);
     }
     receiveIFrameMessage(event) {
+        // Any page or frame can post to this window; only the Datamesh UI panel
+        // may change the workspace.
+        if (!isDatameshUiMessage(event, this.props.datameshUiUrl(), this.props.datameshUiFrame())) {
+            return;
+        }
         if (event.data && event.data.action === 'workspace-modify') {
             this.datameshWorkspaceSpec = {
                 id: event.data.id,

package/lib/datameshUiUrl.d.ts

@@ -0,0 +1,15 @@
+/** The Datamesh UI address to use for a `datameshUiUrl` setting value. */
+export declare function validDatameshUiUrl(url: string | null | undefined): URL;
+/**
+ * The panel's iframe `src`: the Datamesh UI in embed mode, which hides the
+ * Oceanum.io navigator. Any query the setting already has is kept.
+ */
+export declare function datameshUiSrc(url: string | null | undefined): string;
+/**
+ * Whether a `message` event was posted by the Datamesh UI panel.
+ *
+ * Any page or frame can post to this window, so a message counts only when it
+ * comes from the panel's iframe (`frame`, its `contentWindow`; `null` when the
+ * panel is not open) and from the configured Datamesh UI's origin.
+ */
+export declare function isDatameshUiMessage(event: Pick<MessageEvent, 'origin' | 'source'>, url: string | null | undefined, frame: Window | null): boolean;

package/lib/datameshUiUrl.js

@@ -0,0 +1,43 @@
+/**
+ * The Datamesh UI panel's address, and which messages may come from it.
+ *
+ * The address is a setting (`datameshUiUrl`), so a deployment can point the
+ * panel at another Datamesh UI -- a dev one, say. A setting is typed in by
+ * hand, so anything that is not an http(s) URL falls back to the default
+ * rather than ending up in an iframe's `src`.
+ */
+import { DATAMESH_UI_SERVICE } from './constants';
+/** The Datamesh UI address to use for a `datameshUiUrl` setting value. */
+export function validDatameshUiUrl(url) {
+    try {
+        const parsed = new URL((url !== null && url !== void 0 ? url : '').trim());
+        if (parsed.protocol === 'https:' || parsed.protocol === 'http:') {
+            return parsed;
+        }
+    }
+    catch (_a) {
+        // Empty or not a URL: the default below.
+    }
+    return new URL(DATAMESH_UI_SERVICE);
+}
+/**
+ * The panel's iframe `src`: the Datamesh UI in embed mode, which hides the
+ * Oceanum.io navigator. Any query the setting already has is kept.
+ */
+export function datameshUiSrc(url) {
+    const src = validDatameshUiUrl(url);
+    src.searchParams.set('embed', '1');
+    return src.toString();
+}
+/**
+ * Whether a `message` event was posted by the Datamesh UI panel.
+ *
+ * Any page or frame can post to this window, so a message counts only when it
+ * comes from the panel's iframe (`frame`, its `contentWindow`; `null` when the
+ * panel is not open) and from the configured Datamesh UI's origin.
+ */
+export function isDatameshUiMessage(event, url, frame) {
+    return (!!frame &&
+        event.source === frame &&
+        event.origin === validDatameshUiUrl(url).origin);
+}

package/lib/index.js

@@ -15,7 +15,7 @@ import { snapshotFromIpynb, snapshotOf } from './notebookContext';
 import { notebookHost } from './notebookHost';
 import { KernelHandoff } from './kernelHandoff';
 import { runChatLoop, STOPPED } from './aiLoop';
-import { MAX_OBSERVE_ROUNDS } from './constants';
+import { DATAMESH_UI_SERVICE, MAX_OBSERVE_ROUNDS } from './constants';
 import '../style/index.css';
 import oceanumSvg from '../style/icons/oceanum.svg';
 // Theme-adaptive icon using currentColor (auto-adapts to light/dark themes)
@@ -39,6 +39,9 @@ export const datamesh_connect_extension = {
     ],
     activate: (app, palette, restorer, status, settingRegistry) => {
         console.log('Oceanum datamesh connect extension is loaded');
+        // The `datameshUiUrl` setting; the default until the settings load.
+        let datameshUiUrl = DATAMESH_UI_SERVICE;
+        const findDatameshUI = () => find(app.shell.widgets('main'), (widget) => widget.id === 'datamesh-ui');
         //Try to get the datamesh token from the settings
         const updateSettings = (set) => {
             const token = set.get('datameshToken');
@@ -50,6 +53,12 @@ export const datamesh_connect_extension = {
                 }).then(res => console.log(res));
             }
             window.injectToken = set.get('injectToken').user;
+            // An open Datamesh UI panel follows a change of address.
+            datameshUiUrl = set.get('datameshUiUrl').composite;
+            const datameshUI = findDatameshUI();
+            if (datameshUI) {
+                datameshUI.url = datameshUiUrl;
+            }
         };
         //Try to get the datamesh token from the envars
         Promise.all([app.restored, settingRegistry.load(PLUGIN_ID)])
@@ -67,14 +76,11 @@ export const datamesh_connect_extension = {
         };
         const openDatameshUI = (event) => {
             const widgetId = 'datamesh-ui';
-            const openWidget = find(app.shell.widgets('main'), (widget, index) => {
-                return widget.id === widgetId;
-            });
-            if (openWidget) {
+            if (findDatameshUI()) {
                 app.shell.activateById(widgetId);
                 return;
             }
-            const datameshUIWidget = new DatameshUI();
+            const datameshUIWidget = new DatameshUI(datameshUiUrl);
             datameshUIWidget.title.label = 'Oceanum Datamesh';
             datameshUIWidget.id = widgetId;
             datameshUIWidget.title.closable = true;
@@ -87,6 +93,8 @@ export const datamesh_connect_extension = {
             name: 'Datamesh Connect',
             icon: oceanumIcon,
             openDatameshUI: openDatameshUI,
+            datameshUiUrl: () => datameshUiUrl,
+            datameshUiFrame: () => { var _a, _b; return (_b = (_a = findDatameshUI()) === null || _a === void 0 ? void 0 : _a.frame) !== null && _b !== void 0 ? _b : null; },
             commands: app.commands,
             getCurrentWidget
         });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oceanum/oceanumlab",
-    "version": "4.6.1",
+    "version": "4.6.2",
     "description": "A Jupyterlab extension to interact with the Oceanum.io platform",
     "keywords": [
         "jupyter",

package/schema/datamesh-connect.json

@@ -18,6 +18,12 @@
       "description": "Inject Datamesh token into code.",
       "default": false
     },
+    "datameshUiUrl": {
+      "type": "string",
+      "title": "Datamesh UI URL",
+      "description": "Address of the Datamesh UI shown in the Datamesh panel. Use the address it is finally served from: the panel only accepts workspace updates from this address's origin, so an address that redirects to another origin will not update the workspace.",
+      "default": "https://ui.datamesh.oceanum.io"
+    },
     "autoRunCode": {
       "type": "boolean",
       "title": "Auto-run code",

package/src/DatameshUI.tsx

@@ -1,12 +1,31 @@
 import React from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
-import { DATAMESH_UI_SERVICE } from './constants';
+import { datameshUiSrc } from './datameshUiUrl';
 
 export class DatameshUI extends ReactWidget {
+  /** `url` is the `datameshUiUrl` setting. */
+  constructor(private _url: string) {
+    super();
+  }
+
+  /**
+   * Point the panel at the `datameshUiUrl` setting's new value. The iframe
+   * reloads only if its address actually changes.
+   */
+  set url(url: string) {
+    this._url = url;
+    this.update();
+  }
+
+  /** The iframe's window, for telling its messages apart; `null` if none. */
+  get frame(): Window | null {
+    return this.node.querySelector('iframe')?.contentWindow ?? null;
+  }
+
   render(): React.ReactElement {
     return (
       <iframe
-        src={`${DATAMESH_UI_SERVICE}`}
+        src={datameshUiSrc(this._url)}
         className="datamesh-iframe"
       ></iframe>
     );

package/src/DatameshWidget.tsx

@@ -22,6 +22,7 @@ import { marked } from 'marked';
 
 import { DatasourceItem } from './DatasourceItem';
 import { OCEANUM_AI_BACKEND_URL } from './constants';
+import { isDatameshUiMessage } from './datameshUiUrl';
 import { describeProgress, onProgress, type Progress } from './progress';
 
 // Configure marked for safe rendering
@@ -813,6 +814,10 @@ export interface IDatameshWidgetProps {
   name: string;
   icon: LabIcon;
   openDatameshUI: any;
+  /** The `datameshUiUrl` setting. */
+  datameshUiUrl: () => string;
+  /** The Datamesh UI panel's iframe window; `null` when the panel is closed. */
+  datameshUiFrame: () => Window | null;
   commands: CommandRegistry;
   getCurrentWidget: () => Widget;
 }
@@ -841,6 +846,17 @@ export class DatameshConnectWidget extends ReactWidget {
   }
 
   receiveIFrameMessage(event: MessageEvent): void {
+    // Any page or frame can post to this window; only the Datamesh UI panel
+    // may change the workspace.
+    if (
+      !isDatameshUiMessage(
+        event,
+        this.props.datameshUiUrl(),
+        this.props.datameshUiFrame()
+      )
+    ) {
+      return;
+    }
     if (event.data && event.data.action === 'workspace-modify') {
       this.datameshWorkspaceSpec = {
         id: event.data.id,

package/src/__tests__/datameshUiUrl.spec.ts

@@ -0,0 +1,154 @@
+import schema from '../../schema/datamesh-connect.json';
+import { DATAMESH_UI_SERVICE } from '../constants';
+import {
+  datameshUiSrc,
+  isDatameshUiMessage,
+  validDatameshUiUrl
+} from '../datameshUiUrl';
+
+describe('validDatameshUiUrl', () => {
+  it('is the default the settings schema offers', () => {
+    expect(schema.properties.datameshUiUrl.default).toBe(DATAMESH_UI_SERVICE);
+  });
+
+  it('takes an http(s) address as it is', () => {
+    expect(validDatameshUiUrl('https://ui.datamesh.oceanum.tech').href).toBe(
+      'https://ui.datamesh.oceanum.tech/'
+    );
+    expect(validDatameshUiUrl('http://localhost:3000').href).toBe(
+      'http://localhost:3000/'
+    );
+  });
+
+  it.each([
+    ['empty', ''],
+    ['blank', '   '],
+    ['missing', undefined],
+    ['null', null],
+    ['not a URL', 'not a url'],
+    ['a relative path', '/datamesh'],
+    ['a javascript: URL', 'javascript:alert(1)'],
+    ['a data: URL', 'data:text/html,<script>alert(1)</script>'],
+    ['a file: URL', 'file:///etc/passwd']
+  ])('falls back to the default for %s', (_, url) => {
+    expect(validDatameshUiUrl(url).href).toBe(`${DATAMESH_UI_SERVICE}/`);
+  });
+});
+
+describe('datameshUiSrc', () => {
+  it('opens the default Datamesh UI in embed mode', () => {
+    expect(datameshUiSrc(DATAMESH_UI_SERVICE)).toBe(
+      'https://ui.datamesh.oceanum.io/?embed=1'
+    );
+  });
+
+  it('keeps the query and fragment a custom address already has', () => {
+    const src = new URL(
+      datameshUiSrc('https://ui.datamesh.oceanum.tech/app?workspace=abc#top')
+    );
+
+    expect(src.origin).toBe('https://ui.datamesh.oceanum.tech');
+    expect(src.pathname).toBe('/app');
+    expect(src.searchParams.get('workspace')).toBe('abc');
+    expect(src.searchParams.get('embed')).toBe('1');
+    expect(src.hash).toBe('#top');
+  });
+
+  it('does not add embed twice', () => {
+    const src = new URL(
+      datameshUiSrc('https://ui.datamesh.oceanum.io?embed=0')
+    );
+
+    expect(src.searchParams.getAll('embed')).toEqual(['1']);
+  });
+
+  it('opens the default for an invalid address', () => {
+    expect(datameshUiSrc('not a url')).toBe(
+      'https://ui.datamesh.oceanum.io/?embed=1'
+    );
+  });
+
+  it('never puts a javascript: URL in the iframe', () => {
+    expect(datameshUiSrc('javascript:alert(1)')).toBe(
+      'https://ui.datamesh.oceanum.io/?embed=1'
+    );
+  });
+});
+
+describe('isDatameshUiMessage', () => {
+  const frame = {} as Window;
+  const other = {} as Window;
+
+  it('accepts a message from the panel at the configured origin', () => {
+    expect(
+      isDatameshUiMessage(
+        { origin: 'https://ui.datamesh.oceanum.io', source: frame },
+        DATAMESH_UI_SERVICE,
+        frame
+      )
+    ).toBe(true);
+  });
+
+  it('compares origins, not whole addresses', () => {
+    expect(
+      isDatameshUiMessage(
+        { origin: 'https://ui.datamesh.oceanum.tech', source: frame },
+        'https://ui.datamesh.oceanum.tech/app?workspace=abc',
+        frame
+      )
+    ).toBe(true);
+  });
+
+  it.each([
+    ['another site', 'https://evil.example'],
+    ['the production UI when a dev one is configured', DATAMESH_UI_SERVICE],
+    ['another port', 'https://ui.datamesh.oceanum.tech:8443'],
+    ['plain http', 'http://ui.datamesh.oceanum.tech'],
+    ['an opaque origin', 'null']
+  ])('rejects a message from %s', (_, origin) => {
+    expect(
+      isDatameshUiMessage(
+        { origin, source: frame },
+        'https://ui.datamesh.oceanum.tech',
+        frame
+      )
+    ).toBe(false);
+  });
+
+  it('checks the origin against the default for an invalid setting', () => {
+    expect(
+      isDatameshUiMessage(
+        { origin: 'https://ui.datamesh.oceanum.io', source: frame },
+        'javascript:alert(1)',
+        frame
+      )
+    ).toBe(true);
+    expect(
+      isDatameshUiMessage(
+        { origin: 'null', source: frame },
+        'javascript:alert(1)',
+        frame
+      )
+    ).toBe(false);
+  });
+
+  it('rejects the right origin from another window', () => {
+    expect(
+      isDatameshUiMessage(
+        { origin: 'https://ui.datamesh.oceanum.io', source: other },
+        DATAMESH_UI_SERVICE,
+        frame
+      )
+    ).toBe(false);
+  });
+
+  it('rejects every message while the panel is closed', () => {
+    expect(
+      isDatameshUiMessage(
+        { origin: 'https://ui.datamesh.oceanum.io', source: null },
+        DATAMESH_UI_SERVICE,
+        null
+      )
+    ).toBe(false);
+  });
+});

package/src/datameshUiUrl.ts

@@ -0,0 +1,51 @@
+/**
+ * The Datamesh UI panel's address, and which messages may come from it.
+ *
+ * The address is a setting (`datameshUiUrl`), so a deployment can point the
+ * panel at another Datamesh UI -- a dev one, say. A setting is typed in by
+ * hand, so anything that is not an http(s) URL falls back to the default
+ * rather than ending up in an iframe's `src`.
+ */
+import { DATAMESH_UI_SERVICE } from './constants';
+
+/** The Datamesh UI address to use for a `datameshUiUrl` setting value. */
+export function validDatameshUiUrl(url: string | null | undefined): URL {
+  try {
+    const parsed = new URL((url ?? '').trim());
+    if (parsed.protocol === 'https:' || parsed.protocol === 'http:') {
+      return parsed;
+    }
+  } catch {
+    // Empty or not a URL: the default below.
+  }
+  return new URL(DATAMESH_UI_SERVICE);
+}
+
+/**
+ * The panel's iframe `src`: the Datamesh UI in embed mode, which hides the
+ * Oceanum.io navigator. Any query the setting already has is kept.
+ */
+export function datameshUiSrc(url: string | null | undefined): string {
+  const src = validDatameshUiUrl(url);
+  src.searchParams.set('embed', '1');
+  return src.toString();
+}
+
+/**
+ * Whether a `message` event was posted by the Datamesh UI panel.
+ *
+ * Any page or frame can post to this window, so a message counts only when it
+ * comes from the panel's iframe (`frame`, its `contentWindow`; `null` when the
+ * panel is not open) and from the configured Datamesh UI's origin.
+ */
+export function isDatameshUiMessage(
+  event: Pick<MessageEvent, 'origin' | 'source'>,
+  url: string | null | undefined,
+  frame: Window | null
+): boolean {
+  return (
+    !!frame &&
+    event.source === frame &&
+    event.origin === validDatameshUiUrl(url).origin
+  );
+}

package/src/index.ts

@@ -21,7 +21,7 @@ import { snapshotFromIpynb, snapshotOf } from './notebookContext';
 import { notebookHost } from './notebookHost';
 import { KernelHandoff } from './kernelHandoff';
 import { runChatLoop, STOPPED } from './aiLoop';
-import { MAX_OBSERVE_ROUNDS } from './constants';
+import { DATAMESH_UI_SERVICE, MAX_OBSERVE_ROUNDS } from './constants';
 
 import '../style/index.css';
 
@@ -57,6 +57,15 @@ export const datamesh_connect_extension: JupyterFrontEndPlugin<void> = {
   ) => {
     console.log('Oceanum datamesh connect extension is loaded');
 
+    // The `datameshUiUrl` setting; the default until the settings load.
+    let datameshUiUrl = DATAMESH_UI_SERVICE;
+
+    const findDatameshUI = (): DatameshUI | undefined =>
+      find(
+        app.shell.widgets('main'),
+        (widget: Widget) => widget.id === 'datamesh-ui'
+      ) as DatameshUI | undefined;
+
     //Try to get the datamesh token from the settings
     const updateSettings = (set: ISettingRegistry.ISettings) => {
       const token = set.get('datameshToken');
@@ -68,6 +77,12 @@ export const datamesh_connect_extension: JupyterFrontEndPlugin<void> = {
         }).then(res => console.log(res));
       }
       window.injectToken = set.get('injectToken').user as boolean;
+      // An open Datamesh UI panel follows a change of address.
+      datameshUiUrl = set.get('datameshUiUrl').composite as string;
+      const datameshUI = findDatameshUI();
+      if (datameshUI) {
+        datameshUI.url = datameshUiUrl;
+      }
     };
     //Try to get the datamesh token from the envars
 
@@ -91,18 +106,12 @@ export const datamesh_connect_extension: JupyterFrontEndPlugin<void> = {
 
     const openDatameshUI = (event: any): void => {
       const widgetId = 'datamesh-ui';
-      const openWidget = find(
-        app.shell.widgets('main'),
-        (widget: Widget, index: number) => {
-          return widget.id === widgetId;
-        }
-      );
-      if (openWidget) {
+      if (findDatameshUI()) {
         app.shell.activateById(widgetId);
         return;
       }
 
-      const datameshUIWidget = new DatameshUI();
+      const datameshUIWidget = new DatameshUI(datameshUiUrl);
       datameshUIWidget.title.label = 'Oceanum Datamesh';
       datameshUIWidget.id = widgetId;
       datameshUIWidget.title.closable = true;
@@ -116,6 +125,8 @@ export const datamesh_connect_extension: JupyterFrontEndPlugin<void> = {
       name: 'Datamesh Connect',
       icon: oceanumIcon,
       openDatameshUI: openDatameshUI,
+      datameshUiUrl: () => datameshUiUrl,
+      datameshUiFrame: () => findDatameshUI()?.frame ?? null,
       commands: app.commands,
       getCurrentWidget
     });