safe-content-frame 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -1,17 +1,8 @@
 type SandboxOption = "allow-same-origin" | "allow-scripts" | "allow-forms" | "allow-popups" | "allow-modals" | "allow-downloads" | "allow-popups-to-escape-sandbox";
-type ShadowDomOption = {
-    enabled: true;
-} | {
-    enabled: false;
-};
-type PdfViewerOption = {
-    type: "native-with-download-fallback";
-};
 interface SafeContentFrameOptions {
-    useShadowDom?: ShadowDomOption;
+    useShadowDom?: boolean;
     enableBrowserCaching?: boolean;
     sandbox?: SandboxOption[];
-    pdfViewer?: PdfViewerOption;
     salt?: string;
 }
 interface RenderedFrame {
@@ -24,15 +15,14 @@ interface RenderedFrame {
 declare class SafeContentFrame {
     private product;
     private options;
-    private static readonly PRODUCT_HASH;
     constructor(product: string, options?: SafeContentFrameOptions);
-    private createShimUrl;
-    private getSandboxAttribute;
-    private createIframe;
-    private renderContent;
-    renderHtml(html: string, container: HTMLElement): Promise<RenderedFrame>;
+    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, fragment?: string): Promise<RenderedFrame>;
+    renderPdf(content: Uint8Array, container: HTMLElement): Promise<RenderedFrame>;
+    private render;
+    private getSandbox;
 }
 
-export { type PdfViewerOption, type RenderedFrame, SafeContentFrame, type SafeContentFrameOptions, type SandboxOption, type ShadowDomOption };
+export { type RenderedFrame, SafeContentFrame, type SafeContentFrameOptions, type SandboxOption };

package/dist/index.js

@@ -1,152 +1,132 @@
 // src/index.ts
-var SCF_HOST = "scf.usercontent.goog";
-var SHIM_PATH = "shim.html";
+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 input = `${product}$@#|${salt}$@#|${origin}`;
-  const encoder = new TextEncoder();
-  const data = encoder.encode(input);
-  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
-  const hashBigInt = BigInt("0x" + hashHex);
-  return hashBigInt.toString(36).slice(0, 50);
+  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 generateRandomSalt() {
-  const array = new Uint8Array(32);
-  crypto.getRandomValues(array);
-  return Array.from(array, (b) => b.toString(16).padStart(2, "0")).join("");
+function randomSalt() {
+  const arr = new Uint8Array(10);
+  crypto.getRandomValues(arr);
+  return arr.buffer;
 }
-async function computeContentHash(content) {
-  const data = typeof content === "string" ? new TextEncoder().encode(content) : content;
-  const hashBuffer = await crypto.subtle.digest("SHA-256", data.buffer);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
-  const hashBigInt = BigInt("0x" + hashHex);
-  return hashBigInt.toString(36).slice(0, 32);
+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 _SafeContentFrame {
+var SafeContentFrame = class {
   constructor(product, options = {}) {
     this.product = product;
-    this.options = {
-      sandbox: ["allow-same-origin", "allow-scripts"],
-      ...options
-    };
+    this.options = options;
   }
-  async createShimUrl(content) {
-    const parentOrigin = window.location.origin;
-    let salt;
-    if (this.options.salt) {
-      salt = this.options.salt;
-    } else if (this.options.enableBrowserCaching) {
-      const contentHash = await computeContentHash(content);
-      salt = contentHash + window.location.pathname;
-    } else {
-      salt = generateRandomSalt();
-    }
-    const originHash = await computeOriginHash(this.product, salt, parentOrigin);
-    const url = new URL(
-      `https://${originHash}-${_SafeContentFrame.PRODUCT_HASH}.${SCF_HOST}/${this.product}/${SHIM_PATH}`
+  async renderHtml(html, container, opts) {
+    return this.render(
+      new TextEncoder().encode(html),
+      "text/html; charset=utf-8",
+      container,
+      opts
     );
-    url.searchParams.set("origin", parentOrigin);
-    if (this.options.enableBrowserCaching) {
-      url.searchParams.set("cache", "1");
-    }
-    return url.toString();
   }
-  getSandboxAttribute() {
-    const sandbox = this.options.sandbox || ["allow-same-origin", "allow-scripts"];
-    const required = /* @__PURE__ */ new Set(["allow-same-origin", "allow-scripts"]);
-    const all = /* @__PURE__ */ new Set([...sandbox, ...required]);
-    return Array.from(all).join(" ");
+  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);
   }
-  createIframe(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.getSandboxAttribute());
-    iframe.style.border = "none";
-    iframe.style.width = "100%";
-    iframe.style.height = "100%";
-    if (this.options.useShadowDom?.enabled) {
-      const shadowHost = document.createElement("div");
-      const shadow = shadowHost.attachShadow({ mode: "closed" });
-      shadow.appendChild(iframe);
-      container.appendChild(shadowHost);
+    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 iframe;
-  }
-  async renderContent(content, mimeType, container) {
-    const shimUrl = await this.createShimUrl(content);
-    const iframe = this.createIframe(container);
-    const iframeOrigin = new URL(shimUrl).origin;
     return new Promise((resolve, reject) => {
       const channel = new MessageChannel();
-      const contentData = typeof content === "string" ? new TextEncoder().encode(content) : content;
-      const handleShimReady = (event) => {
-        if (event.origin !== iframeOrigin) return;
-        if (event.data?.type !== "shim-ready") return;
-        window.removeEventListener("message", handleShimReady);
+      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(
           {
-            type: "render",
-            body: contentData,
+            body: content.buffer.slice(
+              content.byteOffset,
+              content.byteOffset + content.byteLength
+            ),
             mimeType,
-            salt: this.options.salt || ""
+            salt,
+            unsafeDocumentWrite: opts?.unsafeDocumentWrite
           },
           iframeOrigin,
           [channel.port2]
         );
-      };
-      window.addEventListener("message", handleShimReady);
-      let loadResolve;
-      const fullyLoadedPromise = new Promise((res) => {
-        loadResolve = res;
-      });
-      channel.port1.onmessage = (e) => {
-        if (e.data === "Reloading iframe" || e.data?.type === "loaded") {
-          loadResolve();
-        }
-      };
-      iframe.src = shimUrl;
-      const renderedFrame = {
-        iframe,
-        origin: iframeOrigin,
-        sendMessage(data, transfer) {
-          iframe.contentWindow?.postMessage(data, iframeOrigin, transfer);
-        },
-        fullyLoadedPromiseWithTimeout(timeoutMs) {
-          return Promise.race([
-            fullyLoadedPromise,
+        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 waiting for iframe to load")), timeoutMs)
+              (_, rej) => setTimeout(() => rej(new Error("Timeout")), ms)
             )
-          ]);
-        },
-        dispose() {
-          iframe.remove();
-        }
-      };
-      iframe.onload = () => {
-        resolve(renderedFrame);
-      };
-      iframe.onerror = () => {
-        reject(new Error("Failed to load iframe"));
+          ]),
+          dispose: () => iframe.remove()
+        });
       };
+      iframe.onerror = () => reject(new Error("Failed to load iframe"));
+      iframe.src = shimUrl;
     });
   }
-  async renderHtml(html, container) {
-    return this.renderContent(html, "text/html; charset=utf-8", container);
-  }
-  async renderRaw(content, mimeType, container) {
-    return this.renderContent(content, mimeType, container);
-  }
-  async renderPdf(content, container, fragment) {
-    const mimeType = fragment ? `application/pdf#${fragment}` : "application/pdf";
-    return this.renderContent(content, mimeType, container);
+  getSandbox() {
+    const s = new Set(this.options.sandbox || []);
+    s.add("allow-same-origin");
+    s.add("allow-scripts");
+    return [...s].join(" ");
   }
 };
-_SafeContentFrame.PRODUCT_HASH = "h833788197";
-var SafeContentFrame = _SafeContentFrame;
 export {
   SafeContentFrame
 };

package/dist/shadow_dom.d.ts

@@ -1,6 +1,4 @@
-import { ShadowDomOption } from './index.js';
-
-declare function enableShadowDom(): ShadowDomOption;
-declare function unsafeDisableShadowDom(): ShadowDomOption;
+declare const enableShadowDom: () => boolean;
+declare const unsafeDisableShadowDom: () => boolean;
 
 export { enableShadowDom, unsafeDisableShadowDom };

package/dist/shadow_dom.js

@@ -1,10 +1,6 @@
 // src/shadow_dom.ts
-function enableShadowDom() {
-  return { enabled: true };
-}
-function unsafeDisableShadowDom() {
-  return { enabled: false };
-}
+var enableShadowDom = () => true;
+var unsafeDisableShadowDom = () => false;
 export {
   enableShadowDom,
   unsafeDisableShadowDom

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "safe-content-frame",
-  "version": "0.0.1",
-  "description": "Secure iframe rendering for untrusted content",
+  "version": "0.0.3",
+  "description": "Secure iframe rendering for untrusted content using SafeContentFrame",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -12,23 +12,32 @@
     "./shadow_dom": {
       "types": "./dist/shadow_dom.d.ts",
       "default": "./dist/shadow_dom.js"
-    },
-    "./pdf_rendering": {
-      "types": "./dist/pdf_rendering.d.ts",
-      "default": "./dist/pdf_rendering.js"
     }
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "README.md"
+    "dist"
   ],
   "devDependencies": {
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
+    "@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 src/pdf_rendering.ts --format esm --dts"
+    "build": "tsup src/index.ts src/shadow_dom.ts --format esm --dts",
+    "dev": "vite demo"
   }
 }

package/dist/pdf_rendering.d.ts

@@ -1,5 +0,0 @@
-import { PdfViewerOption } from './index.js';
-
-declare function nativePdfViewerWithDownloadFallback(): PdfViewerOption;
-
-export { nativePdfViewerWithDownloadFallback };

package/dist/pdf_rendering.js

@@ -1,7 +0,0 @@
-// src/pdf_rendering.ts
-function nativePdfViewerWithDownloadFallback() {
-  return { type: "native-with-download-fallback" };
-}
-export {
-  nativePdfViewerWithDownloadFallback
-};