safe-content-frame 0.0.0 → 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+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;
+    enableBrowserCaching?: boolean;
+    sandbox?: SandboxOption[];
+    pdfViewer?: PdfViewerOption;
+    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;
+    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>;
+    renderRaw(content: Uint8Array | string, mimeType: string, container: HTMLElement): Promise<RenderedFrame>;
+    renderPdf(content: Uint8Array, container: HTMLElement, fragment?: string): Promise<RenderedFrame>;
+}
+
+export { type PdfViewerOption, type RenderedFrame, SafeContentFrame, type SafeContentFrameOptions, type SandboxOption, type ShadowDomOption };

package/dist/index.js

@@ -0,0 +1,152 @@
+// src/index.ts
+var SCF_HOST = "scf.usercontent.goog";
+var SHIM_PATH = "shim.html";
+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);
+}
+function generateRandomSalt() {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return Array.from(array, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+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);
+}
+var _SafeContentFrame = class _SafeContentFrame {
+  constructor(product, options = {}) {
+    this.product = product;
+    this.options = {
+      sandbox: ["allow-same-origin", "allow-scripts"],
+      ...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}`
+    );
+    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(" ");
+  }
+  createIframe(container) {
+    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);
+    } 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);
+        iframe.contentWindow?.postMessage(
+          {
+            type: "render",
+            body: contentData,
+            mimeType,
+            salt: this.options.salt || ""
+          },
+          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,
+            new Promise(
+              (_, rej) => setTimeout(() => rej(new Error("Timeout waiting for iframe to load")), timeoutMs)
+            )
+          ]);
+        },
+        dispose() {
+          iframe.remove();
+        }
+      };
+      iframe.onload = () => {
+        resolve(renderedFrame);
+      };
+      iframe.onerror = () => {
+        reject(new Error("Failed to load iframe"));
+      };
+    });
+  }
+  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);
+  }
+};
+_SafeContentFrame.PRODUCT_HASH = "h833788197";
+var SafeContentFrame = _SafeContentFrame;
+export {
+  SafeContentFrame
+};

package/dist/pdf_rendering.d.ts

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

package/dist/pdf_rendering.js

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

package/dist/shadow_dom.d.ts

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

package/dist/shadow_dom.js

@@ -0,0 +1,11 @@
+// src/shadow_dom.ts
+function enableShadowDom() {
+  return { enabled: true };
+}
+function unsafeDisableShadowDom() {
+  return { enabled: false };
+}
+export {
+  enableShadowDom,
+  unsafeDisableShadowDom
+};

package/package.json

@@ -1,5 +1,34 @@
 {
   "name": "safe-content-frame",
-  "version": "0.0.0",
-  "description": ""
+  "version": "0.0.1",
+  "description": "Secure iframe rendering for untrusted content",
+  "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"
+    },
+    "./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"
+  ],
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/shadow_dom.ts src/pdf_rendering.ts --format esm --dts"
+  }
 }