GHSA-hh8m-fm6v-7cvg
Angular: Sanitization bypass via directive host bindings on concrete host elements in @angular/core and @angular/compiler
Details
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:
hostDirectivescomposition,- Class inheritance of host bindings,
- Dynamic component instantiation (
createComponentwith customhostElementor 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.021.2.2020.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://).