क्लाइंट-साइड AI गवर्नेंस: Next.js में नीति प्रवर्तन, C2PA उत्पत्ति और DLP के लिए आर्किटेक्चरल पैटर्न

आधुनिक वेब अनुप्रयोगों में जेनेरेटिव AI सुविधाओं और इन-ब्राउज़र इंफरेंस मॉडल (जैसे WebLLM, Vercel AI SDK, और लोकल वर्कर एम्बेडिंग) का मानक बनने के साथ, AI गवर्नेंस सीधे फ्रंटएंड स्टैक में स्थानांतरित हो गया है। सुरक्षा अब केवल बैकएंड गेटवे की जिम्मेदारी नहीं रह गई है; क्लाइंट-साइड अनुप्रयोगों को सख्त डेटा लीकेज प्रिवेंशन (DLP) लागू करना होगा, इंजेक्शन कमजोरियों के खिलाफ गैर-निर्णात्मक मॉडल आउटपुट को मान्य करना होगा, EU AI Act आर्टिकल 50 जैसे नियमों का अनुपालन सुनिश्चित करना होगा, और संरचित ऑडिट टेलीमेट्री प्रदान करनी होगी।

अगस्त 2026 तक, EU AI Act स्पष्ट रूप से AI-जेनरेट की गई सामग्री के लिए मशीन-पठनीय, इंटरऑपरेबल प्रकटीकरण और उत्पत्ति टैगिंग का आदेश देता है। वेब इंजीनियरिंग टीमों के लिए, इन कानूनी और सुरक्षा अपेक्षाओं को पूरा करने के लिए हमारे React और Next.js अनुप्रयोगों में सीधे एम्बेडेड एक संरचित, डिफेंस-इन-डेप्थ आर्किटेक्चर की आवश्यकता होती है।

इस गाइड में, हम Next.js App Router अनुप्रयोगों के लिए निर्मित 4-स्तरीय क्लाइंट-साइड AI गवर्नेंस लेयर की जांच करते हैं, जिसमें प्रॉमप्ट DLP, Zod-आधारित स्ट्रीमिंग गार्डरेल्स, C2PA मेटाडेटा साइनिंग, और प्राइवेसी-संरक्षित OpenTelemetry ऑडिट लॉग्स के लिए TypeScript कार्यान्वयन शामिल हैं।

---

4-स्तरीय फ्रंटएंड AI गवर्नेंस लेयर

उपयोगकर्ता सत्र स्थिति की रक्षा करने, LLM कमजोरियों के लिए OWASP शीर्ष 10 (विशेष रूप से LLM01: प्रॉमप्ट इंजेक्शन और LLM05: अनुचित आउटपुट हैंडलिंग) को रोकने, और पारदर्शिता अनुपालन को पूरा करने के लिए, हमारा फ्रंटएंड आर्किटेक्चर गवर्नेंस को चार अलग-अलग स्तरों में विभाजित करता है:

┌───────────────────────────────────────────────────────────────────────┐
│                    Next.js App Router Application                     │
│                                                                       │
│  ┌─────────────────────────────────────────────────────────────────┐  │
│  │ Tier 1: Client DLP & Input Sanitization                         │  │
│  │ ├─ Regex entropy scanning & PII redaction                       │  │
│  │ └─ Prompt injection detection heuristics                        │  │
│  └────────────────────────────────┬────────────────────────────────┘  │
│                                   │                                   │
│                                   ▼                                   │
│  ┌─────────────────────────────────────────────────────────────────┐  │
│  │ Tier 2: Edge Guardrail & Output Sanitizer                       │  │
│  │ ├─ Zod schema stream validation                                 │  │
│  │ └─ DOMPurify AST filter & XSS containment                       │  │
│  └────────────────────────────────┬────────────────────────────────┘  │
│                                   │                                   │
│                                   ▼                                   │
│  ┌─────────────────────────────────────────────────────────────────┐  │
│  │ Tier 3: C2PA Provenance & Watermark Injector                    │  │
│  │ ├─ Article 50 manifest digital signing                          │  │
│  │ └─ Machine-readable visual provenance badge                     │  │
│  └────────────────────────────────┬────────────────────────────────┘  │
│                                   │                                   │
│                                   ▼                                   │
│  ┌─────────────────────────────────────────────────────────────────┐  │
│  │ Tier 4: Privacy-Preserving Audit Telemetry                      │  │
│  │ ├─ SHA-256 context hashing & model latency metrics              │  │
│  │ └─ Structured OpenTelemetry audit logger                        │  │
│  └─────────────────────────────────────────────────────────────────┘  │
└───────────────────────────────────────────────────────────────────────┘

---

स्तर 1: क्लाइंट-साइड डेटा लीकेज प्रिवेंशन (DLP)

