@discloai/core 0.1.0

package/src/audit.ts

@@ -0,0 +1,155 @@
+// ---------------------------------------------------------------------------
+// DiscloAI Audit Event Client
+// ---------------------------------------------------------------------------
+// Security invariants:
+//   - NEVER use innerHTML / outerHTML / insertAdjacentHTML
+//   - NEVER log PII: pageUrl and sessionId are SHA-256 hashed before sending
+//   - NEVER throw: all errors are swallowed — audit must never break the page
+//   - Primary transport: navigator.sendBeacon (non-blocking, survives unload)
+//   - Fallback:         fetch({ keepalive: true })  when sendBeacon unavailable
+// ---------------------------------------------------------------------------
+
+export interface AuditEventParams {
+  /** One of the four EU AI Act Article 50 disclosure types */
+  disclosureType: string;
+  /** Semver string of the component that fired the event */
+  componentVersion: string;
+  /** Caller-supplied session identifier — will be hashed before sending */
+  sessionId: string;
+  /** Whether the disclosure was rendered to the user (default: true) */
+  rendered?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Window config shape (set by the dashboard embed snippet)
+// ---------------------------------------------------------------------------
+
+interface DiscloAIWindowConfig {
+  siteId?: string;
+  auditEndpoint?: string;
+  /** Override the config fetch URL — only http://localhost or https:// are accepted. */
+  configEndpoint?: string;
+  // NOTE: writeToken is intentionally omitted — HMAC signing is server-side only.
+  // Browser-initiated audit events are authenticated by Origin header validation
+  // on the server. The write token MUST NEVER be present in browser code.
+}
+
+declare global {
+  interface Window {
+    __DISCLOAI_CONFIG__?: DiscloAIWindowConfig;
+  }
+}
+
+const DEFAULT_AUDIT_ENDPOINT = "https://app.discloai.com/api/v1/audit/event";
+
+// ---------------------------------------------------------------------------
+// Crypto helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * SHA-256 hash of a string, returned as lowercase hex.
+ * Uses the Web Crypto API (available in all modern browsers and Node ≥ 18).
+ */
+export async function sha256Hex(input: string): Promise<string> {
+  const encoded = new TextEncoder().encode(input);
+  const buffer = await crypto.subtle.digest("SHA-256", encoded);
+  return hexFromBuffer(buffer);
+}
+
+/**
+ * HMAC-SHA-256 of `message` signed with `secret`, returned as lowercase hex.
+ */
+export async function hmacHex(
+  message: string,
+  secret: string,
+): Promise<string> {
+  const encoder = new TextEncoder();
+  const key = await crypto.subtle.importKey(
+    "raw",
+    encoder.encode(secret),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"],
+  );
+  const buffer = await crypto.subtle.sign("HMAC", key, encoder.encode(message));
+  return hexFromBuffer(buffer);
+}
+
+function hexFromBuffer(buffer: ArrayBuffer): string {
+  return Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+// ---------------------------------------------------------------------------
+// Main export
+// ---------------------------------------------------------------------------
+
+/**
+ * Fire-and-forget audit event.
+ *
+ * Uses navigator.sendBeacon (primary) or fetch({ keepalive: true }) (fallback).
+ * Never throws — any error is caught and silently swallowed.
+ */
+export async function sendAuditEvent(params: AuditEventParams): Promise<void> {
+  try {
+    const cfg =
+      typeof window !== "undefined" ? (window.__DISCLOAI_CONFIG__ ?? {}) : {};
+
+    const siteId = cfg.siteId ?? "";
+    // M-2: Reject non-HTTPS endpoints to prevent MITM against hashed PII.
+    // Exception: http://localhost and http://127.0.0.1 are allowed for local dev.
+    const rawEndpoint = cfg.auditEndpoint ?? DEFAULT_AUDIT_ENDPOINT;
+    const isLocalDev =
+      rawEndpoint.startsWith("http://localhost") ||
+      rawEndpoint.startsWith("http://127.0.0.1");
+    const endpoint =
+      rawEndpoint.startsWith("https://") || isLocalDev
+        ? rawEndpoint
+        : DEFAULT_AUDIT_ENDPOINT;
+    // H-2: ISO 8601 timestamp — numeric epoch strings fail new Date() in Node.js
+    const timestamp = new Date().toISOString();
+
+    // Hash PII before it leaves the browser
+    const pageHref =
+      typeof globalThis.location !== "undefined"
+        ? globalThis.location.href
+        : "";
+
+    const [pageUrlHash, sessionHash] = await Promise.all([
+      sha256Hex(pageHref),
+      sha256Hex(params.sessionId),
+    ]);
+
+    const body = JSON.stringify({
+      siteId,
+      timestamp,
+      // C-1: No signature — authentication is via Origin header on the server
+      pageUrlHash,
+      sessionHash,
+      disclosureType: params.disclosureType,
+      componentVersion: params.componentVersion,
+      rendered: params.rendered ?? true,
+    });
+
+    const blob = new Blob([body], { type: "application/json" });
+
+    if (
+      typeof navigator !== "undefined" &&
+      typeof navigator.sendBeacon === "function"
+    ) {
+      navigator.sendBeacon(endpoint, blob);
+    } else {
+      // keepalive fetch survives page unload just like sendBeacon
+      void fetch(endpoint, {
+        method: "POST",
+        body: blob,
+        keepalive: true,
+      }).catch(() => {
+        // swallow network errors silently
+      });
+    }
+  } catch {
+    // NEVER propagate — audit failures must never break the host page
+  }
+}

package/src/components/AIContentLabel.ts

@@ -0,0 +1,108 @@
+// EU AI Act Article 50 §4¶2 — AI-generated content label
+//
+// Invariants:
+// - NEVER use innerHTML / outerHTML / insertAdjacentHTML — use element.textContent
+// - Custom CSS must be sanitized before injection via sanitizeCSS()
+// - All errors are swallowed — never throw
+
+import { sendAuditEvent } from "../audit.js";
+import { sanitizeCSS } from "../config.js";
+import { t } from "../i18n/index.js";
+import { VERSION } from "../version.js";
+
+export interface AIContentLabelConfig {
+  enabled?: boolean;
+  variant?: "default" | "artistic";
+  /** CSS selector for elements to label */
+  selector?: string;
+  /** Custom CSS string — sanitized before injection */
+  customCSS?: string;
+  exemptions?: {
+    /** Both editorialControl AND editorialResponsibility must be present to suppress rendering */
+    editorialControl?: boolean;
+    editorialResponsibility?: string;
+  };
+}
+
+const DEFAULT_LABEL_CSS =
+  '[data-discloai-label="ai-content"] {' +
+  " position: relative; display: inline-block;" +
+  " background: #e0e7ff; color: #3730a3;" +
+  " font-size: 0.75rem; padding: 2px 6px;" +
+  " border-radius: 3px; font-family: sans-serif;" +
+  " white-space: nowrap; }";
+
+/** Render the AIContentLabel widget (EU AI Act Article 50 §4¶2). */
+export function renderAIContentLabel(
+  siteId: string,
+  config: AIContentLabelConfig,
+  cspNonce?: string,
+): void {
+  try {
+    if (typeof document === "undefined") return;
+
+    // editorialControl exemption: BOTH fields must be present
+    if (
+      config.exemptions?.editorialControl === true &&
+      typeof config.exemptions?.editorialResponsibility === "string"
+    ) {
+      void sendAuditEvent({
+        disclosureType: "AIContentLabel",
+        componentVersion: VERSION,
+        sessionId: siteId,
+        rendered: false,
+      });
+      return;
+    }
+
+    // Find target elements
+    const selector = config.selector ?? '[data-discloai-content="true"]';
+    const elements = Array.from(document.querySelectorAll(selector));
+
+    const labelText =
+      config.variant === "artistic"
+        ? t("content.label.artistic")
+        : t("content.label.default");
+
+    for (const element of elements) {
+      if (element.hasAttribute("data-discloai-labeled")) continue;
+
+      const span = document.createElement("span");
+      span.textContent = labelText;
+      span.setAttribute("data-discloai-label", "ai-content");
+      span.setAttribute("role", "img");
+      span.setAttribute("aria-label", labelText);
+
+      if (element.parentNode) {
+        element.parentNode.insertBefore(span, element);
+      }
+      element.setAttribute("data-discloai-labeled", "true");
+    }
+
+    // Inject default label styles
+    const styleEl = document.createElement("style");
+    styleEl.textContent = DEFAULT_LABEL_CSS;
+    if (cspNonce) styleEl.setAttribute("nonce", cspNonce);
+    document.head.appendChild(styleEl);
+
+    // Inject custom CSS if provided
+    if (config.customCSS) {
+      const sanitized = sanitizeCSS(config.customCSS);
+      if (sanitized) {
+        const customStyleEl = document.createElement("style");
+        customStyleEl.textContent = sanitized;
+        if (cspNonce) customStyleEl.setAttribute("nonce", cspNonce);
+        document.head.appendChild(customStyleEl);
+      }
+    }
+
+    void sendAuditEvent({
+      disclosureType: "AIContentLabel",
+      componentVersion: VERSION,
+      sessionId: siteId,
+      rendered: true,
+    });
+  } catch (_e) {
+    // Never throw — swallow all errors silently
+  }
+}

package/src/components/BiometricNotice.ts

@@ -0,0 +1,82 @@
+// EU AI Act Article 50 §3 — Biometric / emotion recognition system notice
+//
+// Invariants:
+// - NEVER use innerHTML / outerHTML / insertAdjacentHTML — use element.textContent
+// - z-index: 2147483647 on the notice banner
+// - Custom CSS must be sanitized before injection via sanitizeCSS()
+// - All errors are swallowed — never throw
+
+import { sendAuditEvent } from "../audit.js";
+import { sanitizeCSS } from "../config.js";
+import { t } from "../i18n/index.js";
+import { VERSION } from "../version.js";
+
+export interface BiometricNoticeConfig {
+  enabled?: boolean;
+  /** CSS selector for the element that triggers the biometric system */
+  selector?: string;
+  /** Custom CSS string — sanitized before injection */
+  customCSS?: string;
+}
+
+/** Render the BiometricNotice widget (EU AI Act Article 50 §3). */
+export function renderBiometricNotice(
+  siteId: string,
+  config: BiometricNoticeConfig,
+  cspNonce?: string,
+): void {
+  try {
+    if (typeof document === "undefined") return;
+
+    const banner = document.createElement("div");
+    banner.setAttribute("role", "alert");
+    banner.setAttribute("aria-live", "assertive");
+    banner.style.cssText =
+      "position: fixed;" +
+      " top: 0; left: 0; right: 0;" +
+      " z-index: 2147483647;" +
+      " background: #fef3c7;" +
+      " border-bottom: 2px solid #f59e0b;" +
+      " padding: 12px 24px;" +
+      " font-family: sans-serif;" +
+      " font-size: 0.875rem;" +
+      " text-align: center;";
+
+    const noticeText = t("biometric.notice.default");
+
+    const textSpan = document.createElement("span");
+    textSpan.textContent = noticeText;
+    banner.appendChild(textSpan);
+
+    const closeBtn = document.createElement("button");
+    closeBtn.textContent = "\u2715"; // ✕
+    closeBtn.addEventListener("click", () => {
+      if (banner.parentNode) {
+        banner.parentNode.removeChild(banner);
+      }
+    });
+    banner.appendChild(closeBtn);
+
+    // Inject custom CSS if provided
+    if (config.customCSS) {
+      const sanitized = sanitizeCSS(config.customCSS);
+      if (sanitized) {
+        const styleEl = document.createElement("style");
+        styleEl.textContent = sanitized;
+        if (cspNonce) styleEl.setAttribute("nonce", cspNonce);
+        document.head.appendChild(styleEl);
+      }
+    }
+
+    document.body.appendChild(banner);
+
+    void sendAuditEvent({
+      disclosureType: "BiometricNotice",
+      componentVersion: VERSION,
+      sessionId: siteId,
+      rendered: true,
+    });
+  } catch (_e) {
+    // Never throw — swallow all errors silently
+  }
+}

package/src/components/ChatbotDisclosure.ts

@@ -0,0 +1,188 @@
+// EU AI Act Article 50 §1 — Chatbot AI disclosure
+//
+// Invariants:
+// - NEVER use innerHTML / outerHTML / insertAdjacentHTML — use element.textContent
+// - z-index: 2147483647 on the disclosure overlay
+// - sessionStorage key: discloai:{siteId}:ChatbotDisclosure:seen
+// - Supports triggerEvent: 'on-load' | 'on-open'
+// - On obviousContext exemption: log console.info and send audit event with rendered: false
+// - All errors are swallowed — never throw
+
+import { sendAuditEvent } from "../audit.js";
+import { sanitizeCSS } from "../config.js";
+import { t } from "../i18n/index.js";
+import { VERSION } from "../version.js";
+
+export interface ChatbotDisclosureConfig {
+  enabled?: boolean;
+  /** CSS selector for the target chatbot widget element */
+  selector?: string;
+  /** One of the 6 built-in vendor presets */
+  vendor?: "intercom" | "crisp" | "tidio" | "zendesk" | "drift" | "livechat";
+  /** When to show the disclosure: on page load or when the chat widget opens */
+  triggerEvent?: "on-load" | "on-open";
+  /** Style variant */
+  variant?: "minimal" | "prominent" | "custom";
+  /** Custom CSS string — sanitized before injection; url(), @import, expression(), javascript: are blocked */
+  customCSS?: string;
+  exemptions?: {
+    /** Suppress disclosure when AI use is already obvious from context */
+    obviousContext?: boolean;
+    /** Suppress for editorial/creative AI use */
+    editorialControl?: boolean;
+  };
+}
+
+const VENDOR_SELECTOR_MAP: Record<string, string> = {
+  intercom: "#intercom-container",
+  crisp: "#crisp-chatbox",
+  tidio: "#tidio-chat",
+  zendesk: "#launcher",
+  drift: "#drift-frame-controller",
+  livechat: "#chat-widget-container",
+};
+
+/** Render the ChatbotDisclosure widget (EU AI Act Article 50 §1). */
+export function renderChatbotDisclosure(
+  siteId: string,
+  config: ChatbotDisclosureConfig,
+  cspNonce?: string,
+): void {
+  try {
+    if (typeof document === "undefined") return;
+
+    // sessionStorage check — skip if user already acknowledged this session
+    const storageKey = `discloai:${siteId}:ChatbotDisclosure:seen`;
+    try {
+      if (
+        typeof sessionStorage !== "undefined" &&
+        sessionStorage.getItem(storageKey) === "true"
+      ) {
+        return;
+      }
+    } catch (_e) {
+      // sessionStorage unavailable (private mode, cross-origin) — continue
+    }
+
+    // obviousContext exemption: suppress rendering, send audit event with rendered: false
+    if (config.exemptions?.obviousContext === true) {
+      console.info(
+        "[DiscloAI] ChatbotDisclosure: obviousContext exemption applied",
+      );
+      void sendAuditEvent({
+        disclosureType: "ChatbotDisclosure",
+        componentVersion: VERSION,
+        sessionId: siteId,
+        rendered: false,
+      });
+      return;
+    }
+
+    const showDisclosure = (): void => {
+      const overlay = document.createElement("div");
+      overlay.setAttribute("role", "alert");
+      overlay.setAttribute("aria-live", "polite");
+      overlay.style.cssText =
+        "position: fixed;" +
+        " bottom: 80px; right: 24px;" +
+        " z-index: 2147483647;" +
+        " background: #fff;" +
+        " border: 1px solid #c7d2fe;" +
+        " border-radius: 8px;" +
+        " padding: 12px 16px;" +
+        " max-width: 320px;" +
+        " box-shadow: 0 4px 16px rgba(0,0,0,0.12);" +
+        " font-family: sans-serif;";
+
+      const labelText =
+        config.variant === "prominent"
+          ? t("chatbot.disclosure.prominent")
+          : t("chatbot.disclosure.default");
+
+      const p = document.createElement("p");
+      p.textContent = labelText;
+      overlay.appendChild(p);
+
+      const closeOverlay = (): void => {
+        if (overlay.parentNode) {
+          overlay.parentNode.removeChild(overlay);
+        }
+        try {
+          if (typeof sessionStorage !== "undefined") {
+            sessionStorage.setItem(storageKey, "true");
+          }
+        } catch (_e) {
+          // ignore — sessionStorage might be unavailable
+        }
+      };
+
+      const closeBtn = document.createElement("button");
+      closeBtn.textContent = "\u2715"; // ✕
+      closeBtn.addEventListener("click", closeOverlay);
+      overlay.appendChild(closeBtn);
+
+      // Inject custom CSS
+      if (config.customCSS) {
+        const sanitized = sanitizeCSS(config.customCSS);
+        if (sanitized) {
+          const styleEl = document.createElement("style");
+          styleEl.textContent = sanitized;
+          if (cspNonce) styleEl.setAttribute("nonce", cspNonce);
+          document.head.appendChild(styleEl);
+        }
+      }
+
+      document.body.appendChild(overlay);
+
+      // Auto-dismiss after 8 seconds
+      setTimeout(closeOverlay, 8000);
+
+      void sendAuditEvent({
+        disclosureType: "ChatbotDisclosure",
+        componentVersion: VERSION,
+        sessionId: siteId,
+        rendered: true,
+      });
+    };
+
+    const triggerEvent = config.triggerEvent ?? "on-load";
+
+    if (triggerEvent === "on-load") {
+      showDisclosure();
+      return;
+    }
+
+    // on-open: watch for the target element to appear and become visible
+    let vendorSelector = "";
+    if (config.vendor) {
+      vendorSelector = VENDOR_SELECTOR_MAP[config.vendor] ?? "";
+    } else if (config.selector) {
+      vendorSelector = config.selector;
+    }
+
+    if (!vendorSelector) {
+      // No selector — fall back to global banner mode (render immediately)
+      showDisclosure();
+      return;
+    }
+
+    const observer = new MutationObserver(() => {
+      const target = document.querySelector(vendorSelector);
+      if (target) {
+        const style = window.getComputedStyle(target);
+        if (style.display !== "none" && style.visibility !== "hidden") {
+          observer.disconnect();
+          showDisclosure();
+        }
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    });
+  } catch (_e) {
+    // Never throw — swallow all errors silently
+  }
+}

package/src/components/DeepfakeLabel.ts

@@ -0,0 +1,123 @@
+// EU AI Act Article 50 §4¶1 — Deepfake / synthetic media label
+//
+// Invariants:
+// - NEVER use innerHTML / outerHTML / insertAdjacentHTML — use element.textContent
+// - z-index: 2147483647 on label overlay
+// - Custom CSS must be sanitized before injection via sanitizeCSS()
+// - All errors are swallowed — never throw
+
+import { sendAuditEvent } from "../audit.js";
+import { sanitizeCSS } from "../config.js";
+import { t } from "../i18n/index.js";
+import { VERSION } from "../version.js";
+
+export interface DeepfakeLabelConfig {
+  enabled?: boolean;
+  variant?: "default" | "artistic";
+  /** CSS selector for synthetic media elements to label */
+  selector?: string;
+  /** Custom CSS string — sanitized before injection */
+  customCSS?: string;
+  exemptions?: {
+    /** Uses artistic label text but still renders — does NOT suppress disclosure */
+    artisticContext?: boolean;
+  };
+}
+
+function wrapAndLabel(
+  element: Element,
+  labelText: string,
+  topOffset: string,
+  leftOffset: string,
+): void {
+  if (!element.parentNode) return;
+
+  // Create wrapper div
+  const wrapper = document.createElement("div");
+  wrapper.style.cssText = "position: relative; display: inline-block;";
+  element.parentNode.insertBefore(wrapper, element);
+  wrapper.appendChild(element);
+
+  // Create label overlay
+  const labelDiv = document.createElement("div");
+  labelDiv.textContent = labelText;
+  labelDiv.setAttribute("role", "img");
+  labelDiv.setAttribute("aria-label", labelText);
+  labelDiv.style.cssText =
+    "position: absolute;" +
+    " top: " +
+    topOffset +
+    ";" +
+    " left: " +
+    leftOffset +
+    ";" +
+    " z-index: 2147483647;" +
+    " background: rgba(0,0,0,0.7);" +
+    " color: #fff;" +
+    " font-size: 0.75rem;" +
+    " padding: 2px 8px;" +
+    " border-radius: 3px;" +
+    " pointer-events: none;";
+  wrapper.appendChild(labelDiv);
+}
+
+/** Render the DeepfakeLabel widget (EU AI Act Article 50 §4¶1). */
+export function renderDeepfakeLabel(
+  siteId: string,
+  config: DeepfakeLabelConfig,
+  cspNonce?: string,
+): void {
+  try {
+    if (typeof document === "undefined") return;
+
+    // artisticContext exemption uses the artistic label but still renders
+    const useArtistic =
+      config.exemptions?.artisticContext === true ||
+      config.variant === "artistic";
+    const labelText = useArtistic
+      ? t("deepfake.label.artistic")
+      : t("deepfake.label.default");
+
+    // Find target elements
+    let elements: Element[];
+    if (config.selector) {
+      elements = Array.from(document.querySelectorAll(config.selector)).filter(
+        (el) => el.tagName === "VIDEO" || el.tagName === "IMG",
+      );
+    } else {
+      elements = [
+        ...Array.from(document.querySelectorAll("video")),
+        ...Array.from(document.querySelectorAll("img")),
+      ];
+    }
+
+    for (const element of elements) {
+      if (element.hasAttribute("data-discloai-labeled")) continue;
+
+      const isVideo = element.tagName === "VIDEO";
+      const offset = isVideo ? "8px" : "4px";
+      wrapAndLabel(element, labelText, offset, offset);
+      element.setAttribute("data-discloai-labeled", "true");
+    }
+
+    // Inject custom CSS if provided
+    if (config.customCSS) {
+      const sanitized = sanitizeCSS(config.customCSS);
+      if (sanitized) {
+        const customStyleEl = document.createElement("style");
+        customStyleEl.textContent = sanitized;
+        if (cspNonce) customStyleEl.setAttribute("nonce", cspNonce);
+        document.head.appendChild(customStyleEl);
+      }
+    }
+
+    void sendAuditEvent({
+      disclosureType: "DeepfakeLabel",
+      componentVersion: VERSION,
+      sessionId: siteId,
+      rendered: true,
+    });
+  } catch (_e) {
+    // Never throw — swallow all errors silently
+  }
+}