altair-graphql-core 7.2.2 → 7.2.3

package/build/cjs/plugin/v3/frame-worker.d.ts

@@ -4,10 +4,22 @@ export declare const instanceTypes: {
     readonly PANEL: "panel";
 };
 export type InstanceType = (typeof instanceTypes)[keyof typeof instanceTypes];
-export interface FrameQueryParams {
+export interface FrameOptions {
+    /**
+     * Source origin of the parent window
+     */
     sc: string;
+    /**
+     * Plugin ID
+     */
     id: string;
+    /**
+     * Instance type of the plugin
+     */
     instanceType: InstanceType;
+    /**
+     * Additional parameters
+     */
     [key: string]: string;
 }
 export declare class PluginFrameWorker extends EvaluatorWorker {
@@ -17,7 +29,7 @@ export declare class PluginFrameWorker extends EvaluatorWorker {
     private params;
     constructor();
     getInstanceType(): InstanceType;
-    getParams(): FrameQueryParams;
+    getParams(): FrameOptions;
     onMessage<T extends string, P = unknown>(handler: (e: EventData<T, P>) => void): void;
     send(type: string, payload: any): void;
     onError(handler: (err: any) => void): void;

package/build/cjs/plugin/v3/frame-worker.js

@@ -10,10 +10,13 @@ class PluginFrameWorker extends worker_1.EvaluatorWorker {
     constructor() {
         super();
         this.instanceType = exports.instanceTypes.MAIN;
-        const params = Object.fromEntries(new URLSearchParams(window.location.search));
+        // Check for params in special params object on the window object first. Using srcdoc, we will set the params on the window object
+        const paramFromWindow = window.__ALTAIR_PLUGIN_PARAMS__;
+        const paramsFromUrl = Object.fromEntries(new URLSearchParams(window.location.search));
+        const params = paramFromWindow ?? paramsFromUrl;
         this.params = params;
-        // Get the source origin that embeds the iframe from the URL query parameter
         if (!params.sc) {
+            console.log('Invalid source provided!', paramFromWindow, paramsFromUrl);
             throw new Error('Invalid source provided!');
         }
         if (!params.id) {
@@ -38,7 +41,7 @@ class PluginFrameWorker extends worker_1.EvaluatorWorker {
         });
     }
     send(type, payload) {
-        window.parent.postMessage({ type, payload }, this.origin);
+        window.parent.postMessage({ type, payload, frameId: this.id }, this.origin);
     }
     onError(handler) {
         window.addEventListener('error', handler);

package/build/cjs/plugin/v3/manifest.d.ts

@@ -1,8 +1,14 @@
 import { PluginCapabilities } from './capabilities';
-interface PluginEntry {
+interface PluginHtmlEntry {
     type: 'html';
     path: string;
 }
+interface PluginJsEntry {
+    type: 'js';
+    scripts: string[];
+    styles: string[];
+}
+type PluginEntry = PluginHtmlEntry | PluginJsEntry;
 export interface PluginV3Manifest {
     /**
      * Version of manifest (should be 3). It is a control measure for variations in the plugin versions

package/build/cjs/plugin/v3/parent-worker.d.ts

@@ -1,13 +1,23 @@
 import { EvaluatorWorker, EventData } from '../../evaluator/worker';
 import { InstanceType } from './frame-worker';
-export interface PluginParentWorkerOptions {
+interface BasePluginParentWorkerOptions {
     id: string;
-    pluginEntrypointUrl: string;
     disableAppend?: boolean;
     instanceType?: InstanceType;
     additionalParams?: Record<string, string>;
     additionalSandboxAttributes?: string[];
 }
+interface PluginParentWorkerOptionsWithScripts extends BasePluginParentWorkerOptions {
+    type: 'scripts';
+    sandboxUrl: string;
+    scriptUrls: string[];
+    styleUrls: string[];
+}
+interface PluginParentWorkerOptionsWithUrl extends BasePluginParentWorkerOptions {
+    type: 'url';
+    pluginEntrypointUrl: string;
+}
+export type PluginParentWorkerOptions = PluginParentWorkerOptionsWithScripts | PluginParentWorkerOptionsWithUrl;
 export declare class PluginParentWorker extends EvaluatorWorker {
     private opts;
     constructor(opts: PluginParentWorkerOptions);
@@ -22,4 +32,5 @@ export declare class PluginParentWorker extends EvaluatorWorker {
     onError(handler: (err: unknown) => void): void;
     destroy(): void;
 }
+export {};
 //# sourceMappingURL=parent-worker.d.ts.map

package/build/cjs/plugin/v3/parent-worker.js

@@ -32,16 +32,26 @@ class PluginParentWorker extends worker_1.EvaluatorWorker {
             id: this.opts.id,
             instanceType: this.getInstanceType(),
         };
-        const url = (0, url_1.urlWithParams)(this.opts.pluginEntrypointUrl, params);
-        iframe.src = url;
+        // NOTE: Don't add allow-same-origin to the sandbox attribute!
         iframe.sandbox.add('allow-scripts');
-        iframe.sandbox.add('allow-same-origin');
         if (this.opts.additionalSandboxAttributes) {
             this.opts.additionalSandboxAttributes.forEach((attr) => {
                 iframe.sandbox.add(attr);
             });
         }
         iframe.referrerPolicy = 'no-referrer';
+        if (this.opts.type === 'scripts') {
+            const url = (0, url_1.urlWithParams)(this.opts.sandboxUrl, {
+                ...params,
+                sandbox_type: 'plugin',
+                plugin_sandbox_opts: JSON.stringify(this.opts),
+            });
+            iframe.src = url;
+        }
+        else if (this.opts.type === 'url') {
+            const url = (0, url_1.urlWithParams)(this.opts.pluginEntrypointUrl, params);
+            iframe.src = url;
+        }
         if (!this.opts.disableAppend) {
             document.body.appendChild(iframe);
         }
@@ -58,7 +68,11 @@ class PluginParentWorker extends worker_1.EvaluatorWorker {
     }
     onMessage(handler) {
         window.addEventListener('message', (e) => {
-            if (e.origin !== new URL(this.opts.pluginEntrypointUrl).origin) {
+            if (e.origin !== 'null' || e.source !== this.iframe.contentWindow) {
+                return;
+            }
+            if (e.data.frameId !== this.opts.id) {
+                console.error('Invalid frameId in data', e.data.frameId, this.opts.id);
                 return;
             }
             handler(e.data);
@@ -66,7 +80,13 @@ class PluginParentWorker extends worker_1.EvaluatorWorker {
     }
     send(type, payload) {
         this.frameReady().then(() => {
-            this.iframe.contentWindow?.postMessage({ type, payload }, this.opts.pluginEntrypointUrl);
+            this.iframe.contentWindow?.postMessage({ type, payload }, 
+            // https://web.dev/articles/sandboxed-iframes#safely_sandboxing_eval
+            // Note that we're sending the message to "*", rather than some specific
+            // origin. Sandboxed iframes which lack the 'allow-same-origin' header
+            // don't have an origin which you can target: you'll have to send to any
+            // origin, which might alow some esoteric attacks. Validate your output!
+            '*');
         });
     }
     onError(handler) {

package/build/cjs/utils/inject.d.ts

@@ -0,0 +1,3 @@
+export declare const injectScript: (url: string) => Promise<unknown>;
+export declare const injectStylesheet: (url: string) => Promise<unknown>;
+//# sourceMappingURL=inject.d.ts.map

package/build/cjs/utils/inject.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectStylesheet = exports.injectScript = void 0;
+const injectScript = (url) => {
+    return new Promise((resolve, reject) => {
+        const head = document.getElementsByTagName('head')[0];
+        if (!head) {
+            return reject(new Error('No head found!'));
+        }
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = url;
+        script.onload = () => resolve(null);
+        script.onerror = (err) => reject(err);
+        head.appendChild(script);
+    });
+};
+exports.injectScript = injectScript;
+const injectStylesheet = (url) => {
+    return new Promise((resolve, reject) => {
+        const head = document.getElementsByTagName('head')[0];
+        if (!head) {
+            return reject(new Error('No head found!'));
+        }
+        const style = document.createElement('link');
+        style.type = 'text/css';
+        style.rel = 'stylesheet';
+        style.href = url;
+        style.onload = () => resolve(null);
+        style.onerror = (err) => reject(err);
+        head.appendChild(style);
+    });
+};
+exports.injectStylesheet = injectStylesheet;
+//# sourceMappingURL=inject.js.map

package/build/plugin/v3/frame-worker.d.ts

@@ -4,10 +4,22 @@ export declare const instanceTypes: {
     readonly PANEL: "panel";
 };
 export type InstanceType = (typeof instanceTypes)[keyof typeof instanceTypes];
-export interface FrameQueryParams {
+export interface FrameOptions {
+    /**
+     * Source origin of the parent window
+     */
     sc: string;
+    /**
+     * Plugin ID
+     */
     id: string;
+    /**
+     * Instance type of the plugin
+     */
     instanceType: InstanceType;
+    /**
+     * Additional parameters
+     */
     [key: string]: string;
 }
 export declare class PluginFrameWorker extends EvaluatorWorker {
@@ -17,7 +29,7 @@ export declare class PluginFrameWorker extends EvaluatorWorker {
     private params;
     constructor();
     getInstanceType(): InstanceType;
-    getParams(): FrameQueryParams;
+    getParams(): FrameOptions;
     onMessage<T extends string, P = unknown>(handler: (e: EventData<T, P>) => void): void;
     send(type: string, payload: any): void;
     onError(handler: (err: any) => void): void;

package/build/plugin/v3/frame-worker.js

@@ -7,10 +7,13 @@ export class PluginFrameWorker extends EvaluatorWorker {
     constructor() {
         super();
         this.instanceType = instanceTypes.MAIN;
-        const params = Object.fromEntries(new URLSearchParams(window.location.search));
+        // Check for params in special params object on the window object first. Using srcdoc, we will set the params on the window object
+        const paramFromWindow = window.__ALTAIR_PLUGIN_PARAMS__;
+        const paramsFromUrl = Object.fromEntries(new URLSearchParams(window.location.search));
+        const params = paramFromWindow ?? paramsFromUrl;
         this.params = params;
-        // Get the source origin that embeds the iframe from the URL query parameter
         if (!params.sc) {
+            console.log('Invalid source provided!', paramFromWindow, paramsFromUrl);
             throw new Error('Invalid source provided!');
         }
         if (!params.id) {
@@ -35,7 +38,7 @@ export class PluginFrameWorker extends EvaluatorWorker {
         });
     }
     send(type, payload) {
-        window.parent.postMessage({ type, payload }, this.origin);
+        window.parent.postMessage({ type, payload, frameId: this.id }, this.origin);
     }
     onError(handler) {
         window.addEventListener('error', handler);

package/build/plugin/v3/manifest.d.ts

@@ -1,8 +1,14 @@
 import { PluginCapabilities } from './capabilities';
-interface PluginEntry {
+interface PluginHtmlEntry {
     type: 'html';
     path: string;
 }
+interface PluginJsEntry {
+    type: 'js';
+    scripts: string[];
+    styles: string[];
+}
+type PluginEntry = PluginHtmlEntry | PluginJsEntry;
 export interface PluginV3Manifest {
     /**
      * Version of manifest (should be 3). It is a control measure for variations in the plugin versions

package/build/plugin/v3/parent-worker.d.ts

@@ -1,13 +1,23 @@
 import { EvaluatorWorker, EventData } from '../../evaluator/worker';
 import { InstanceType } from './frame-worker';
-export interface PluginParentWorkerOptions {
+interface BasePluginParentWorkerOptions {
     id: string;
-    pluginEntrypointUrl: string;
     disableAppend?: boolean;
     instanceType?: InstanceType;
     additionalParams?: Record<string, string>;
     additionalSandboxAttributes?: string[];
 }
+interface PluginParentWorkerOptionsWithScripts extends BasePluginParentWorkerOptions {
+    type: 'scripts';
+    sandboxUrl: string;
+    scriptUrls: string[];
+    styleUrls: string[];
+}
+interface PluginParentWorkerOptionsWithUrl extends BasePluginParentWorkerOptions {
+    type: 'url';
+    pluginEntrypointUrl: string;
+}
+export type PluginParentWorkerOptions = PluginParentWorkerOptionsWithScripts | PluginParentWorkerOptionsWithUrl;
 export declare class PluginParentWorker extends EvaluatorWorker {
     private opts;
     constructor(opts: PluginParentWorkerOptions);
@@ -22,4 +32,5 @@ export declare class PluginParentWorker extends EvaluatorWorker {
     onError(handler: (err: unknown) => void): void;
     destroy(): void;
 }
+export {};
 //# sourceMappingURL=parent-worker.d.ts.map

package/build/plugin/v3/parent-worker.js

@@ -29,16 +29,26 @@ export class PluginParentWorker extends EvaluatorWorker {
             id: this.opts.id,
             instanceType: this.getInstanceType(),
         };
-        const url = urlWithParams(this.opts.pluginEntrypointUrl, params);
-        iframe.src = url;
+        // NOTE: Don't add allow-same-origin to the sandbox attribute!
         iframe.sandbox.add('allow-scripts');
-        iframe.sandbox.add('allow-same-origin');
         if (this.opts.additionalSandboxAttributes) {
             this.opts.additionalSandboxAttributes.forEach((attr) => {
                 iframe.sandbox.add(attr);
             });
         }
         iframe.referrerPolicy = 'no-referrer';
+        if (this.opts.type === 'scripts') {
+            const url = urlWithParams(this.opts.sandboxUrl, {
+                ...params,
+                sandbox_type: 'plugin',
+                plugin_sandbox_opts: JSON.stringify(this.opts),
+            });
+            iframe.src = url;
+        }
+        else if (this.opts.type === 'url') {
+            const url = urlWithParams(this.opts.pluginEntrypointUrl, params);
+            iframe.src = url;
+        }
         if (!this.opts.disableAppend) {
             document.body.appendChild(iframe);
         }
@@ -55,7 +65,11 @@ export class PluginParentWorker extends EvaluatorWorker {
     }
     onMessage(handler) {
         window.addEventListener('message', (e) => {
-            if (e.origin !== new URL(this.opts.pluginEntrypointUrl).origin) {
+            if (e.origin !== 'null' || e.source !== this.iframe.contentWindow) {
+                return;
+            }
+            if (e.data.frameId !== this.opts.id) {
+                console.error('Invalid frameId in data', e.data.frameId, this.opts.id);
                 return;
             }
             handler(e.data);
@@ -63,7 +77,13 @@ export class PluginParentWorker extends EvaluatorWorker {
     }
     send(type, payload) {
         this.frameReady().then(() => {
-            this.iframe.contentWindow?.postMessage({ type, payload }, this.opts.pluginEntrypointUrl);
+            this.iframe.contentWindow?.postMessage({ type, payload }, 
+            // https://web.dev/articles/sandboxed-iframes#safely_sandboxing_eval
+            // Note that we're sending the message to "*", rather than some specific
+            // origin. Sandboxed iframes which lack the 'allow-same-origin' header
+            // don't have an origin which you can target: you'll have to send to any
+            // origin, which might alow some esoteric attacks. Validate your output!
+            '*');
         });
     }
     onError(handler) {

package/build/utils/inject.d.ts

@@ -0,0 +1,3 @@
+export declare const injectScript: (url: string) => Promise<unknown>;
+export declare const injectStylesheet: (url: string) => Promise<unknown>;
+//# sourceMappingURL=inject.d.ts.map

package/build/utils/inject.js

@@ -0,0 +1,30 @@
+export const injectScript = (url) => {
+    return new Promise((resolve, reject) => {
+        const head = document.getElementsByTagName('head')[0];
+        if (!head) {
+            return reject(new Error('No head found!'));
+        }
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = url;
+        script.onload = () => resolve(null);
+        script.onerror = (err) => reject(err);
+        head.appendChild(script);
+    });
+};
+export const injectStylesheet = (url) => {
+    return new Promise((resolve, reject) => {
+        const head = document.getElementsByTagName('head')[0];
+        if (!head) {
+            return reject(new Error('No head found!'));
+        }
+        const style = document.createElement('link');
+        style.type = 'text/css';
+        style.rel = 'stylesheet';
+        style.href = url;
+        style.onload = () => resolve(null);
+        style.onerror = (err) => reject(err);
+        head.appendChild(style);
+    });
+};
+//# sourceMappingURL=inject.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "altair-graphql-core",
   "description": "Several of the core logic for altair graphql client",
-  "version": "7.2.2",
+  "version": "7.2.3",
   "author": "Samuel Imolorhe <altair@sirmuel.design> (https://sirmuel.design)",
   "bugs": "https://github.com/altair-graphql/altair/issues",
   "dependencies": {
@@ -76,5 +76,5 @@
     "test": "jest"
   },
   "types": "./build/index.d.ts",
-  "gitHead": "b4bb105113b498fc8a82fbc3c1e1fc42d9531155"
+  "gitHead": "ddd163425d45994df9b5f214f848f597a9c85f81"
 }