इससे पहले कि कोई उपयोगकर्ता प्रॉमप्ट किसी LLM प्रदाता या स्थानीय WebGPU इंजन को भेजा जाए, उपयोगकर्ता के ब्राउज़र सैंडबॉक्स को छोड़ने से संवेदनशील क्रेडेंशियल्स (API कुंजी, क्रेडिट कार्ड, JWT टोकन, PII) को रोकने के लिए इसका क्लाइंट-साइड मूल्यांकन किया जाना चाहिए।

हम एक हल्का React हुक (useSanitizedPrompt) बनाते हैं जो नेटवर्क प्रेषण से पहले एंट्रॉपी-आधारित सीक्रेट स्कैनिंग और रेगुलर एक्सप्रेशन मास्क निष्पादित करता है:

import { useMemo, useState } from "react";

interface PIIPattern {
  name: string;
  regex: RegExp;
  replacement: string;
}

const DEFAULT_PATTERNS: PIIPattern[] = [
  {
    name: "API_KEY",
    regex: /(?:sk|pk)_(?:live|test)_[0-9a-zA-Z]{24,32}/g,
    replacement: "[REDACTED_API_KEY]"
  },
  {
    name: "BEARER_TOKEN",
    regex: /Bearer\s+[A-Za-z0-9\-\._~\+\/]+=*/g,
    replacement: "Bearer [REDACTED_TOKEN]"
  },
  {
    name: "EMAIL",
    regex: /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g,
    replacement: "[REDACTED_EMAIL]"
  },
  {
    name: "CREDIT_CARD",
    regex: /\b(?:\d[ -]*?){13,16}\b/g,
    replacement: "[REDACTED_CARD]"
  }
];

// Shannon Entropy check to catch high-randomness string tokens
function calculateShannonEntropy(str: string): number {
  const map: Record<string, number> = {};
  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    map[char] = (map[char] || 0) + 1;
  }
  let entropy = 0;
  for (const char in map) {
    const p = map[char] / str.length;
    entropy -= p * Math.log2(p);
  }
  return entropy;
}

export function useSanitizedPrompt() {
  const [violations, setViolations] = useState<string[]>([]);

  const sanitize = (rawInput: string): { cleanPrompt: string; isSafe: boolean } => {
    let cleanPrompt = rawInput;
    const detectedViolations: string[] = [];

    // 1. Apply RegEx Redaction
    for (const pattern of DEFAULT_PATTERNS) {
      if (pattern.regex.test(cleanPrompt)) {
        detectedViolations.push(pattern.name);
        cleanPrompt = cleanPrompt.replace(pattern.regex, pattern.replacement);
      }
    }

    // 2. High Entropy Word Detection (Catch secrets not matching fixed regex)
    const words = cleanPrompt.split(/\s+/);
    const sanitizedWords = words.map((word) => {
      if (word.length > 20 && calculateShannonEntropy(word) > 4.5) {
        detectedViolations.push("HIGH_ENTROPY_TOKEN");
        return "[REDACTED_HIGH_ENTROPY_TOKEN]";
      }
      return word;
    });

    cleanPrompt = sanitizedWords.join(" ");
    setViolations(detectedViolations);

    return {
      cleanPrompt,
      isSafe: detectedViolations.length === 0
    };
  };

  return { sanitize, violations };
}

---

स्तर 2: स्ट्रीमिंग आउटपुट गार्डरेल्स और XSS रोकथाम

OWASP LLM05 (अनुचित आउटपुट हैंडलिंग) तब होता है जब AI मॉडल आउटपुट DOM सैनिटाइजेशन के बिना सीधे UI में रेंडर किए जाते हैं, जिससे स्टोर किए गए या रिफ्लेक्टेड क्रॉस-साइट स्क्रिप्टिंग (XSS) उत्पन्न होते हैं।

Next.js App Router अनुप्रयोगों में, स्ट्रीमिंग LLM पूरा होने को सर्वर या एज रूट पर एक सख्त Zod स्कीमा के खिलाफ मान्य किया जाना चाहिए, जबकि रेंडर किए गए HTML घटक एक कॉन्फ़िगर की गई DOMPurify पाइपलाइन के माध्यम से AST टुकड़ों को पार्स करते हैं:

import { z } from "zod";
import DOMPurify from "isomorphic-dompurify";

// Define strict output expectations for structured AI component responses
export const AIComponentResponseSchema = z.object({
  componentName: z.string().max(64),
  summary: z.string().max(500),
  actionPayload: z.record(z.unknown()).optional(),
  renderedHtml: z.string().transform((val) =>
    DOMPurify.sanitize(val, {
      ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "code", "pre", "p", "ul", "li"],
      ALLOWED_ATTR: ["href", "target", "rel", "class"],
      ALLOW_DATA_ATTR: false
    })
  )
});

export type AIComponentResponse = z.infer<typeof AIComponentResponseSchema>;

