The Complete Production SOP: How to Deploy and Run Cross-Site Scripting (XSS) Defense & DOMPurify in Autonomous AI Agents

---
name: "xss-defense-dompurify-sanitizer"
description: "Sanitize untrusted HTML and prevent Cross-Site Scripting with DOMPurify."
metadata:
  author: "Cure53"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "sanitize html with dompurify"
  - "prevent xss in react"
  - "safe dangerouslysetinnerhtml"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Cross-Site Scripting (XSS) Defense & DOMPurify

1. Run DOMPurify.sanitize(dirtyHtml, { USE_PROFILES: { html: true } }) on all untrusted HTML.
2. Specify ALLOWED_TAGS and ALLOWED_ATTR explicitly when rendering rich formatting.
3. Ensure links generated from user input enforce target='_blank' and rel='noopener noreferrer'.
4. Never construct HTML strings using unescaped user inputs in client JavaScript.

import DOMPurify from 'isomorphic-dompurify';

// Configure hook to enforce safe external links automatically
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
  if ('target' in node && node.tagName === 'A') {
    node.setAttribute('target', '_blank');
    node.setAttribute('rel', 'noopener noreferrer');
  }
});

export const SAFE_HTML_CONFIG = {
  USE_PROFILES: { html: true },
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'ol', 'li', 'code', 'pre', 'blockquote', 'h1', 'h2', 'h3'],
  ALLOWED_ATTR: ['href', 'title', 'class', 'target', 'rel'],
  RETURN_TRUSTED_TYPE: false,
} as const;

export function sanitizeHtml(untrustedInput: string): string {
  return DOMPurify.sanitize(untrustedInput, SAFE_HTML_CONFIG);
}

import React, { useMemo } from 'react';
import { sanitizeHtml } from '../lib/sanitize';

interface SafeHtmlRendererProps {
  dirtyHtml: string;
  className?: string;
}

export const SafeHtmlRenderer: React.FC<SafeHtmlRendererProps> = ({ dirtyHtml, className }) => {
  const sanitizedContent = useMemo(() => ({
    __html: sanitizeHtml(dirtyHtml)
  }), [dirtyHtml]);

  return (
    <div
      className={className}
      dangerouslySetInnerHTML={sanitizedContent}
    />
  );
};

import { describe, it, expect } from 'vitest';
import { sanitizeHtml } from './sanitize';

describe('sanitizeHtml XSS Defense Gate', () => {
  it('strips malicious script tags and inline handlers', () => {
    const payload = '<p>Hello</p><script>alert(1)</script><img src="x" onerror="alert(2)">';
    const clean = sanitizeHtml(payload);
    expect(clean).toBe('<p>Hello</p><img src="x">');
    expect(clean).not.toContain('script');
    expect(clean).not.toContain('onerror');
  });

  it('neutralizes javascript: URI schemes and enforces noopener', () => {
    const payload = '<a href="javascript:alert(1)">Click me</a><a href="https://example.com">Valid</a>';
    const clean = sanitizeHtml(payload);
    expect(clean).not.toContain('javascript:');
    expect(clean).toContain('target="_blank"');
    expect(clean).toContain('rel="noopener noreferrer"');
  });
});