Angular Platform Flaw Enables Malicious Code Execution Through Weaponized SVG Animations

Security researchers have uncovered a stored cross-site scripting (XSS) vulnerability in Angular’s Template Compiler that lets attackers inject and execute malicious JavaScript via specially crafted SVG animations.

The flaw stems from an incomplete internal security schema that fails to properly sanitize specific URL-holding attributes, such as those that accept JavaScript schemes.

This allows bypass of Angular’s built-in protections when untrusted data binds to risky SVG or MathML elements.

Attackers exploit this by supplying user-controlled input such as data from a database or an API that is rendered in templates.

For instance, binding to xlink:href via [attr.xlink:href]=”userInput” or dynamically setting SVG animation’s attributeName to “href” with a JavaScript payload in values or to attributes.

Elements like <animate attributeName=”href” values=”javascript: alert(1)”/> evade validation, as the compiler drops into a non-sanitizing mode.

Execution triggers on user clicks or animation start, running code in the app’s origin.

Vulnerable Attributes and Attack Vectors

The issue affects SVG animation elements (<animate>, <set>, <animateMotion>, <animateTransform>) that target sensitive attributes such as href or xlink:href. Confirmed vectors include:

No user interaction beyond rendering or animation play is needed; stored payloads persist for all viewers.

Impact, Patches, and Mitigations

Exploitation enables session hijacking via cookie theft, data exfiltration, or unauthorized actions under victim credentials.

Apps that render untrusted content in these bindings face a high risk.

Angular patched in:

Upgrade immediately. Workarounds: Sanitize inputs server-side, avoid dynamic bindings to listed attrs, skip untrusted attributeName on animations.

Deploy a strict Content Security Policy (CSP) blocking JavaScript: URIs, as advised in Angular security best practices.