@graffiti-garden/wrapper-data-guard 0.1.0

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["import { Graffiti, type GraffitiSession } from \"@graffiti-garden/api\";\nimport { GraffitiRpcClient } from \"@graffiti-garden/wrapper-iframe-rpc/client\";\n\nlet instance: GraffitiGuarded | undefined;\n\nexport interface GraffitiGuardedOptions {\n  hostUrl?: string | URL;\n  channel?: string;\n  timeout?: number;\n}\n\nexport interface GraffitiGuardSourceSegment {\n  id: string;\n  name: string;\n}\n\nexport type GraffitiGuardSession = GraffitiSession & {\n  source?: GraffitiGuardSourceSegment[];\n};\n\n/** A Graffiti implementation backed by a sandboxed guard iframe. */\n// @ts-ignore Graffiti methods are delegated through the constructor proxy.\nexport class GraffitiGuarded extends Graffiti {\n  readonly sessionEvents!: EventTarget;\n  private readonly hostUrl!: URL;\n  private readonly iframe!: HTMLIFrameElement;\n  private readonly rpc!: GraffitiRpcClient;\n  private readonly onMessage!: (event: MessageEvent) => void;\n  private destroyed = false;\n\n  constructor(options: GraffitiGuardedOptions = {}) {\n    super();\n    if (instance) return instance;\n\n    const hostUrl = new URL(\n      options.hostUrl?.toString() ?? \"https://guard.graffiti.garden/\",\n      document.baseURI,\n    );\n    const iframe = document.createElement(\"iframe\");\n    iframe.title = \"Graffiti Guard\";\n    iframe.allow = \"storage-access\";\n    iframe.sandbox.add(\n      \"allow-scripts\",\n      \"allow-same-origin\",\n      \"allow-storage-access-by-user-activation\",\n      \"allow-downloads\",\n      \"allow-forms\",\n      \"allow-popups\",\n      \"allow-top-navigation-by-user-activation\",\n    );\n    iframe.src = hostUrl.href;\n    iframe.setAttribute(\"aria-hidden\", \"true\");\n    Object.assign(iframe.style, {\n      background: \"transparent\",\n      border: \"0\",\n      display: \"none\",\n      height: \"100vh\",\n      inset: \"0\",\n      position: \"fixed\",\n      width: \"100vw\",\n      zIndex: \"2147483647\",\n    });\n    iframe.addEventListener(\"load\", () => {\n      // Bootstrap the guard with the browser-reported embedding origin, which\n      // the RPC handshake verifies internally but does not expose to the host.\n      iframe.contentWindow?.postMessage({ type: \"graffiti-guard:connect\" }, hostUrl.origin);\n    });\n    document.body.append(iframe);\n\n    const remoteWindow = iframe.contentWindow;\n    if (!remoteWindow) {\n      iframe.remove();\n      throw new Error(\"Graffiti Guard iframe did not create a content window.\");\n    }\n\n    const rpc = new GraffitiRpcClient({\n      remoteWindow,\n      allowedOrigins: [hostUrl.origin],\n      channel: options.channel,\n      timeout: options.timeout,\n    });\n    const onMessage = (event: MessageEvent) => {\n      if (\n        event.source !== remoteWindow ||\n        event.origin !== hostUrl.origin ||\n        !event.data ||\n        typeof event.data !== \"object\"\n      ) {\n        return;\n      }\n      if (\n        event.data.type === \"graffiti-guard:set-visible\" &&\n        typeof event.data.visible === \"boolean\"\n      ) {\n        iframe.style.display = event.data.visible ? \"block\" : \"none\";\n        iframe.setAttribute(\"aria-hidden\", String(!event.data.visible));\n      } else if (\n        event.data.type === \"graffiti-guard:open-audit\" &&\n        typeof event.data.actor === \"string\" &&\n        Array.isArray(event.data.source)\n      ) {\n        this.audit(\n          event.data,\n          event.data.view === \"permissions\" ? \"permissions\" : \"activity\",\n        );\n      }\n    };\n    window.addEventListener(\"message\", onMessage);\n\n    this.hostUrl = hostUrl;\n    this.iframe = iframe;\n    this.rpc = rpc;\n    this.sessionEvents = rpc.sessionEvents;\n    this.onMessage = onMessage;\n\n    instance = new Proxy(this, {\n      get(target, property, receiver) {\n        if (Reflect.has(target, property)) {\n          return Reflect.get(target, property, receiver);\n        }\n        const value = Reflect.get(rpc, property, rpc);\n        return typeof value === \"function\" ? value.bind(rpc) : value;\n      },\n    });\n    return instance;\n  }\n\n  login: Graffiti[\"login\"] = (actor) => {\n    const loginUrl = new URL(this.hostUrl);\n    loginUrl.searchParams.set(\"guardLogin\", \"1\");\n    loginUrl.searchParams.set(\"redirectUrl\", window.location.href);\n    if (actor) loginUrl.searchParams.set(\"suggestedActor\", actor);\n    window.location.assign(loginUrl.href);\n    return Promise.resolve();\n  };\n\n  /** Open the host-owned audit panel without exposing audit data to this app. */\n  audit(\n    session?: GraffitiGuardSession,\n    view: \"activity\" | \"permissions\" = \"activity\",\n  ) {\n    const auditUrl = new URL(this.hostUrl);\n    auditUrl.searchParams.set(\"redirectUrl\", window.location.href);\n    auditUrl.searchParams.set(\"source\", JSON.stringify(session?.source ?? []));\n    if (session?.actor) auditUrl.searchParams.set(\"actor\", session.actor);\n    auditUrl.searchParams.set(\"view\", view);\n    window.location.assign(auditUrl.href);\n  }\n\n  destroy() {\n    if (this.destroyed) return;\n    this.destroyed = true;\n    window.removeEventListener(\"message\", this.onMessage);\n    this.rpc.destroy();\n    this.iframe.remove();\n    if (instance === this) instance = undefined;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+import { Graffiti, type GraffitiSession } from "@graffiti-garden/api";
+export interface GraffitiGuardedOptions {
+    hostUrl?: string | URL;
+    channel?: string;
+    timeout?: number;
+}
+export interface GraffitiGuardSourceSegment {
+    id: string;
+    name: string;
+}
+export type GraffitiGuardSession = GraffitiSession & {
+    source?: GraffitiGuardSourceSegment[];
+};
+/** A Graffiti implementation backed by a sandboxed guard iframe. */
+export declare class GraffitiGuarded extends Graffiti {
+    readonly sessionEvents: EventTarget;
+    private readonly hostUrl;
+    private readonly iframe;
+    private readonly rpc;
+    private readonly onMessage;
+    private destroyed;
+    constructor(options?: GraffitiGuardedOptions);
+    login: Graffiti["login"];
+    /** Open the host-owned audit panel without exposing audit data to this app. */
+    audit(session?: GraffitiGuardSession, view?: "activity" | "permissions"): void;
+    destroy(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKtE,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD,MAAM,CAAC,EAAE,0BAA0B,EAAE,CAAC;CACvC,CAAC;AAEF,oEAAoE;AAEpE,qBAAa,eAAgB,SAAQ,QAAQ;IAC3C,QAAQ,CAAC,aAAa,EAAG,WAAW,CAAC;IACrC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAO;IAC/B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAqB;IAC5C,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAC3D,OAAO,CAAC,SAAS,CAAS;IAE1B,YAAY,OAAO,GAAE,sBAA2B,EA+F/C;IAED,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAOtB;IAEF,+EAA+E;IAC/E,KAAK,CACH,OAAO,CAAC,EAAE,oBAAoB,EAC9B,IAAI,GAAE,UAAU,GAAG,aAA0B,QAQ9C;IAED,OAAO,SAON;CACF"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@graffiti-garden/wrapper-data-guard",
+  "version": "0.1.0",
+  "description": "Ask for permission before a site accesses Graffiti",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "browser": "./dist/browser/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build:types": "tsc --declaration --emitDeclarationOnly",
+    "build:js": "tsx esbuild.config.mts",
+    "build": "rm -rf dist && npm run build:types && npm run build:js",
+    "check": "tsc --noEmit",
+    "prepublishOnly": "npm run check && npm run build"
+  },
+  "author": "Theia Henderson",
+  "license": "GPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/graffiti-garden/graffiti.git",
+    "directory": "wrappers/data-guard/client"
+  },
+  "bugs": {
+    "url": "https://github.com/graffiti-garden/graffiti/issues"
+  },
+  "dependencies": {
+    "@graffiti-garden/api": "^1.2.0",
+    "@graffiti-garden/wrapper-iframe-rpc": "^0.1.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.1",
+    "tsx": "^4.21.0",
+    "typescript": "^7.0.2"
+  }
+}

