safe-content-frame 0.0.0 → 0.0.2

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+type SandboxOption = "allow-same-origin" | "allow-scripts" | "allow-forms" | "allow-popups" | "allow-modals" | "allow-downloads" | "allow-popups-to-escape-sandbox";
+interface SafeContentFrameOptions {
+    useShadowDom?: boolean;
+    enableBrowserCaching?: boolean;
+    sandbox?: SandboxOption[];
+    salt?: string;
+}
+interface RenderedFrame {
+    iframe: HTMLIFrameElement;
+    origin: string;
+    sendMessage(data: unknown, transfer?: Transferable[]): void;
+    fullyLoadedPromiseWithTimeout(timeoutMs: number): Promise<void>;
+    dispose(): void;
+}
+declare class SafeContentFrame {
+    private product;
+    private options;
+    constructor(product: string, options?: SafeContentFrameOptions);
+    renderHtml(html: string, container: HTMLElement, opts?: {
+        unsafeDocumentWrite?: boolean;
+    }): Promise<RenderedFrame>;
+    renderRaw(content: Uint8Array | string, mimeType: string, container: HTMLElement): Promise<RenderedFrame>;
+    renderPdf(content: Uint8Array, container: HTMLElement): Promise<RenderedFrame>;
+    private render;
+    private getSandbox;
+}
+
+export { type RenderedFrame, SafeContentFrame, type SafeContentFrameOptions, type SandboxOption };

package/dist/index.js

@@ -0,0 +1,132 @@
+// src/index.ts
+var SCF_HOST = "scf.auiusercontent.com";
+var PRODUCT_HASH = "h184756";
+async function sha256(data) {
+  return crypto.subtle.digest("SHA-256", data);
+}
+async function computeOriginHash(product, salt, origin) {
+  const enc = new TextEncoder();
+  const sep = enc.encode("$@#|");
+  const parts = [
+    enc.encode(product),
+    sep,
+    new Uint8Array(salt),
+    sep,
+    enc.encode(origin)
+  ];
+  const combined = new Uint8Array(parts.reduce((n, p) => n + p.length, 0));
+  let offset = 0;
+  for (const p of parts) {
+    combined.set(p, offset);
+    offset += p.length;
+  }
+  const hash = new Uint8Array(await sha256(combined.buffer));
+  const bigint = hash.reduce(
+    (acc, b) => BigInt(256) * acc + BigInt(b),
+    BigInt(0)
+  );
+  return bigint.toString(36).padStart(50, "0").slice(0, 50);
+}
+function randomSalt() {
+  const arr = new Uint8Array(10);
+  crypto.getRandomValues(arr);
+  return arr.buffer;
+}
+async function contentSalt(content, pathname) {
+  const enc = new TextEncoder();
+  const sep = enc.encode("$@#|");
+  const combined = new Uint8Array(
+    content.length + sep.length + pathname.length
+  );
+  combined.set(content, 0);
+  combined.set(sep, content.length);
+  combined.set(enc.encode(pathname), content.length + sep.length);
+  return sha256(combined.buffer);
+}
+var SafeContentFrame = class {
+  constructor(product, options = {}) {
+    this.product = product;
+    this.options = options;
+  }
+  async renderHtml(html, container, opts) {
+    return this.render(
+      new TextEncoder().encode(html),
+      "text/html; charset=utf-8",
+      container,
+      opts
+    );
+  }
+  async renderRaw(content, mimeType, container) {
+    const data = typeof content === "string" ? new TextEncoder().encode(content) : content;
+    return this.render(data, mimeType, container);
+  }
+  async renderPdf(content, container) {
+    return this.render(content, "application/pdf", container);
+  }
+  async render(content, mimeType, container, opts) {
+    const origin = window.location.origin;
+    const salt = this.options.salt ? new TextEncoder().encode(this.options.salt).buffer : this.options.enableBrowserCaching ? await contentSalt(content, location.pathname) : randomSalt();
+    const hash = await computeOriginHash(this.product, salt, origin);
+    const shimUrl = `https://${hash}-${PRODUCT_HASH}.${SCF_HOST}/${this.product}/shim.html?origin=${encodeURIComponent(origin)}${this.options.enableBrowserCaching ? "&cache=1" : ""}`;
+    const iframeOrigin = new URL(shimUrl).origin;
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("sandbox", this.getSandbox());
+    iframe.style.cssText = "border:none;width:100%;height:100%";
+    if (this.options.useShadowDom) {
+      const host = document.createElement("div");
+      host.attachShadow({ mode: "closed" }).appendChild(iframe);
+      container.appendChild(host);
+    } else {
+      container.appendChild(iframe);
+    }
+    return new Promise((resolve, reject) => {
+      const channel = new MessageChannel();
+      let onLoaded;
+      const loaded = new Promise((r) => {
+        onLoaded = r;
+      });
+      channel.port1.onmessage = (e) => {
+        if (e.data?.type === "msg") onLoaded();
+        else if (e.data?.type === "error") reject(new Error(e.data.message));
+      };
+      iframe.onload = () => {
+        iframe.contentWindow?.postMessage(
+          {
+            body: content.buffer.slice(
+              content.byteOffset,
+              content.byteOffset + content.byteLength
+            ),
+            mimeType,
+            salt,
+            unsafeDocumentWrite: opts?.unsafeDocumentWrite
+          },
+          iframeOrigin,
+          [channel.port2]
+        );
+        resolve({
+          iframe,
+          origin: iframeOrigin,
+          sendMessage: (data, transfer) => iframe.contentWindow?.postMessage(data, iframeOrigin, transfer),
+          fullyLoadedPromiseWithTimeout: (ms) => Promise.race([
+            loaded,
+            new Promise(
+              (_, rej) => setTimeout(() => rej(new Error("Timeout")), ms)
+            )
+          ]),
+          dispose: () => iframe.remove()
+        });
+      };
+      iframe.onerror = () => reject(new Error("Failed to load iframe"));
+      iframe.src = shimUrl;
+    });
+  }
+  getSandbox() {
+    const s = new Set(this.options.sandbox || []);
+    s.add("allow-same-origin");
+    s.add("allow-scripts");
+    return [...s].join(" ");
+  }
+};
+export {
+  SafeContentFrame
+};

package/dist/shadow_dom.d.ts

@@ -0,0 +1,4 @@
+declare const enableShadowDom: () => boolean;
+declare const unsafeDisableShadowDom: () => boolean;
+
+export { enableShadowDom, unsafeDisableShadowDom };

package/dist/shadow_dom.js

@@ -0,0 +1,7 @@
+// src/shadow_dom.ts
+var enableShadowDom = () => true;
+var unsafeDisableShadowDom = () => false;
+export {
+  enableShadowDom,
+  unsafeDisableShadowDom
+};

package/package.json

@@ -1,5 +1,43 @@
 {
   "name": "safe-content-frame",
-  "version": "0.0.0",
-  "description": ""
+  "version": "0.0.2",
+  "description": "Secure iframe rendering for untrusted content using SafeContentFrame",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./shadow_dom": {
+      "types": "./dist/shadow_dom.d.ts",
+      "default": "./dist/shadow_dom.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "@assistant-ui/x-buildutils": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/assistant-ui/assistant-ui/tree/main/packages/safe-content-frame"
+  },
+  "bugs": {
+    "url": "https://github.com/assistant-ui/assistant-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/shadow_dom.ts --format esm --dts",
+    "dev": "vite demo"
+  }
 }