SVG Data URI Security: Preventing XSS and Script Injection in CSS

Because Scalable Vector Graphics (SVG) are XML documents, treating untrusted vectors carelessly creates security vulnerabilities, primarily Cross-Site Scripting (XSS) and XML Entity Expansion denial-of-service.

1. The Image Context Sandbox

When an SVG is embedded as an image (via CSS background-image, mask-image, or <img>), browsers enforce strict image-context sandboxing:

• <script> tags are completely disabled.
• Inline onload, onerror, and onclick event handlers do not fire.
• External font requests and network fetches are blocked.

2. Client-Side Sanitization

Before synthesizing CSS Data URIs, SVG2CSS strips DTD entity expansions, discards <foreignObject>, purges inline script tags, and parses markup through the browser's native DOMParser.