This specification is maintained by the AgentRules Working Group. Have enhancements or want to claim maintainership?Submit Specification →
securitycritical PriorityID: webauthn-conditional-mediation-origin-fencing

WebAuthn Conditional Mediation Origin Fencing & Iframe Sandbox Invariants

Enforces strict origin validation, cross-origin isolation fencing, and explicit iframe permission delegation policies during conditional WebAuthn passkey autofill. Prevents credential theft, UI redressing, and clickjacking attacks across multi-tenant micro-frontends and embedded SaaS portals by mandating ancestor checks and explicit credential-delegation permissions.

Prohibited Anti-Pattern: Unfenced Conditional WebAuthn Invocation in Permissive or Cross-Origin Embedded Iframes

Export Ready-to-Drop Configuration

Select format below to copy code or download file directly.

---
description: WebAuthn Conditional Mediation Origin Fencing & Iframe Sandbox Invariants - Enforces strict origin validation, cross-origin isolation fencing, and explicit iframe permission delegation policies during conditional WebAuthn passkey autofill. Prevents credential theft, UI redressing, and clickjacking attacks across multi-tenant micro-frontends and embedded SaaS portals by mandating ancestor checks and explicit credential-delegation permissions.
globs: src/auth/**/*.{ts,tsx}, src/components/auth/**/*.{ts,tsx}, src/services/webauthn/**/*.{ts,tsx}, src/middleware/**/*.{ts,tsx}
alwaysApply: true
verified_by: "agentrules.org"
license: "CC-BY-4.0"
source: "https://agentrules.org/rules/webauthn-conditional-mediation-origin-fencing"
---

# WebAuthn Conditional Mediation Origin Fencing & Iframe Sandbox Invariants

> **Severity**: CRITICAL | **Category**: security
> **Anti-Pattern Warning**: Unfenced Conditional WebAuthn Invocation in Permissive or Cross-Origin Embedded Iframes

## System Constraints
You are a Principal Security Architect enforcing strict origin-bound WebAuthn conditional mediation (passkey autofill) and iframe isolation invariants. Any attempt to invoke `navigator.credentials.get({ mediation: 'conditional' })` without verifying ancestor origin containment, top-level window execution, or explicit `publickey-credentials-get` iframe permission policy delegation is a critical vulnerability. You must reject vulnerable implementations and replace them with fail-closed origin validation, abortable signal lifecycles, and cryptographic RP-ID validation.

## Strict Guidelines
- Engineers MUST ALWAYS verify window.isSecureContext and PublicKeyCredential.isConditionalMediationAvailable() before registering conditional mediation.
- Engineers MUST NEVER invoke navigator.credentials.get({ mediation: 'conditional' }) inside an iframe unless the containing element explicitly grants the 'publickey-credentials-get' Permissions Policy to an exact allowlisted origin.
- Components MUST abort any active conditional mediation AbortController prior to initiating modal WebAuthn assertions or navigating away to prevent state corruption and autofill hijacking.
- Services MUST validate that the relying party identifier (rpId) strictly matches or is a valid registrable suffix of the expected top-level origin domain.
- Frontend authentication containers MUST enforce framing restrictions using Content-Security-Policy (CSP) 'frame-ancestors' and detect unauthorized cross-origin framing via window.self !== window.top checks before binding credential callbacks.
- Code SHOULD sanitize and structure challenge transport to guarantee that raw base64url challenges are cryptographically decoupled from external iframe postMessage payloads.

## Bad vs Good Implementations
### Conditional WebAuthn Invocation Without Origin Fencing or Lifecycle Management

#### Bad Antipattern (AI Common Hallucination)
> **Why it fails**: Fails to verify `window.isSecureContext`, executes inside potentially clickjacked cross-origin iframes without permission policy checks, does not evaluate `window.self !== window.top`, and omits an `AbortSignal`, leaving passkey autofill susceptible to credential harvesting across multi-tenant embedded frames.
```typescript
export async function startPasskeyAutofill(challengeStr: string, rpId: string) {
  // VULNERABLE: Blindly invokes conditional mediation in any context (including untrusted iframes),
  // lacks AbortController cleanup, and does not check secure context or ancestor nesting.
  const credential = await navigator.credentials.get({
    mediation: 'conditional',
    publicKey: {
      challenge: Uint8Array.from(atob(challengeStr), c => c.charCodeAt(0)),
      rpId: rpId,
      userVerification: 'preferred'
    }
  });
  return credential;
}
```

#### Production Standard (Correct)
> **Standard**: Validates secure execution context, evaluates browser conditional autofill capability, rejects framed execution unless strict Permissions Policy delegation is present, bounds the call with an AbortSignal, and enforces expected RP-ID parity.
```typescript
export interface SafeAutofillOptions {
  challenge: Uint8Array;
  expectedRpId: string;
  abortSignal: AbortSignal;
}

export async function startFencedPasskeyAutofill({
  challenge,
  expectedRpId,
  abortSignal
}: SafeAutofillOptions): Promise<Credential | null> {
  // 1. Strict execution context and capability gating
  if (!window.isSecureContext) {
    throw new Error('WebAuthn conditional mediation requires a secure context (HTTPS).');
  }

  if (typeof window.PublicKeyCredential?.isConditionalMediationAvailable !== 'function') {
    return null;
  }

  const isAvailable = await window.PublicKeyCredential.isConditionalMediationAvailable();
  if (!isAvailable) {
    return null;
  }

  // 2. Strict origin and framing isolation checks
  const isFramed = window.self !== window.top;
  if (isFramed) {
    // Verify document Permissions Policy allows publickey-credentials-get
    const hasFeaturePolicy = 'featurePolicy' in document || 'permissionsPolicy' in document;
    const allowsCredentials = document.featurePolicy?.allowsFeature('publickey-credentials-get') ??
      // @ts-expect-error Standard Permissions Policy interface check
      document.permissionsPolicy?.allowsFeature('publickey-credentials-get');

    if (!allowsCredentials) {
      throw new SecurityError('Passkey mediation denied: Iframe lacks publickey-credentials-get permission.');
    }
  }

  // 3. Fenced conditional credential request
  try {
    return await navigator.credentials.get({
      mediation: 'conditional',
      signal: abortSignal,
      publicKey: {
        challenge,
        rpId: expectedRpId,
        userVerification: 'preferred',
        timeout: 60000
      }
    });
  } catch (err: unknown) {
    if (err instanceof DOMException && err.name === 'AbortError') {
      return null; // Graceful teardown
    }
    throw err;
  }
}
```