package/src/index.ts

@@ -0,0 +1,158 @@
+import { Graffiti, type GraffitiSession } from "@graffiti-garden/api";
+import { GraffitiRpcClient } from "@graffiti-garden/wrapper-iframe-rpc/client";
+
+let instance: GraffitiGuarded | undefined;
+
+export interface GraffitiGuardedOptions {
+  hostUrl?: string | URL;
+  channel?: string;
+  timeout?: number;
+}
+
+export interface GraffitiGuardSourceSegment {
+  id: string;
+  name: string;
+}
+
+export type GraffitiGuardSession = GraffitiSession & {
+  source?: GraffitiGuardSourceSegment[];
+};
+
+/** A Graffiti implementation backed by a sandboxed guard iframe. */
+// @ts-ignore Graffiti methods are delegated through the constructor proxy.
+export class GraffitiGuarded extends Graffiti {
+  readonly sessionEvents!: EventTarget;
+  private readonly hostUrl!: URL;
+  private readonly iframe!: HTMLIFrameElement;
+  private readonly rpc!: GraffitiRpcClient;
+  private readonly onMessage!: (event: MessageEvent) => void;
+  private destroyed = false;
+
+  constructor(options: GraffitiGuardedOptions = {}) {
+    super();
+    if (instance) return instance;
+
+    const hostUrl = new URL(
+      options.hostUrl?.toString() ?? "https://guard.graffiti.garden/",
+      document.baseURI,
+    );
+    const iframe = document.createElement("iframe");
+    iframe.title = "Graffiti Guard";
+    iframe.allow = "storage-access";
+    iframe.sandbox.add(
+      "allow-scripts",
+      "allow-same-origin",
+      "allow-storage-access-by-user-activation",
+      "allow-downloads",
+      "allow-forms",
+      "allow-popups",
+      "allow-top-navigation-by-user-activation",
+    );
+    iframe.src = hostUrl.href;
+    iframe.setAttribute("aria-hidden", "true");
+    Object.assign(iframe.style, {
+      background: "transparent",
+      border: "0",
+      display: "none",
+      height: "100vh",
+      inset: "0",
+      position: "fixed",
+      width: "100vw",
+      zIndex: "2147483647",
+    });
+    iframe.addEventListener("load", () => {
+      // Bootstrap the guard with the browser-reported embedding origin, which
+      // the RPC handshake verifies internally but does not expose to the host.
+      iframe.contentWindow?.postMessage({ type: "graffiti-guard:connect" }, hostUrl.origin);
+    });
+    document.body.append(iframe);
+
+    const remoteWindow = iframe.contentWindow;
+    if (!remoteWindow) {
+      iframe.remove();
+      throw new Error("Graffiti Guard iframe did not create a content window.");
+    }
+
+    const rpc = new GraffitiRpcClient({
+      remoteWindow,
+      allowedOrigins: [hostUrl.origin],
+      channel: options.channel,
+      timeout: options.timeout,
+    });
+    const onMessage = (event: MessageEvent) => {
+      if (
+        event.source !== remoteWindow ||
+        event.origin !== hostUrl.origin ||
+        !event.data ||
+        typeof event.data !== "object"
+      ) {
+        return;
+      }
+      if (
+        event.data.type === "graffiti-guard:set-visible" &&
+        typeof event.data.visible === "boolean"
+      ) {
+        iframe.style.display = event.data.visible ? "block" : "none";
+        iframe.setAttribute("aria-hidden", String(!event.data.visible));
+      } else if (
+        event.data.type === "graffiti-guard:open-audit" &&
+        typeof event.data.actor === "string" &&
+        Array.isArray(event.data.source)
+      ) {
+        this.audit(
+          event.data,
+          event.data.view === "permissions" ? "permissions" : "activity",
+        );
+      }
+    };
+    window.addEventListener("message", onMessage);
+
+    this.hostUrl = hostUrl;
+    this.iframe = iframe;
+    this.rpc = rpc;
+    this.sessionEvents = rpc.sessionEvents;
+    this.onMessage = onMessage;
+
+    instance = new Proxy(this, {
+      get(target, property, receiver) {
+        if (Reflect.has(target, property)) {
+          return Reflect.get(target, property, receiver);
+        }
+        const value = Reflect.get(rpc, property, rpc);
+        return typeof value === "function" ? value.bind(rpc) : value;
+      },
+    });
+    return instance;
+  }
+
+  login: Graffiti["login"] = (actor) => {
+    const loginUrl = new URL(this.hostUrl);
+    loginUrl.searchParams.set("guardLogin", "1");
+    loginUrl.searchParams.set("redirectUrl", window.location.href);
+    if (actor) loginUrl.searchParams.set("suggestedActor", actor);
+    window.location.assign(loginUrl.href);
+    return Promise.resolve();
+  };
+
+  /** Open the host-owned audit panel without exposing audit data to this app. */
+  audit(
+    session?: GraffitiGuardSession,
+    view: "activity" | "permissions" = "activity",
+  ) {
+    const auditUrl = new URL(this.hostUrl);
+    auditUrl.searchParams.set("redirectUrl", window.location.href);
+    auditUrl.searchParams.set("source", JSON.stringify(session?.source ?? []));
+    if (session?.actor) auditUrl.searchParams.set("actor", session.actor);
+    auditUrl.searchParams.set("view", view);
+    window.location.assign(auditUrl.href);
+  }
+
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    window.removeEventListener("message", this.onMessage);
+    this.rpc.destroy();
+    this.iframe.remove();
+    if (instance === this) instance = undefined;
+  }
+}