Agentic AI Security Guide / Frontend & UX Security

Frontend & UX Security

The frontend is both the first line of defense and a potential exfiltration surface. Apply standard appsec practices while accounting for AI-specific risks.

6.1 Standard Application Security

All normal appsec practices still apply—but treat the UI as an exfil surface, not just a presentation layer:

  • Strong authentication (SSO/MFA for admins) and hardened session management (HttpOnly/Secure cookies, rotation, idle timeouts, step-up for privileged actions).
  • CSRF protection for every state-changing request (tokens + same-site cookies).
  • Input validation and output encoding everywhere; never rely on the model to emit "safe" text.
  • Clickjacking and framing controls with security headers:
    • Strict-Transport-Security
    • X-Frame-Options / frame-ancestors
    • X-Content-Type-Options
    • Referrer-Policy
    • Content-Security-Policy (CSP)

CSP Requirements

  • Blocks inline scripts by default (script-src 'self' plus nonces/hashes).
  • Restricts connect-src, img-src, prefetch-src, and form-action to vetted domains to reduce exfil channels.
  • Pairs with Trusted Types (where supported) so only vetted sanitizers can write to dangerous sinks (innerHTML, srcdoc, etc.).

Strict separation between the app origin and any third-party widgets or file viewers; load them only inside sandboxed iframes with unique origins and no shared storage.

6.2 Output Handling and XSS-Resistant Rendering

Treat everything emitted by a model exactly like HTML pasted in from the public internet.

General Rules

  • Prefer plain-text rendering; only enable rich rendering when the product absolutely requires it and you have explicit sanitization in place.
  • Never inject raw model output via innerHTML, dangerouslySetInnerHTML, or template literals—even "trusted" markdown responses.
  • Default every link generated from model output to rel="noopener noreferrer" and strip protocols other than http/https.
  • Disallow model control over HTML primitives—constrain responses to structural markdown or schemas.

Implementation Checklist

  • Render server-side when feasible or use a battle-tested markdown/rich text library with predictable output.
  • Always run renderer output through a security-focused sanitizer (e.g., DOMPurify) configured with a strict allowlist before it touches the DOM.
  • Disable raw HTML blocks entirely; treat <script>, <style>, <iframe>, <img>, <form>, event handlers, and javascript: URLs as fatal violations.
  • Enforce origin and scheme policies on generated links; optionally warn or block when the model produces new/unseen domains.
  • If images are required, proxy every request (strip cookies, enforce content-type/size limits, restrict destinations).
  • Render code blocks as inert text with CSS highlighting only—never auto-run or evaluate code.

Diagram Renderers (Mermaid, PlantUML, etc.)

Treat diagram specs as untrusted programs:

  • Strip/deny tokens resembling HTML tags, CSS, javascript:/data: URLs, or link directives before invoking the renderer.
  • Enforce maximum length/complexity to prevent resource exhaustion or context flooding.
  • Disable renderer features that can emit HTML, attach event handlers, or auto-create links where possible.
  • Render diagrams inside a sandboxed iframe with a dedicated origin and strict CSP.
  • If diagrams are not mission-critical, turn them off; the safest renderer is no renderer.

6.3 UX for Safe and Honest Agent Use

Design the UX so users:

  • Understand what the agent can and cannot do
    • Explicit capabilities/limits list on the UI, especially in high-risk domains.
  • See clear disclaimers when agents operate in health, legal, financial, or security domains.
  • Know that AI content is AI-generated
    • Label AI responses.
    • Show a simple explanation/summary view for impactful decisions when feasible.
  • Can provide feedback
    • Buttons to flag harmful, incorrect, or biased responses.
    • Easy path to escalate to a human.

UI-Driven Exfil Constraints

  • For any flow that sends AI output elsewhere (email, tickets, analytics, "share" links), show users exactly what will be transmitted and require confirmation.
  • Apply the same PII/secret scrubbing used for normal responses before allowing exports or integrations to fire.
  • Default to excluding full transcripts, hidden system prompts, or internal traces from exports unless a human explicitly opts in and reviews the payload.
  • Disable or heavily gate auto-generated QR codes/links/buttons that could smuggle sensitive data into URLs or third-party endpoints.

6.4 Prompt Injection-Aware UI Design

Frontends often surface untrusted content (emails, web pages, PDFs). Assume those may contain prompt injections.

  • Visually distinguish:
    • System/agent instructions
    • User input
    • External/untrusted content
  • Explicitly label external content as untrusted.
  • Avoid exposing full system prompts or tool definitions to end users.
  • If you allow "custom system prompts":
    • Restrict to internal, technically literate users.
    • Use validated templates with constrained parameters (e.g., tone: friendly/professional; domain: sales/support).
  • For high-risk sources (emails, web pages, scraped docs), consider reduced-functionality renderers—no links, no active content, and muted colors to signal "handle with care."
  • When embedding untrusted documents alongside chat, keep them in separate panes or tabs so injected instructions are less likely to be mistaken for trusted guidance.