#105 Add sandbox execution; move JQ to it

src/__mocks__/@/sandbox/messenger/api.ts

@@ -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/>.
+ */
+
+// Skip the sandbox messenger
+export { renderNunjucksTemplate, applyJq } from "@/sandbox/messenger/executor";

src/__mocks__/@/utils/shadowWrap.js

@@ -0,0 +1,23 @@
+/*
+ * 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/>.
+ */
+
+// Don't shadow-wrap in tests because JSDOM can't handle it (e.g. iframes won't load even with `resources:usable`)
+export default function shadowWrap(element) {
+  const wrapper = document.createElement("div");
+  wrapper.append(element);
+  return wrapper;
+}

src/blocks/transformers/jq.ts

@@ -22,6 +22,7 @@ import { isNullOrBlank } from "@/utils";
 import { InputValidationError } from "@/blocks/errors";
 import { isErrorObject } from "@/errors/errorHelpers";
 import { BusinessError } from "@/errors/businessErrors";
+import { applyJq } from "@/sandbox/messenger/api";
 
 const jqStacktraceRegexp = /jq: error \(at <stdin>:0\): (?<message>.*)/;
 
@@ -59,15 +60,10 @@ export class JQTransformer extends Transformer {
   ): Promise<unknown> {
     const input = isNullOrBlank(data) ? ctxt : data;
 
-    const { default: jq } =
-      // @ts-expect-error no existing definitions exist
-      await import(/* webpackChunkName: "jq-web" */ "jq-web");
-
     logger.debug("Running jq transform", { filter, data, ctxt, input });
 
     try {
-      // eslint-disable-next-line @typescript-eslint/return-await -- Type is `any`, it throws the rule off
-      return await jq.promised.json(input, filter);
+      return await applyJq({ input, filter });
     } catch (error) {
       // The message length check is there because the JQ error message sometimes is cut and if it is we try to parse the stacktrace
       // See https://github.com/pixiebrix/pixiebrix-extension/issues/3216

src/contentScript/contentScriptCore.ts

@@ -35,8 +35,9 @@ import {
   isContextInvalidatedError,
   notifyContextInvalidated,
 } from "@/errors/contextInvalidated";
-import { type UUID } from "@/core";
 import { onUncaughtError } from "@/errors/errorHelpers";
+import { type UUID } from "@/core";
+import initSandbox from "@/sandbox/messenger/api";
 
 // Must come before the default handler for ignoring errors. Otherwise, this handler might not be run
 onUncaughtError((error) => {
@@ -57,6 +58,7 @@ export async function init(uuid: UUID): Promise<void> {
   addListenerForUpdateSelectedElement();
   initTelemetry();
   initToaster();
+  void initSandbox();
 
   await handleNavigate();
 

src/globals.d.ts

@@ -85,6 +85,9 @@ declare module "generate-schema" {
 // In the end, the types aren't even used.
 declare module "marked";
 
+// No types available
+declare module "jq-web";
+
 // From https://github.com/mozilla/page-metadata-parser/issues/116#issuecomment-614882830
 declare module "page-metadata-parser" {
   export type IPageMetadata = Record<string, string | string[]>;

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,68 @@
+/*
+ * 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 injectIframe, { hiddenIframeStyle } from "@/utils/injectIframe";
+import postMessage from "@/utils/postMessage";
+import pMemoize from "p-memoize";
+import { type JsonValue, type JsonObject } from "type-fest";
+
+// Uses pMemoize to allow retries after a failure
+const loadSandbox = pMemoize(async () => {
+  const iframe = await injectIframe(
+    chrome.runtime.getURL("sandbox.html"),
+    hiddenIframeStyle
+  );
+  return iframe.contentWindow;
+});
+
+export default loadSandbox;
+
+export async function ping() {
+  return postMessage({
+    recipient: await loadSandbox(),
+    type: "SANDBOX_PING",
+  });
+}
+
+export type NunjucksRenderPayload = {
+  template: string;
+  context: JsonObject;
+  autoescape: boolean;
+};
+
+export async function renderNunjucksTemplate(payload: NunjucksRenderPayload) {
+  return postMessage({
+    recipient: await loadSandbox(),
+    payload,
+    type: "RENDER_NUNJUCKS",
+  });
+}
+
+export type ApplyJqPayload = {
+  input: JsonValue;
+  filter: string;
+};
+
+export async function applyJq(payload: ApplyJqPayload) {
+  return postMessage({
+    recipient: await loadSandbox(),
+    payload,
+    type: "APPLY_JQ",
+  });
+}

src/sandbox/messenger/executor.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { type ApplyJqPayload, type NunjucksRenderPayload } from "./api";
+
+export async function renderNunjucksTemplate(payload: NunjucksRenderPayload) {
+  const { template, context, autoescape } = payload;
+  const { default: nunjucks } = await import(
+    /* webpackChunkName: "nunjucks" */ "nunjucks"
+  );
+
+  nunjucks.configure({ autoescape });
+  return nunjucks.renderString(template, context);
+}
+
+export async function applyJq(payload: ApplyJqPayload) {
+  const { input, filter } = payload;
+  const { default: jq } = await import(
+    /* webpackChunkName: "jq-web" */ "jq-web"
+  );
+
+  return jq.promised.json(input, filter);
+}

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/>.
+ */
+
+/** @file It doesn't actually use the Messenger but this file tries to replicate the pattern */
+
+import { addPostMessageListener } from "@/utils/postMessage";
+import { applyJq, renderNunjucksTemplate } from "./executor";
+
+export default function registerMessenger(): void {
+  addPostMessageListener("SANDBOX_PING", async (payload) => "pong");
+  addPostMessageListener("RENDER_NUNJUCKS", renderNunjucksTemplate);
+  addPostMessageListener("APPLY_JQ", applyJq);
+}

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.debug("SANDBOX: iframe loaded");
+
+registerMessenger();

src/utils.ts

@@ -127,6 +127,13 @@ export async function waitAnimationFrame(): Promise<void> {
   });
 }
 
+export async function waitForBody(): Promise<void> {
+  while (!document.body) {
+    // eslint-disable-next-line no-await-in-loop -- Polling pattern
+    await sleep(20);
+  }
+}
+
 /**
  * Returns a new object with all the values from the original resolved
  */

src/utils/injectIframe.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * @jest-environment-options {"resources": "usable" }
+ */
+/*
+ * 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 injectIframe from "./injectIframe";
+
+describe("injectIframe", () => {
+  test("load simple iframe", async () => {
+    const iframe = await injectIframe("data:text/html,<html>Good soup", {});
+    expect(
+      iframe.contentDocument.documentElement.outerHTML
+    ).toMatchInlineSnapshot(
+      '"<html><head></head><body>Good soup</body></html>"'
+    );
+  });
+});