SVG Security Vulnerabilities: Stored XSS, XML Injection & Sanitization Guide

1. The Anatomy of Stored SVG XSS: Beyond Simple <script> Tags

Many naive web applications attempt to secure SVG uploads with simplistic string regex checks: svgContent.includes('<script'). In modern AppSec, regex-based tag blocking is virtually useless against the rich variety of SVG execution contexts:

2. The Dangerous Myth: SVGO Is an Optimizer, NOT a Security Sanitizer

One of the most dangerous fallacies in modern web engineering is using svgo (SVG Optimizer) as an input validation or sanitization filter.

If an SVG contains obfuscated JavaScript payloads or polyglot payloads inside permissible nodes, SVGO will happily optimize the surrounding coordinates while preserving the malicious executable script. Never rely on minification for security boundaries.

3. Hidden Attack Vectors: <foreignObject>, <animate>, and XML Entities

The SVG specification integrates deeply with XHTML and SMIL (Synchronized Multimedia Integration Language), opening up esoteric attack surfaces:

4. Defense-in-Depth: CSP, Sandboxing & Isolated Delivery

To guarantee zero vulnerability footprint across customer environments, implement multi-layered defense-in-depth:

5. Production Sanitization Architecture: DOMPurify & Defanging

If your application must display inline SVG markup (to allow dynamic CSS hover states or theming), you must run user-provided vector markup through an audited AST-based sanitizer like DOMPurify with explicit SVG configurations:

import DOMPurify from 'isomorphic-dompurify';

export function sanitizeUserSvg(rawSvgString: string): string {
  // 1. Enforce strict SVG-only profile
  const clean = DOMPurify.sanitize(rawSvgString, {
    USE_PROFILES: { svg: true, svgFilters: true },
    ADD_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g'],
    FORBID_TAGS: [
      'script',
      'foreignObject',
      'iframe',
      'object',
      'embed',
      'animate',
      'set',
      'use', // Mitigates external resource inclusion attacks
    ],
    FORBID_ATTR: [
      'onload',
      'onerror',
      'onclick',
      'onmouseover',
      'href',
      'xlink:href',
    ],
  });

  return clean;
}

6. Secure File Upload & Sanitization Pipeline in TypeScript

In production backend pipelines (Node.js / Next.js API route), sanitize before storing to object storage (e.g., AWS S3):

// app/api/upload/svg/route.ts
import { NextResponse } from 'next/server';
import { sanitizeUserSvg } from '@/lib/security/svgSanitizer';

export async function POST(req: Request) {
  const formData = await req.formData();
  const file = formData.get('file') as File;

  if (!file || file.type !== 'image/svg+xml') {
    return NextResponse.json({ error: 'Invalid SVG format' }, { status: 400 });
  }

  // Read raw XML byte text
  const rawSvg = await file.text();

  // Run through AST sanitizer
  const sanitized = sanitizeUserSvg(rawSvg);

  if (!sanitized || sanitized.trim().length === 0) {
    return NextResponse.json({ error: 'Malicious payload detected' }, { status: 422 });
  }

  // Upload sanitized text to S3 with safe headers
  // Content-Type: image/svg+xml
  // Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline';
  return NextResponse.json({ success: true });
}

7. Frequently Asked Technical Questions