@linkshell/gateway 0.6.3 → 0.6.5

package/web-client/config.js

@@ -0,0 +1,6 @@
+// Public deployment settings. Never put tokens or private keys in this file.
+// A self-hosted site can replace this file without rebuilding the application.
+window.__LINKSHELL_CONFIG__ = {
+  deployment: "official",
+  gatewayUrl: "",
+};

package/web-client/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#F2F2F7" />
+    <meta name="description" content="LinkShell 网页工作台" />
+    <link rel="icon" href="./favicon.png" type="image/png" />
+    <title>LinkShell · 工作台</title>
+    <script type="module" crossorigin src="/assets/index-Dnl-KjuJ.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/markdown-SZOrMO_3.js">
+    <link rel="modulepreload" crossorigin href="/assets/account-R7yD1rZE.js">
+    <link rel="modulepreload" crossorigin href="/assets/terminal-DWFexEE4.js">
+    <link rel="stylesheet" crossorigin href="/assets/terminal-DOrYoP_4.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-DkcaGYC0.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/config.js"></script>
+  </body>
+</html>

package/web-client/preview/bridge.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>LinkShell 隔离预览</title>
+    <style>
+      html,
+      body,
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: 0;
+        margin: 0;
+      }
+      body {
+        font: 14px system-ui;
+      }
+      #note {
+        padding: 24px;
+        color: #666;
+      }
+      iframe {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="note">正在准备隔离预览…</p>
+    <iframe
+      id="page"
+      title="开发网页"
+      sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-downloads allow-pointer-lock"
+      allow="autoplay; fullscreen"
+    ></iframe>
+    <script src="/preview/bridge.js"></script>
+  </body>
+</html>

package/web-client/preview/bridge.js

@@ -0,0 +1,100 @@
+// This shell must be served on a different origin from the account UI.
+const channel = location.hash.slice(1);
+const page = document.getElementById("page");
+const note = document.getElementById("note");
+const requests = new Map();
+let parentOrigin;
+let worker;
+window.addEventListener("message", async (event) => {
+  const message = event.data;
+  if (!message || message.channel !== channel) return;
+  if (
+    event.source === parent &&
+    message.type === "preview-init" &&
+    !parentOrigin
+  ) {
+    if (event.origin === location.origin) {
+      note.textContent = "预览必须与账号页面使用不同来源";
+      return;
+    }
+    parentOrigin = event.origin;
+    try {
+      const registration = await navigator.serviceWorker.register(
+        "/preview/worker.js?v=2",
+        { scope: "/preview/" },
+      );
+      const next =
+        registration.installing ?? registration.waiting ?? registration.active;
+      if (next && next.state !== "activated")
+        await new Promise((resolve, reject) => {
+          const changed = () => {
+            if (next.state === "activated" || next.state === "redundant") {
+              next.removeEventListener("statechange", changed);
+              if (next.state === "activated") resolve();
+              else reject(new Error("预览服务更新失败"));
+            }
+          };
+          next.addEventListener("statechange", changed);
+          changed();
+        });
+      await navigator.serviceWorker.ready;
+      worker = registration.active;
+      const ready = new MessageChannel();
+      ready.port1.onmessage = () => {
+        page.src = `/preview/view/${channel}/`;
+        page.style.display = "block";
+        note.remove();
+      };
+      worker.postMessage(
+        { type: "init", token: channel, bootstrap: message.bootstrap },
+        [ready.port2],
+      );
+    } catch (error) {
+      note.textContent = String(error);
+    }
+  } else if (event.source === parent && event.origin === parentOrigin) {
+    if (/^http-/.test(message.type)) {
+      requests.get(message.id)?.postMessage(message);
+      if (["http-end", "http-error"].includes(message.type)) {
+        requests.get(message.id)?.close();
+        requests.delete(message.id);
+      }
+    } else page.contentWindow.postMessage(message, location.origin);
+  } else if (
+    event.source === page.contentWindow &&
+    event.origin === location.origin &&
+    parentOrigin &&
+    /^ws-/.test(message.type)
+  ) {
+    parent.postMessage(message, parentOrigin);
+  }
+});
+navigator.serviceWorker.addEventListener("message", (event) => {
+  if (event.data?.token !== channel || !parentOrigin || event.source !== worker)
+    return;
+  requests.set(event.data.id, event.ports[0]);
+  event.ports[0].onmessage = (message) => {
+    if (message.data?.cancel) {
+      parent.postMessage(
+        { channel, type: "http-cancel", id: event.data.id },
+        parentOrigin,
+      );
+      event.ports[0].close();
+      requests.delete(event.data.id);
+    }
+  };
+  parent.postMessage(
+    { ...event.data, channel, type: "http-request" },
+    parentOrigin,
+  );
+});
+parent.postMessage({ channel, type: "preview-ready" }, "*");
+
+window.addEventListener("pagehide", () => {
+  for (const [id, port] of requests) {
+    parent.postMessage({ channel, type: "http-cancel", id }, parentOrigin);
+    port.close();
+  }
+  requests.clear();
+  worker?.postMessage({ type: "dispose", token: channel });
+});

package/web-client/preview/worker.js

@@ -0,0 +1,190 @@
+/* global clients */
+const sessions = new Map();
+const owners = new Map();
+self.addEventListener("install", () => {
+  void self.skipWaiting();
+});
+self.addEventListener("activate", (event) => {
+  event.waitUntil(clients.claim());
+});
+self.addEventListener("message", (event) => {
+  if (
+    event.data?.type === "dispose" &&
+    sessions.get(event.data.token)?.owner === event.source?.id
+  ) {
+    sessions.delete(event.data.token);
+    for (const [owner, token] of owners)
+      if (token === event.data.token) owners.delete(owner);
+  }
+  if (
+    event.data?.type === "init" &&
+    event.source &&
+    new URL(event.source.url).pathname === "/preview/bridge.html"
+  ) {
+    sessions.set(event.data.token, {
+      owner: event.source.id,
+      bootstrap: event.data.bootstrap,
+    });
+    event.ports[0].postMessage({ ready: true });
+  }
+});
+function navigationBootstrap(prefix) {
+  const rewrite = (value) => {
+    const url = new URL(value, location.href);
+    if (url.origin !== location.origin || url.pathname.startsWith(prefix))
+      return url.href;
+    return prefix + url.pathname.replace(/^\//, "") + url.search + url.hash;
+  };
+  document.addEventListener(
+    "click",
+    (event) => {
+      const anchor = event.target.closest?.("a[href]");
+      if (anchor) anchor.href = rewrite(anchor.href);
+    },
+    true,
+  );
+  document.addEventListener(
+    "submit",
+    (event) => {
+      if (event.target.action)
+        event.target.action = rewrite(event.target.action);
+    },
+    true,
+  );
+  for (const key of ["pushState", "replaceState"]) {
+    const original = history[key].bind(history);
+    history[key] = (state, title, url) =>
+      original(state, title, url == null ? url : rewrite(url));
+  }
+}
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+  if (url.origin !== self.location.origin) return;
+  const match = /^\/preview\/view\/([\w-]+)\/(.*)$/.exec(url.pathname);
+  const token = match?.[1] ?? owners.get(event.clientId);
+  const session = sessions.get(token);
+  if (!session) return;
+  if (event.resultingClientId) owners.set(event.resultingClientId, token);
+  event.respondWith(
+    (async () => {
+      const client = await clients.get(session.owner);
+      if (!client)
+        return new Response("工作台已关闭，请重新打开预览", { status: 503 });
+      const id = crypto.randomUUID();
+      const wire = new MessageChannel();
+      let controller;
+      let finished = false;
+      let rejectHead;
+      let timer;
+      const stop = (error) => {
+        if (finished) return;
+        finished = true;
+        clearTimeout(timer);
+        if (error) {
+          rejectHead?.(error);
+          controller.error(error);
+        } else controller.close();
+        wire.port1.close();
+      };
+      const stream = new ReadableStream({
+        start(value) {
+          controller = value;
+        },
+        cancel() {
+          if (finished) return;
+          finished = true;
+          clearTimeout(timer);
+          wire.port1.postMessage({ cancel: true });
+          wire.port1.close();
+        },
+      });
+      const touch = () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          wire.port1.postMessage({ cancel: true });
+          stop(new Error("预览请求超时"));
+        }, 65000);
+      };
+      const result = new Promise((resolve, reject) => {
+        rejectHead = reject;
+        wire.port1.onmessage = (event) => {
+          if (finished) return;
+          touch();
+          const message = event.data;
+          if (message.type === "http-head") resolve(message);
+          else if (message.type === "http-chunk")
+            controller.enqueue(new Uint8Array(message.body));
+          else if (message.type === "http-end") stop();
+          else if (message.type === "http-error")
+            stop(new Error(message.error));
+        };
+        touch();
+      });
+      const body = ["GET", "HEAD"].includes(event.request.method)
+        ? undefined
+        : await event.request.arrayBuffer();
+      client.postMessage(
+        {
+          token,
+          id,
+          path: (match ? "/" + match[2] : url.pathname) + url.search,
+          method: event.request.method,
+          headers: [...event.request.headers],
+          body,
+        },
+        [wire.port2],
+      );
+      try {
+        const response = await result;
+        if (response.error)
+          return new Response(response.error, { status: 502 });
+        const headers = new Headers(response.headers);
+        for (const name of [
+          "content-length",
+          "transfer-encoding",
+          "content-encoding",
+          "content-security-policy",
+          "content-security-policy-report-only",
+          "x-frame-options",
+          "set-cookie",
+        ])
+          headers.delete(name);
+        const prefix = `/preview/view/${token}/`;
+        const redirect = headers.get("location");
+        if (redirect) {
+          const target = new URL(redirect, "http://localhost");
+          if (
+            target.hostname === "localhost" ||
+            target.hostname === "127.0.0.1"
+          )
+            headers.set(
+              "location",
+              prefix +
+                target.pathname.replace(/^\//, "") +
+                target.search +
+                target.hash,
+            );
+        }
+        let output = stream;
+        if (headers.get("content-type")?.includes("text/html")) {
+          const script = `<script>(${session.bootstrap})(${JSON.stringify(token)});(${navigationBootstrap.toString()})(${JSON.stringify(prefix)});</script>`;
+          const text = await new Response(stream).text();
+          output = new TextEncoder().encode(
+            /<head(?:\s[^>]*)?>/i.test(text)
+              ? text.replace(/<head(?:\s[^>]*)?>/i, "$&" + script)
+              : script + text,
+          );
+        }
+        return new Response(
+          [204, 205, 304].includes(response.status) ||
+            event.request.method === "HEAD"
+            ? null
+            : output,
+          { status: response.status, headers },
+        );
+      } catch (error) {
+        return new Response(String(error), { status: 502 });
+      }
+    })(),
+  );
+});