Only allow iframe embedding

_headers.ejs

@@ -1,6 +1,7 @@
 # Long-term cache by default.
 /*
   Cache-Control: max-age=31536000
+  Access-Control-Allow-Origin: *
 
 # And here are the exceptions:
 /
@@ -9,6 +10,9 @@
 /serviceworker.js
   Cache-Control: no-cache
 
+/sdk.mjs
+  Cache-Control: no-cache
+
 /manifest.json
   Cache-Control: must-revalidate, max-age=3600
 

package.json

@@ -4,9 +4,10 @@
   "version": "1.6.0",
   "license": "apache-2.0",
   "scripts": {
+    "build:sdk": "microbundle --compress -f es -o build/sdk.mjs -i src/sdk.ts",
     "start": "webpack-dev-server --host 0.0.0.0 --hot",
-    "build": "webpack -p",
-    "lint": "tslint -c tslint.json  -p tsconfig.json -t verbose",
+    "build": "webpack -p && npm run build:sdk",
+    "lint": "tslint -c tslint.json -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
     "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
     "sizereport": "node config/size-report.js"
   },
@@ -22,12 +23,12 @@
     "@webcomponents/custom-elements": "1.2.1",
     "@webpack-cli/serve": "0.1.3",
     "assets-webpack-plugin": "3.9.10",
-    "chokidar": "2.1.2",
     "chalk": "2.4.2",
+    "chokidar": "2.1.2",
     "classnames": "2.2.6",
     "clean-webpack-plugin": "1.0.1",
-    "comlink": "3.1.1",
     "copy-webpack-plugin": "5.0.1",
+    "comlink": "^3.2.0",
     "critters-webpack-plugin": "2.3.0",
     "css-loader": "1.0.1",
     "ejs": "2.6.1",
@@ -41,6 +42,7 @@
     "idb-keyval": "3.1.0",
     "linkstate": "1.1.1",
     "loader-utils": "1.2.3",
+    "microbundle": "^0.10.1",
     "mini-css-extract-plugin": "0.5.0",
     "minimatch": "3.0.4",
     "node-fetch": "2.3.0",

src/components/App/client-api.ts

@@ -0,0 +1,106 @@
+import App from './index';
+import { SquooshStartEventType, SquooshSideEventType } from '../compress/index';
+
+import { expose } from 'comlink';
+
+export interface ReadyMessage {
+  type: 'READY';
+  version: string;
+}
+
+export function exposeAPI(app: App) {
+  if (window === top) {
+    // Someone opened Squoosh in a window rather than an iframe.
+    // This can be deceiving and we won’t allow that.
+    return;
+  }
+  self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION }, '*');
+  self.addEventListener('message', (event: MessageEvent) => {
+    if (event.data !== 'READY?') {
+      return;
+    }
+    event.stopImmediatePropagation();
+    self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION } as ReadyMessage, '*');
+  });
+  expose(new API(app), self.parent);
+}
+
+function addRemovableGlobalListener<
+  K extends keyof GlobalEventHandlersEventMap
+>(name: K, listener: (ev: GlobalEventHandlersEventMap[K]) => void): () => void {
+  document.addEventListener(name, listener);
+  return () => document.removeEventListener(name, listener);
+}
+
+/**
+ * The API class contains the methods that are exposed via Comlink to the
+ * outside world.
+ */
+export class API {
+  /**
+   * Internal constructor. Do not call.
+   */
+  constructor(private _app: App) {}
+
+  /**
+   * Loads a given file into Squoosh.
+   * @param blob The `Blob` to load
+   * @param name The name of the file. The extension of this name will be used
+   * to deterime which decoder to use.
+   */
+  setFile(blob: Blob, name: string) {
+    return new Promise((resolve) => {
+      document.addEventListener(SquooshStartEventType.START, () => resolve(), {
+        once: true,
+      });
+      this._app.openFile(new File([blob], name));
+    });
+  }
+
+  /**
+   * Grabs one side from Squoosh as a `File`.
+   * @param side The side which to grab. 0 = left, 1 = right.
+   */
+  async getBlob(side: 0 | 1) {
+    if (!this._app.state.file || !this._app.compressInstance) {
+      throw new Error('No file has been loaded');
+    }
+    if (
+      !this._app.compressInstance!.state.loading &&
+      !this._app.compressInstance!.state.sides[side].loading
+    ) {
+      return this._app.compressInstance!.state.sides[side].file;
+    }
+
+    const listeners: ReturnType<typeof addRemovableGlobalListener>[] = [];
+
+    const r = new Promise((resolve, reject) => {
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.DONE, (event) => {
+          if (event.side !== side) {
+            return;
+          }
+          resolve(this._app.compressInstance!.state.sides[side].file);
+        }),
+      );
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.ABORT, (event) => {
+          if (event.side !== side) {
+            return;
+          }
+          reject(new DOMException('Aborted', 'AbortError'));
+        }),
+      );
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.ERROR, (event) => {
+          if (event.side !== side) {
+            return;
+          }
+          reject(event.error);
+        }),
+      );
+    });
+    r.then(() => listeners.forEach(remove => remove()));
+    return r;
+  }
+}