export async function validateAndSanitizeStream(rawChunk: unknown): Promise<AIComponentResponse> {
  const parseResult = AIComponentResponseSchema.safeParse(rawChunk);
  
  if (!parseResult.success) {
    throw new Error(`AI Governance Guardrail Violation: ${parseResult.error.message}`);
  }
  
  return parseResult.data;
}

---

स्तर 3: EU AI Act आर्टिकल 50 और C2PA उत्पत्ति हस्ताक्षर

EU AI Act का आर्टिकल 50 सिंथेटिक सामग्री (पाठ, ऑडियो, कोड, या चित्र) उत्पन्न करने वाले वेब अनुप्रयोगों को मशीन-पठनीय मेटाडेटा एम्बेड करने और स्पष्ट दृश्य प्रकटीकरण प्रस्तुत करने का आदेश देता है।

1. सर्वर-साइड C2PA मेनिफेस्ट साइनिंग (Server Action)

हम निर्माण के समय जेनेरेटिव संपत्तियों पर हस्ताक्षर करते हैं, एक C2PA मेनिफेस्ट बनाकर जिसमें दावे के विवरण, जेनेरेटर मेटाडेटा और डिजिटल हस्ताक्षर शामिल हैं:

"use server";

import { createC2PAManifest } from "@contentauth/c2pa-node";

export interface AIContentProvenanceOptions {
  modelName: string;
  promptHash: string;
  authorOrg: string;
}

export async function signGeneratedAssetProvenance(
  assetBuffer: Buffer,
  options: AIContentProvenanceOptions
): Promise<Buffer> {
  const manifest = createC2PAManifest({
    claim_generator: `${options.authorOrg}/NextJS-AIGovernanceEngine/1.0`,
    title: "Generative AI Output Asset",
    assertions: [
      {
        label: "c2pa.actions",
        data: {
          actions: [
            {
              action: "c2pa.created",
              digitalSourceType: "https://cv.iptc.org/newscodes/digitalsourcetype/trainedAlgorithmicMedia"
            }
          ]
        }
      },
      {
        label: "org.eu.aiact.compliance",
        data: {
          article: "Article 50",
          model_name: options.modelName,
          prompt_sha256: options.promptHash,
          timestamp: new Date().toISOString()
        }
      }
    ]
  });

  // Embed signed manifest into binary buffer
  const signedBuffer = await manifest.embedIntoBuffer(assetBuffer);
  return signedBuffer;
}

2. सुलभ UI ओरिजिन इंडिकेटर कंपोनेंट

प्रत्येक AI-जनरेटेड UI ब्लॉक को एक स्थायी, विनीत बैज प्रदर्शित करना चाहिए जो उपयोगकर्ताओं को उत्पत्ति साख सत्यापित करने की अनुमति देता है:

"use client";

import React, { useState } from "react";

interface ProvenanceBadgeProps {
  modelName: string;
  timestamp: string;
  isCompliant: boolean;
}

