Angular: Sanitization bypass via directive host bindings on concrete host elements in @angular/core and @angular/compiler

Angular automatically sanitizes untrusted values bound to security-sensitive DOM sinks (such as href, src, action, xlink:href, and data) to protect against Cross-Site Scripting (XSS).

Prior to the fix, the Angular compiler determined the SecurityContext for directive host bindings (host: {'[attr.href]': 'value'} or @HostBinding('attr.href')) based solely on the declaring directive or component selector at compile time, rather than the concrete host element that the directive was applied to.

When a directive with a security-sensitive host binding was applied to a different concrete host element—such as through:

• hostDirectives composition,
• Class inheritance of host bindings,
• Dynamic component instantiation (createComponent with custom hostElement or dynamic directives),
• Elements with SVG/MathML namespaces (e.g. <svg:a>, <math>), or
• Elements using tag-neutral selectors (e.g. :not(...)),

the compiler either failed to associate a sanitizer with the host binding or attached an incorrect security context. As a result, untrusted inputs (e.g. javascript:... URLs) bound via the host binding would be written to the DOM attribute without passing through Angular's built-in sanitizer.

Impact

An attacker capable of controlling the value bound to an affected directive host binding could execute arbitrary JavaScript in the user's browser context (Cross-Site Scripting).

Patches

This issue has been resolved in versions:

• 22.1.0
• 21.2.20
• 20.3.28

Workarounds

Ensure that any user-controlled values assigned to properties bound via directive host bindings are explicitly sanitized using DomSanitizer.sanitize(SecurityContext.URL, ...) before assignment, or restrict the input to validated safe URL schemes (e.g. http://, https://).