src/components/App/index.tsx

@@ -36,6 +36,7 @@ export default class App extends Component<Props, State> {
     file: undefined,
     Compress: undefined,
   };
+  compressInstance?: import('../compress').default;
 
   snackbar?: SnackBarElement;
 
@@ -69,6 +70,14 @@ export default class App extends Component<Props, State> {
     });
 
     window.addEventListener('popstate', this.onPopState);
+    import(
+      /* webpackChunkName: "client-api" */
+      './client-api').then(m => m.exposeAPI(this));
+  }
+
+  @bind openFile(file: File | Fileish) {
+    this.openEditor();
+    this.setState({ file });
   }
 
   @bind
@@ -81,8 +90,7 @@ export default class App extends Component<Props, State> {
 
   @bind
   private onIntroPickFile(file: File | Fileish) {
-    this.openEditor();
-    this.setState({ file });
+    return this.openFile(file);
   }
 
   @bind
@@ -110,7 +118,12 @@ export default class App extends Component<Props, State> {
           {!isEditorOpen
             ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
             : (Compress)
-              ? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
+              ? <Compress
+                  ref={i => this.compressInstance = i}
+                  file={file!}
+                  showSnack={this.showSnack}
+                  onBack={back}
+              />
               : <loading-spinner class={style.appLoader}/>
           }
           <snack-bar ref={linkRef(this, 'snackbar')} />

src/components/compress/index.tsx

@@ -32,6 +32,51 @@ import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
 import SnackBarElement from '../../lib/SnackBar';
 import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
 
+// Safari and Edge don't quite support extending Event, this works around it.
+function fixExtendedEvent(instance: Event, type: Function) {
+  if (!(instance instanceof type)) {
+    Object.setPrototypeOf(instance, type.prototype);
+  }
+}
+export enum SquooshStartEventType {
+  START = 'squoosh:start',
+}
+export class SquooshStartEvent extends Event {
+  constructor(init?: EventInit) {
+    super(SquooshStartEventType.START, init);
+    fixExtendedEvent(this, SquooshStartEvent);
+  }
+}
+
+export const enum SquooshSideEventType {
+  DONE = 'squoosh:done',
+  ABORT = 'squoosh:abort',
+  ERROR = 'squoosh:error',
+}
+export interface SquooshSideEventInit extends EventInit {
+  side: 0|1;
+  error?: Error;
+}
+export class SquooshSideEvent extends Event {
+  public side: 0|1;
+  public error?: Error;
+  constructor(name: SquooshSideEventType, init: SquooshSideEventInit) {
+    super(name, init);
+    fixExtendedEvent(this, SquooshSideEvent);
+    this.side = init.side;
+    this.error = init.error;
+  }
+}
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    [SquooshStartEventType.START]: SquooshStartEvent;
+    [SquooshSideEventType.DONE]: SquooshSideEvent;
+    [SquooshSideEventType.ABORT]: SquooshSideEvent;
+    [SquooshSideEventType.ERROR]: SquooshSideEvent;
+  }
+}
+
 export interface SourceImage {
   file: File | Fileish;
   decoded: ImageData;
@@ -395,8 +440,7 @@ export default class Compress extends Component<Props, State> {
     // Either processor is good enough here.
     const processor = this.leftProcessor;
 
-    this.setState({ loadingCounter, loading: true });
-
+    this.setState({ loadingCounter, loading: true }, this.signalLoadingStart);
     // Abort any current encode jobs, as they're redundant now.
     this.leftProcessor.abortCurrent();
     this.rightProcessor.abortCurrent();
@@ -474,6 +518,35 @@ export default class Compress extends Component<Props, State> {
     );
   }
 
+  @bind
+  private dispatchSideEvent(type: SquooshSideEventType, init: SquooshSideEventInit) {
+    document.dispatchEvent(
+      new SquooshSideEvent(type, init),
+    );
+  }
+
+  @bind
+  private signalLoadingStart() {
+    document.dispatchEvent(
+      new SquooshStartEvent(),
+    );
+  }
+
+  @bind
+  private signalProcessingDone(side: 0|1) {
+    this.dispatchSideEvent(SquooshSideEventType.DONE, { side });
+  }
+
+  @bind
+  private signalProcessingAbort(side: 0|1) {
+    this.dispatchSideEvent(SquooshSideEventType.ABORT, { side });
+  }
+
+  @bind
+  private signalProcessingError(side: 0|1, msg: string) {
+    this.dispatchSideEvent(SquooshSideEventType.ERROR, { side, error: new Error(msg) });
+  }
+
   private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
     const {
       skipPreprocessing = false,
@@ -535,8 +608,13 @@ export default class Compress extends Component<Props, State> {
           });
         }
       } catch (err) {
-        if (err.name === 'AbortError') return;
-        this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`);
+        if (err.name === 'AbortError') {
+          this.signalProcessingAbort(index as 0|1);
+          return;
+        }
+        const errorMsg = `Processing error (type=${settings.encoderState.type}): ${err}`;
+        this.signalProcessingError(index as 0|1, errorMsg);
+        this.props.showSnack(errorMsg);
         throw err;
       }
     }
@@ -559,7 +637,7 @@ export default class Compress extends Component<Props, State> {
       encodedSettings: settings,
     });
 
-    this.setState({ sides });
+    this.setState({ sides }, () => this.signalProcessingDone(index as 0|1));
   }
 
   render({ onBack }: Props, { loading, sides, source, mobileView }: State) {

src/missing-types.d.ts

@@ -34,6 +34,7 @@ declare module 'url-loader!*' {
 }
 
 declare var VERSION: string;
+declare var MAJOR_VERSION: string;
 
 declare var ga: {
   (...args: any[]): void;

src/sdk.ts

@@ -0,0 +1,41 @@
+import { proxy, ProxyResult } from 'comlink';
+
+import { API, ReadyMessage } from './components/App/client-api';
+
+// @ts-ignore
+import { version } from '../package.json';
+const MAJOR_VERSION = (version.split('.')[0] as string);
+
+/**
+ * This function will load an iFrame
+ * @param {HTMLIFrameElement} ifr iFrame that will be used to load squoosh
+ * @param {string} src URL of squoosh instance to use
+ */
+export default async function loader(
+  ifr: HTMLIFrameElement,
+  src: string = 'https://squoosh.app',
+): Promise<ProxyResult<API>> {
+  ifr.src = src;
+  await new Promise(resolve => (ifr.onload = resolve));
+  ifr.contentWindow!.postMessage('READY?', '*');
+  await new Promise((resolve) => {
+    window.addEventListener('message', function l(ev) {
+      const msg = ev.data as ReadyMessage;
+      if (!msg || msg.type !== 'READY') {
+        return;
+      }
+      if (msg.version !== MAJOR_VERSION) {
+        throw Error(
+          `Version mismatch. SDK version ${MAJOR_VERSION}, Squoosh version ${
+            msg.version
+          }`,
+        );
+      }
+      ev.stopPropagation();
+      window.removeEventListener('message', l);
+      resolve();
+    });
+  });
+
+  return proxy(ifr.contentWindow!);
+}

webpack.config.js

@@ -263,6 +263,7 @@ module.exports = async function (_, env) {
       // Inline constants during build, so they can be folded by UglifyJS.
       new webpack.DefinePlugin({
         VERSION: JSON.stringify(VERSION),
+        MAJOR_VERSION: JSON.stringify(VERSION.split(".")[0]),
         // We set node.process=false later in this config.
         // Here we make sure if (process && process.foo) still works:
         process: '{}'