ampproject · zhouyx · Dec 18, 2020
diff --git a/demo/call-function/call-function.js b/demo/call-function/call-function.js
@@ -1,3 +1,5 @@
+// Some comment
+console.log('authorScript excuted');
 function performComplexMath() {
   return Math.random() * 1000;
 }
@@ -37,3 +39,5 @@ function concat() {
 // Manual test for .onerror, by scheduling an unhandled error
 // 2s in via prompt which isn't valid in a Worker.
 setTimeout(() => prompt(), 2000);
+
+console.log('authorScript end');
diff --git a/demo/call-function/index.html b/demo/call-function/index.html
@@ -4,15 +4,16 @@
     <meta charset="utf-8" />
     <title>Call function</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script src="/dist/amp/main.mjs" type="module"></script>
+    <script src="/dist/amp-debug/" type="module"></script>
   </head>
   <body>
     <div src="call-function.js" id="upgrade-me"></div>
     <script type="module">
-      import { upgradeElement } from "/dist/amp/main.mjs";
+      import { upgradeElement } from "/dist/amp-debug/main.mjs";
       upgradeElement(
         document.getElementById("upgrade-me"),
-        "/dist/amp/worker/worker.nodom.mjs"
+        "/dist/amp-debug/worker/worker.nodom.mjs",
+        () => {}, () => {}, true
       ).then(async (worker) => {
         worker
           .callFunction("performComplexMath")

diff --git a/src/main-thread/configuration.ts b/src/main-thread/configuration.ts
@@ -46,6 +46,9 @@ export interface InboundWorkerDOMConfiguration {
   hydrateFilter?: HydrationFilterPredicate;
   // Executor Filter, allow list
   executorsAllowed?: Array<number>;
+  // Sandbox in iframe
+  // QQ: Do we want to expose the sandbox config to non AMP version? If not how to limit the support?
+  sandboxInIframe?: Boolean;
 
   // ---- Optional Callbacks
   // Called when worker consumes the page's initial DOM state.
@@ -74,6 +77,8 @@ export interface WorkerDOMConfiguration {
   sanitizer?: Sanitizer;
   // Hydration Filter Predicate
   hydrateFilter?: HydrationFilterPredicate;
+  // Sandbox in iframe
+  sandboxInIframe?: Boolean;
 
   // ---- Optional Callbacks
   // Called when worker consumes the page's initial DOM state.

diff --git a/src/main-thread/index.amp.ts b/src/main-thread/index.amp.ts
@@ -45,6 +45,7 @@ export function upgradeElement(
   domURL: string,
   longTask?: LongTaskFunction,
   sanitizer?: Sanitizer,
+  sandboxInIframe?: Boolean,
 ): Promise<ExportedWorker | null> {
   const authorURL = baseElement.getAttribute('src');
   if (authorURL) {
@@ -54,6 +55,7 @@ export function upgradeElement(
       longTask,
       hydrateFilter,
       sanitizer,
+      sandboxInIframe,
     });
   }
   return Promise.resolve(null);

diff --git a/src/main-thread/worker-stub.ts b/src/main-thread/worker-stub.ts
@@ -0,0 +1,130 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { MessageToWorker } from '../transfer/Messages';
+
+declare type MessageEventHandler = (event: MessageEvent) => void;
+// const enum MessageToIframeType {
+//   INIT = 'init-worker',
+//   IFRAME_READY = 'iframe-ready',
+// }
+
+interface MessageToIframe {
+  data: {
+    type: string;
+  };
+  //source: Window,
+}
+
+/**
+ * A lightweight Document stub for the no-dom amp binary.
+ */
+export class IframeWorker {
+  // Internal variables.
+  private iframe: HTMLIFrameElement;
+  public onmessageerror: Function;
+  public terminate: Function;
+  public onerror: Function;
+  private handler?: MessageEventHandler;
+
+  /**
+   * @param workerDOMSrc
+   */
+  constructor(workerDOMSrc: String) {
+    this.iframe = document.createElement('iframe');
+    this.iframe.setAttribute('sandbox', 'allow-scripts');
+    this.initWorkerInIframe(workerDOMSrc);
+    this.listenToWorker();
+  }
+
+  isSrcSupported() {
+    // Safari doesn't allow worker script from blobUrl, load iframe from cdn.ampproject.net
+    return true;
+  }
+
+  initWorkerInIframe(workerDOMSrc: String) {
+    if (!this.isSrcSupported()) {
+      console.error('Browser Not Supported Yet');
+    } else {
+      // TODO: Compile iframe srcdoc, and move out of the function
+      const iframeCode: string = `
+        parent.postMessage({
+          'type': 'iframe-ready',
+        }, '*');
+        window.addEventListener('message', event => {
+          const data = event.data;
+          const origin = event.origin;
+          if (data.type == 'init-worker') {
+            const src = data.workerDOMSrc;
+            const worker = new Worker(URL.createObjectURL(new Blob([src])));
+          }
+        });
+      `;
+      const iframeHtml: string = `
+        <html>
+          <!-- Heres a comment  -->
+          <sxript>${iframeCode}</sxript>
+        </html>
+      `.replace(/sxript/g, 'script');
+      this.iframe.setAttribute('srcdoc', iframeHtml);
+    }
+
+    //
+    const listener = (event: MessageToIframe) => {
+      // TODO: Need to verify event.source
+      // How to declare event source in MessageToIframe?
+      if (this.iframe.contentWindow && event.data.type == 'iframe-ready') {
+        this.iframe.contentWindow.postMessage(
+          {
+            type: 'init-worker',
+            workerDOMSrc: workerDOMSrc,
+          },
+          '*',
+        );
+      }
+    };
+    window.addEventListener('message', listener);
+    document.body.appendChild(this.iframe);
+  }
+
+  listenToWorker() {
+    this.iframe.addEventListener('message', (event) => {
+      if (event.type == 'worker-response') {
+        if (this.handler) {
+          // Declare the event format
+          this.handler(new MessageEvent(event.type, {}));
+        }
+      }
+    });
+  }
+
+  public postMessage(message: MessageToWorker, transferables: Array<Transferable>) {
+    if (this.iframe.contentWindow) {
+      this.iframe.contentWindow.postMessage(
+        {
+          type: 'worker-msg',
+          message: message,
+        },
+        '*',
+        transferables,
+      );
+    }
+  }
+
+  set onmessage(handler: MessageEventHandler) {
+    this.handler = handler;
+  }
+}
diff --git a/src/main-thread/worker.ts b/src/main-thread/worker.ts
@@ -21,12 +21,13 @@ import { readableHydrateableRootNode, readableMessageToWorker } from './debuggin
 import { NodeContext } from './nodes';
 import { TransferrableKeys } from '../transfer/TransferrableKeys';
 import { StorageLocation } from '../transfer/TransferrableStorage';
+import { IframeWorker } from './worker-stub';
 
 // TODO: Sanitizer storage init is likely broken, since the code currently
 // attempts to stringify a Promise.
 export type StorageInit = { storage: Storage | Promise<StorageValue>; errorMsg: null } | { storage: null; errorMsg: string };
 export class WorkerContext {
-  private [TransferrableKeys.worker]: Worker;
+  private [TransferrableKeys.worker]: Worker | IframeWorker;
   private nodeContext: NodeContext;
   private config: WorkerDOMConfiguration;
 
@@ -80,7 +81,15 @@ export class WorkerContext {
       }).call(self);
       ${authorScript}
       //# sourceURL=${encodeURI(config.authorURL)}`;
-    this[TransferrableKeys.worker] = new Worker(URL.createObjectURL(new Blob([code])));
+
+    // Wrap worker in sandbox iframe if config.sandboxInIframe is set
+    if (config.sandboxInIframe) {
+      // Wrap worker in iframe
+      this[TransferrableKeys.worker] = new IframeWorker(code);
+    } else {
+      this[TransferrableKeys.worker] = new Worker(URL.createObjectURL(new Blob([code])));
+    }
+
     if (WORKER_DOM_DEBUG) {
       console.info('debug', 'hydratedNode', readableHydrateableRootNode(baseElement, config, this));
     }
@@ -92,7 +101,7 @@ export class WorkerContext {
   /**
    * Returns the private worker.
    */
-  get worker(): Worker {
+  get worker(): Worker | IframeWorker {
     return this[TransferrableKeys.worker];
   }