export const ContentProvenanceBadge: React.FC<ProvenanceBadgeProps> = ({
  modelName,
  timestamp,
  isCompliant
}) => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div className="inline-flex items-center gap-2 text-xs font-mono text-neutral-600 bg-neutral-100 dark:bg-neutral-800 px-2.5 py-1 rounded-md border border-neutral-200 dark:border-neutral-700">
      <span className="inline-block w-2 h-2 rounded-full bg-emerald-500" aria-hidden="true" />
      <span>AI Generated ({modelName})</span>
      <button
        onClick={() => setShowModal(!showModal)}
        className="underline hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors ml-1"
        aria-label="View C2PA Provenance Metadata"
      >
        Verify C2PA
      </button>

      {showModal && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Provenance Metadata Details"
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
        >
          <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg max-w-md w-full p-6 shadow-xl text-left">
            <h3 className="text-sm font-semibold text-neutral-900 dark:text-neutral-100 mb-2">
              EU AI Act Article 50 Provenance Card
            </h3>
            <div className="space-y-2 text-xs text-neutral-600 dark:text-neutral-300 font-mono">
              <p><strong>Generator Model:</strong> {modelName}</p>
              <p><strong>Generation Timestamp:</strong> {timestamp}</p>
              <p><strong>C2PA Standard:</strong> Manifest V1.3 Signed</p>
              <p><strong>Compliance Status:</strong> {isCompliant ? "VERIFIED_COMPLIANT" : "UNVERIFIED"}</p>
            </div>
            <div className="mt-4 flex justify-end">
              <button
                onClick={() => setShowModal(false)}
                className="px-3 py-1.5 bg-neutral-900 text-white dark:bg-neutral-100 dark:text-neutral-900 rounded text-xs font-medium"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

---

स्तर 4: अपरिवर्तनीय ऑडिट और टेलीमेट्री संपादन

कॉरपोरेट अनुपालन और घटना के बाद की जांच के लिए, प्रत्येक AI इंटरैक्शन को संरचित लॉग उत्सर्जित करना होगा। महत्वपूर्ण बात यह है कि टेलीमेट्री को सादा पाठ उपयोगकर्ता इनपुट या व्यक्तिगत पहचानकर्ताओं को संग्रहीत किए बिना गवर्नेंस निष्पादन को रिकॉर्ड करना चाहिए।

हम प्रॉमप्ट्स को हैश करने और टेलीमेट्री इवेंट्स को रिकॉर्ड करने के लिए Web Crypto API का उपयोग करके एक क्रिप्टोग्राफिक ऑडिट लॉगर का निर्माण करते हैं:

export interface GovernanceAuditEvent {
  sessionId: string;
  modelIdentifier: string;
  promptHash: string;
  dlpViolations: string[];
  outputSanitized: boolean;
  latencyMs: number;
  timestamp: string;
}

export async function createGovernanceAuditEvent(
  sessionId: string,
  modelIdentifier: string,
  rawPrompt: string,
  dlpViolations: string[],
  outputSanitized: boolean,
  latencyMs: number
): Promise<GovernanceAuditEvent> {
  // Compute SHA-256 hash of raw prompt to prevent PII log persistence
  const encoder = new TextEncoder();
  const data = encoder.encode(rawPrompt);
  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const promptHash = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");

  const auditEvent: GovernanceAuditEvent = {
    sessionId,
    modelIdentifier,
    promptHash,
    dlpViolations,
    outputSanitized,
    latencyMs,
    timestamp: new Date().toISOString()
  };

  // Dispatch to OpenTelemetry endpoint or internal log aggregator
  if (process.env.NODE_ENV === "production") {
    fetch("/api/telemetry/governance", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(auditEvent)
    }).catch((err) => console.error("Failed to ship governance audit log:", err));
  }

  return auditEvent;
}

---

प्रदर्शन और रेंडरिंग बजट

क्लाइंट-साइड DLP स्कैन, Zod स्ट्रीम सत्यापन, और C2PA मेटाडेटा पार्सिंग जोड़ने से रनटाइम ओवरहेड प्रस्तुत होता है। एक सहज 60fps UI अनुभव बनाए रखने के लिए सख्त प्रदर्शन बजट की आवश्यकता होती है:

1. DLP ओवरहेड न्यूनीकरण

2,000 शब्दों के प्रॉमप्ट पर रेगुलर एक्सप्रेशन स्कैनिंग और शैनन एंट्रॉपी की गणना में आधुनिक V8 इंजन पर ~1.8ms का समय लगता है। इनपुट फ़ील्ड को प्रतिक्रियाशील बनाए रखने के लिए, डिबाउंस्ड कॉलबैक के अंदर useSanitizedPrompt निष्पादित करें या वेब वर्कर को भारी एंट्रॉपी स्कैन सौंपें।

2. बंडल आकार बजट

• DOMPurify (आइसोमॉर्फिक संस्करण): ~9.2kB gzipped
• Zod: ~12.4kB gzipped
• @contentauth/c2pa Node SDK: क्लाइंट बंडलों में भारी WASM क्रिप्टोग्राफिक लाइब्रेरी भेजने से बचने के लिए इसे strictly सर्वर (Server Actions / API Routes) पर रखा जाता है। क्लाइंट कंपोनेंट (ContentProvenanceBadge) का वजन < 2kB है।

3. विलंबता मीट्रिक सारांश

Governance Tier	Runtime Location	Average Latency Impact	Bundle Impact (Gzipped)
Tier 1: Client DLP	React Hook / Client	1.2ms - 2.5ms	~1.5kB
Tier 2: Output Sanitizer	Edge Middleware / Server	3.0ms - 8.0ms	~21.6kB (Server/Shared)
Tier 3: C2PA Signing	Server Action	15.0ms - 45.0ms	0kB (Server Only)
Tier 4: Audit Telemetry	Async Fetch / Background	0ms (Non-blocking)	~0.8kB

---

सारांश

फ्रंटएंड AI गवर्नेंस आधुनिक वेब अनुप्रयोगों के लिए एक अनिवार्य इंजीनियरिंग अनुशासन है। क्लाइंट-साइड DLP स्कैनिंग को एम्बेड करके, स्ट्रीमिंग Zod स्कीमा गार्डरेल्स लागू करके, EU AI Act अनुपालन के लिए C2PA मेटाडेटा के साथ आउटपुट एसेट पर हस्ताक्षर करके, और अनामित ऑडिट लॉग उत्सर्जित करके, फ्रंटएंड टीमें सुरक्षित, लचीले और पूरी तरह से अनुपालन करने वाले AI-संचालित यूजर इंटरफेस का निर्माण कर सकती हैं।