@graffiti-garden/wrapper-data-guard 0.2.6 → 0.2.8

package/src/index.ts

@@ -1,10 +1,14 @@
-import { Graffiti, type GraffitiSession } from "@graffiti-garden/api";
+import {
+  Graffiti,
+  type GraffitiSession,
+} from "@graffiti-garden/api";
 import { GraffitiRpcClient } from "@graffiti-garden/wrapper-iframe-rpc/client";
 
 declare const DATA_GUARD_DEFAULT_HOST_URL: string;
 
 let instance: GraffitiGuarded | undefined;
 const defaultConnectionTimeout = 10_000;
+const pendingLoginKey = "graffiti-guard-login:";
 
 export interface GraffitiGuardedOptions {
   hostUrl?: string | URL;
@@ -24,13 +28,16 @@ export type GraffitiGuardSession = GraffitiSession & {
 /** 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;
+  readonly sessionEvents!: Graffiti["sessionEvents"];
   private readonly hostUrl!: URL;
   private readonly iframe!: HTMLIFrameElement;
   private readonly rpc!: GraffitiRpcClient;
   private readonly onMessage!: (event: MessageEvent) => void;
   private readonly connectionTimeout!: number;
   private destroyed = false;
+  private returnFocus: HTMLElement | null = null;
+  private readonly backgroundInert = new Map<HTMLElement, boolean>();
+  private backgroundObserver: MutationObserver | undefined;
 
   constructor(options: GraffitiGuardedOptions = {}) {
     super();
@@ -40,6 +47,8 @@ export class GraffitiGuarded extends Graffiti {
       options.hostUrl?.toString() ?? DATA_GUARD_DEFAULT_HOST_URL,
       document.baseURI,
     );
+    const loginKey = pendingLoginKey + hostUrl.origin;
+    const loginNonce = sessionStorage.getItem(loginKey);
     const iframe = document.createElement("iframe");
     iframe.title = "Graffiti Guard";
     iframe.allow = "storage-access";
@@ -58,7 +67,7 @@ export class GraffitiGuarded extends Graffiti {
       background: "transparent",
       border: "0",
       display: "none",
-      // Prompts scroll inside this frame, so size it for visible browser controls.
+      // Keep the overlay within the visible viewport when browser controls move.
       height: CSS.supports("height", "100svh") ? "100svh" : "100vh",
       inset: "0",
       position: "fixed",
@@ -74,6 +83,7 @@ export class GraffitiGuarded extends Graffiti {
         {
           type: "graffiti-guard:connect",
           pageUrl: window.location.href,
+          ...(loginNonce ? { loginNonce } : {}),
         },
         hostUrl.origin,
       );
@@ -102,6 +112,10 @@ export class GraffitiGuarded extends Graffiti {
       channel: options.channel,
       timeout: options.timeout,
     });
+    this.sessionEvents = rpc.sessionEvents;
+    this.sessionEvents.addEventListener("initialized", () => {
+      if (sessionStorage.getItem(loginKey) === loginNonce) sessionStorage.removeItem(loginKey);
+    }, { once: true });
     const connectionTimeout = window.setTimeout(
       showConnectionError,
       options.timeout ?? defaultConnectionTimeout,
@@ -128,10 +142,8 @@ export class GraffitiGuarded extends Graffiti {
         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));
+        this.setGuardVisible(event.data.visible);
         if (event.data.visible) {
-          iframe.focus();
           remoteWindow.postMessage(
             { type: "graffiti-guard:shown" },
             hostUrl.origin,
@@ -166,7 +178,6 @@ export class GraffitiGuarded extends Graffiti {
     this.hostUrl = hostUrl;
     this.iframe = iframe;
     this.rpc = rpc;
-    this.sessionEvents = rpc.sessionEvents;
     this.onMessage = onMessage;
     this.connectionTimeout = connectionTimeout;
 
@@ -182,7 +193,7 @@ export class GraffitiGuarded extends Graffiti {
     return instance;
   }
 
-  login: Graffiti["login"] = (actor) => {
+  login: Graffiti["login"] = (options) => {
     const loginUrl = new URL(this.hostUrl);
     // The guard reads this state in the browser; keep it out of the HTTP request.
     // This allows for very long redirectUrls
@@ -190,7 +201,11 @@ export class GraffitiGuarded extends Graffiti {
       guardLogin: "1",
       redirectUrl: window.location.href,
     });
-    if (actor) params.set("suggestedActor", actor);
+    if (options?.actor) params.set("suggestedActor", options.actor);
+    const nonce = crypto.randomUUID();
+    sessionStorage.setItem(pendingLoginKey + this.hostUrl.origin, nonce);
+    params.set("loginNonce", nonce);
+    if (options?.state !== undefined) params.set("state", options.state);
     loginUrl.hash = params.toString();
     window.location.assign(loginUrl.href);
     return Promise.resolve();
@@ -211,11 +226,62 @@ export class GraffitiGuarded extends Graffiti {
     return auditUrl.href;
   }
 
+  private setGuardVisible(visible: boolean) {
+    if (visible) {
+      if (this.iframe.style.display === "block") return;
+      const focused = document.activeElement;
+      this.returnFocus =
+        focused instanceof HTMLElement && focused !== this.iframe
+          ? focused
+          : null;
+      this.inertBackground();
+      this.backgroundObserver = new MutationObserver(() => this.inertBackground());
+      this.backgroundObserver.observe(document.body, { childList: true });
+      this.iframe.style.display = "block";
+      this.iframe.setAttribute("aria-hidden", "false");
+      this.iframe.focus();
+      return;
+    }
+
+    if (this.iframe.style.display === "none") return;
+
+    this.iframe.style.display = "none";
+    this.iframe.setAttribute("aria-hidden", "true");
+    this.backgroundObserver?.disconnect();
+    this.backgroundObserver = undefined;
+    for (const [element, wasInert] of this.backgroundInert) {
+      element.inert = wasInert;
+    }
+    this.backgroundInert.clear();
+    const target = this.returnFocus;
+    this.returnFocus = null;
+    if (target?.isConnected && !target.inert && target !== document.body) {
+      target.focus({ preventScroll: true });
+    } else {
+      const previousTabindex = document.body.getAttribute("tabindex");
+      document.body.tabIndex = -1;
+      document.body.focus({ preventScroll: true });
+      if (previousTabindex === null) document.body.removeAttribute("tabindex");
+      else document.body.setAttribute("tabindex", previousTabindex);
+    }
+  }
+
+  private inertBackground() {
+    for (const child of Array.from(document.body.children)) {
+      if (child === this.iframe || !(child instanceof HTMLElement)) continue;
+      if (!this.backgroundInert.has(child)) {
+        this.backgroundInert.set(child, child.inert);
+      }
+      child.inert = true;
+    }
+  }
+
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
     window.clearTimeout(this.connectionTimeout);
     window.removeEventListener("message", this.onMessage);
+    if (this.iframe.style.display === "block") this.setGuardVisible(false);
     this.rpc.destroy();
     this.iframe.remove();
     if (instance === this) instance = undefined;