#105 Add sandbox execution; move JQ to it

src/contentScript/contentScriptCore.ts

@@ -39,6 +39,7 @@ import {
 } from "@/errors/contextInvalidated";
 import { uncaughtErrorHandlers } from "@/telemetry/reportUncaughtErrors";
 import { UUID } from "@/core";
+import createSandbox from "@/sandbox/messenger/api";
 
 function ignoreContextInvalidatedErrors(
   errorEvent: ErrorEvent | PromiseRejectionEvent
@@ -64,6 +65,7 @@ export async function init(uuid: UUID): Promise<void> {
   addListenerForUpdateSelectedElement();
   initTelemetry();
   initToaster();
+  createSandbox();
 
   const sender = await whoAmI();
 

src/manifest.json

@@ -27,6 +27,9 @@
       "run_at": "document_idle"
     }
   ],
+  "sandbox": {
+    "pages": ["sandbox.html"]
+  },
   "optional_permissions": ["clipboardWrite", "*://*/*"],
   "permissions": [
     "activeTab",
@@ -47,6 +50,7 @@
   "web_accessible_resources": [
     "css/*",
     "bundles/*",
+    "sandbox.html",
     "frame.html",
     "frame.css",
     "sidebar.html",

src/sandbox/messenger/api.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2022 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/** @file It doesn't actually use the Messenger but this file tries to replicate the pattern */
+
+import postMessage from "@/utils/postMessage";
+import { once } from "lodash";
+
+const hiddenIframeStyle = {
+  position: "absolute",
+  bottom: "105%",
+  right: "105%",
+  visibility: "hidden",
+};
+
+const getSandbox = once(() => {
+  const iframe = document.createElement("iframe");
+  iframe.src = chrome.runtime.getURL("sandbox.html");
+  Object.assign(iframe.style, hiddenIframeStyle);
+  return iframe;
+});
+
+export default function createSandbox() {
+  const sandbox = getSandbox();
+  document.body.append(sandbox);
+  setTimeout(async () => {
+    console.log("SANDBOX: sending PING");
+    console.log("SANDBOX: received PING response:", await ping());
+  }, 1000);
+}
+
+export async function ping() {
+  return postMessage({
+    channel: getSandbox().contentWindow,
+    id: "SANDBOX_PING",
+  });
+}

src/sandbox/messenger/registration.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2022 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { addPostMessageListener } from "@/utils/postMessage";
+
+/** @file It doesn't actually use the Messenger but this file tries to replicate the pattern */
+
+export default function registerMessenger(): void {
+  addPostMessageListener("SANDBOX_PING", (payload) => {
+    console.log("SANDBOX: Received PING payload:", payload);
+    return "pong";
+  });
+}

src/sandbox/sandbox.html

@@ -0,0 +1,19 @@
+<!--
+  ~ Copyright (C) 2022 PixieBrix, Inc.
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<script src="sandbox.js"></script>

src/sandbox/sandbox.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2022 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import registerMessenger from "./messenger/registration";
+
+console.log("SANDBOX: iframe loaded");
+
+registerMessenger();

src/utils/postMessage.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2022 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { UUID } from "@/core";
+import { uuidv4 } from "@/types/helpers";
+import pDefer from "p-defer";
+import pTimeout from "p-timeout";
+import { JsonValue, Promisable } from "type-fest";
+import validUuidRegex from "@/vendors/validateUuid";
+
+const TIMEOUT_MS = 3000;
+
+type Payload = JsonValue;
+
+interface PixiebrixPacket {
+  id: string;
+  payload?: Payload;
+  pixiebrix: UUID;
+}
+
+interface PostMessageInfo {
+  id: string;
+  payload?: Payload;
+  channel: Window;
+}
+
+type PostMessageListener = (payload: Payload) => Promisable<Payload>;
+
+/** Use the postMessage API but expect a response from the target */
+export default async function postMessage({
+  id,
+  payload,
+  channel,
+}: PostMessageInfo): Promise<Payload> {
+  const packet: PixiebrixPacket = {
+    id,
+    payload,
+    pixiebrix: uuidv4(),
+  };
+  const { promise, resolve } = pDefer<Payload>();
+  const controller = new AbortController();
+
+  const listener = ({ origin, data }: MessageEvent<PixiebrixPacket>): void => {
+    if (origin === "null" && data?.pixiebrix === packet.pixiebrix) {
+      resolve(data.payload);
+    }
+  };
+
+  window.addEventListener("message", listener, { signal: controller.signal });
+
+  // The origin must be "*" because it's reported as "null" to the outside world
+  // https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#using_window.postmessage_in_extensions_non-standard
+  channel.postMessage(packet, "*");
+
+  try {
+    return await pTimeout(promise, {
+      milliseconds: TIMEOUT_MS,
+      message: `Message ${id} did not receive a response within ${
+        TIMEOUT_MS / 1000
+      } seconds`,
+    });
+  } finally {
+    controller.abort();
+  }
+}
+
+export function addPostMessageListener(
+  id: string,
+  listener: PostMessageListener,
+  { signal }: { signal?: AbortSignal } = {}
+): void {
+  const rawListener = async ({
+    data,
+    source,
+    origin,
+  }: MessageEvent<PixiebrixPacket>): Promise<void> => {
+    if (data?.id === id && validUuidRegex.test(data.pixiebrix)) {
+      const responsePayload = await listener(data.payload);
+
+      const packet: PixiebrixPacket = {
+        id,
+        payload: responsePayload,
+        pixiebrix: data.pixiebrix,
+      };
+      source.postMessage(packet, { targetOrigin: origin });
+    }
+  };
+
+  window.addEventListener("message", rawListener, { signal });
+}

webpack.config.js

@@ -151,6 +151,11 @@ function updateManifestToV3(manifest) {
   policy.remove("script-src", "'unsafe-eval'");
   manifest.content_security_policy = {
     extension_pages: policy.toString(),
+
+    // Set the native default CSP
+    // https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/
+    sandbox:
+      "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';",
   };
 
   // Replace background script
@@ -259,6 +264,8 @@ module.exports = (env, options) =>
         "pageEditor/pageEditor",
         "options/options",
         "sidebar/sidebar",
+        "sandbox/sandbox",
+
         "tinyPages/ephemeralForm",
         "tinyPages/permissionsPopup",
         "tinyPages/browserActionInstantHandler",