Recommended MCP Servers (mcp-serverlist.com)

Equip agent with system tools to verify code for this stack.

Architectural Specification & Invariant Rationale

Architectural Invariant Design: WebAuthn Conditional Mediation Origin Fencing & Iframe Sandbox Invariants

WebAuthn Conditional Mediation Origin Fencing & Iframe Sandbox Invariants defines an industrial-grade behavioral standard for security engineering. Enforces strict origin validation, cross-origin isolation fencing, and explicit iframe permission delegation policies during conditional WebAuthn passkey autofill. Prevents credential theft, UI redressing, and clickjacking attacks across multi-tenant micro-frontends and embedded SaaS portals by mandating ancestor checks and explicit credential-delegation permissions. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Unfenced Conditional WebAuthn Invocation in Permissive or Cross-Origin Embedded Iframes Without an explicit system instruction file, developers spend hours debugging silent failures.
Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure ModeAI Symptom (The Anti-Pattern)SeverityProduction Impact & Remedy
AI Hallucination & Deprecation DriftUnfenced Conditional WebAuthn Invocation in Permissive or Cross-Origin Embedded IframesCritical
Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production.
Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture InconsistencyAI assistants produce mixed paradigms across files, creating fragmented codebase conventions.Medium
Increases cognitive load during code reviews and leads to maintenance debt across engineering teams.
Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.
Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

1

Engineers MUST ALWAYS verify window.isSecureContext and PublicKeyCredential.isConditionalMediationAvailable() before registering conditional mediation.

Engineers MUST ALWAYS verify window.isSecureContext and PublicKeyCredential.isConditionalMediationAvailable() before registering conditional mediation.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
2

Engineers MUST NEVER invoke navigator.credentials.get({ mediation

Engineers MUST NEVER invoke navigator.credentials.get({ mediation: 'conditional' }) inside an iframe unless the containing element explicitly grants the 'publickey-credentials-get' Permissions Policy to an exact allowlisted origin.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
3

Components MUST abort any active conditional mediation AbortController prior to initiating modal WebAuthn assertions or navigating away to prevent state corruption and autofill hijacking.

Components MUST abort any active conditional mediation AbortController prior to initiating modal WebAuthn assertions or navigating away to prevent state corruption and autofill hijacking.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
4

Services MUST validate that the relying party identifier (rpId) strictly matches or is a valid registrable suffix of the expected top-level origin domain.

Services MUST validate that the relying party identifier (rpId) strictly matches or is a valid registrable suffix of the expected top-level origin domain.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
5

Frontend authentication containers MUST enforce framing restrictions using Content-Security-Policy (CSP) 'frame-ancestors' and detect unauthorized cross-origin framing via window.self !== window.top checks before binding credential callbacks.

Frontend authentication containers MUST enforce framing restrictions using Content-Security-Policy (CSP) 'frame-ancestors' and detect unauthorized cross-origin framing via window.self !== window.top checks before binding credential callbacks.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
6

Code SHOULD sanitize and structure challenge transport to guarantee that raw base64url challenges are cryptographically decoupled from external iframe postMessage payloads.

Code SHOULD sanitize and structure challenge transport to guarantee that raw base64url challenges are cryptographically decoupled from external iframe postMessage payloads.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
Technical Questions & Answers

Frequently Asked Technical Questions

Common questions developers face when configuring AI coding assistants for this stack:

Q:Why is WebAuthn Conditional Mediation Origin Fencing & Iframe Sandbox Invariants critical for AI coding assistants?

Enforces strict origin validation, cross-origin isolation fencing, and explicit iframe permission delegation policies during conditional WebAuthn passkey autofill. Prevents credential theft, UI redressing, and clickjacking attacks across multi-tenant micro-frontends and embedded SaaS portals by mandating ancestor checks and explicit credential-delegation permissions. Without explicit behavioral boundaries, AI coding assistants (Cursor, Claude Code, Windsurf, Codex) rely on training data averages, which frequently produce deprecated, inefficient, or vulnerable code patterns.

Q:How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (Unfenced Conditional WebAuthn Invocation in Permissive or Cross-Origin Embedded Iframes) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q:Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q:Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.

Open Specification · CC BY 4.0·Free for Personal, Team & Commercial In-Repo Use

Citation & Open Source Attribution Guidelines

This specification is licensed under Creative Commons Attribution 4.0 International (CC BY 4.0). You are completely free to adapt and share this rule in your workspace. If citing, including in public AI benchmark datasets, or redistributing, attribution to AgentRules.org is required.

1 Rule in Stack

WebAuthn