Merge tag 'v20.3.18' into main-20.3.18

Author: Aniket Bansal

CHANGELOG.md

@@ -1,3 +1,42 @@
+<a name="20.3.18"></a>
+
+# 20.3.18 (2026-03-12)
+
+### compiler
+
+| Commit                                                                                           | Type | Description                         |
+| ------------------------------------------------------------------------------------------------ | ---- | ----------------------------------- |
+| [02fbf08890](https://github.com/angular/angular/commit/02fbf08890ec6ac2efb6c2ec4f17e56497cb81d2) | fix  | disallow translations of iframe src |
+
+### core
+
+| Commit                                                                                           | Type | Description                                                |
+| ------------------------------------------------------------------------------------------------ | ---- | ---------------------------------------------------------- |
+| [72126f9a08](https://github.com/angular/angular/commit/72126f9a08c185a9b93461bab67841c4e84c9b17) | fix  | sanitize translated attribute bindings with interpolations |
+| [626bc8bc20](https://github.com/angular/angular/commit/626bc8bc20e485cad2094c4a5d9417fb9a71dda8) | fix  | sanitize translated form attributes                        |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
+<a name="20.3.17"></a>
+
+# 20.3.17 (2026-02-25)
+
+## Breaking Changes
+
+### core
+
+- Angular now only applies known attributes from HTML in translated ICU content. Unknown attributes are dropped and not rendered.
+
+  (cherry picked from commit 03da204b6daa5e4583e0d0968c2107390bbd8235)
+
+### core
+
+| Commit                                                                                           | Type | Description                                                  |
+| ------------------------------------------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| [7f9de3c118](https://github.com/angular/angular/commit/7f9de3c118383c09fa8851708c66ec94453a9680) | fix  | block creation of sensitive URI attributes from ICU messages |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="20.3.16"></a>
 
 # 20.3.16 (2026-01-07)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-srcs",
-  "version": "20.3.16",
+  "version": "20.3.18",
   "private": true,
   "description": "Angular - a web framework for modern web apps",
   "homepage": "https://github.com/angular/angular",

packages/compiler/src/schema/trusted_types_sinks.ts

@@ -11,7 +11,7 @@
  * tags use '*'.
  *
  * Extracted from, and should be kept in sync with
- * https://w3c.github.io/webappsec-trusted-types/dist/spec/#integrations
+ * https://www.w3.org/TR/trusted-types/#integrations
  */
 const TRUSTED_TYPES_SINKS = new Set<string>([
   // NOTE: All strings in this set *must* be lowercase!
@@ -25,6 +25,7 @@ const TRUSTED_TYPES_SINKS = new Set<string>([
 
   // TrustedScriptURL
   'embed|src',
+  'iframe|src',
   'object|codebase',
   'object|data',
 ]);

packages/compiler/test/schema/trusted_types_sinks_spec.ts

@@ -13,6 +13,7 @@ describe('isTrustedTypesSink', () => {
     expect(isTrustedTypesSink('iframe', 'srcdoc')).toBeTrue();
     expect(isTrustedTypesSink('p', 'innerHTML')).toBeTrue();
     expect(isTrustedTypesSink('embed', 'src')).toBeTrue();
+    expect(isTrustedTypesSink('iframe', 'src')).toBeTrue();
     expect(isTrustedTypesSink('a', 'href')).toBeFalse();
     expect(isTrustedTypesSink('base', 'href')).toBeFalse();
     expect(isTrustedTypesSink('div', 'style')).toBeFalse();

packages/core/src/render3/i18n/i18n_parse.ts

@@ -11,7 +11,7 @@ import '../../util/ng_i18n_closure_mode';
 import {XSS_SECURITY_URL} from '../../error_details_base_url';
 import {
   getTemplateContent,
-  URI_ATTRS,
+  SENSITIVE_ATTRS,
   VALID_ATTRS,
   VALID_ELEMENTS,
 } from '../../sanitization/html_sanitizer';
@@ -388,7 +388,7 @@ export function i18nAttributesFirstPass(tView: TView, index: number, values: str
           previousElementIndex,
           attrName,
           countBindings(updateOpCodes),
-          null,
+          SENSITIVE_ATTRS[attrName.toLowerCase()] ? _sanitizeUrl : null,
         );
       }
     }
@@ -808,21 +808,16 @@ function walkIcuTree(
             const attr = elAttrs.item(i)!;
             const lowerAttrName = attr.name.toLowerCase();
             const hasBinding = !!attr.value.match(BINDING_REGEXP);
-            // we assume the input string is safe, unless it's using a binding
             if (hasBinding) {
               if (VALID_ATTRS.hasOwnProperty(lowerAttrName)) {
-                if (URI_ATTRS[lowerAttrName]) {
-                  generateBindingUpdateOpCodes(
-                    update,
-                    attr.value,
-                    newIndex,
-                    attr.name,
-                    0,
-                    _sanitizeUrl,
-                  );
-                } else {
-                  generateBindingUpdateOpCodes(update, attr.value, newIndex, attr.name, 0, null);
-                }
+                generateBindingUpdateOpCodes(
+                  update,
+                  attr.value,
+                  newIndex,
+                  attr.name,
+                  0,
+                  SENSITIVE_ATTRS[lowerAttrName] ? _sanitizeUrl : null,
+                );
               } else {
                 ngDevMode &&
                   console.warn(
@@ -831,8 +826,29 @@ function walkIcuTree(
                       `(see ${XSS_SECURITY_URL})`,
                   );
               }
+            } else if (VALID_ATTRS[lowerAttrName]) {
+              if (SENSITIVE_ATTRS[lowerAttrName]) {
+                // Don't sanitize, because no value is acceptable in sensitive attributes.
+                // Translators are not allowed to create URIs.
+                if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                  console.warn(
+                    `WARNING: ignoring unsafe attribute ` +
+                      `${lowerAttrName} on element ${tagName} ` +
+                      `(see ${XSS_SECURITY_URL})`,
+                  );
+                }
+                addCreateAttribute(create, newIndex, attr.name, 'unsafe:blocked');
+              } else {
+                addCreateAttribute(create, newIndex, attr.name, attr.value);
+              }
             } else {
-              addCreateAttribute(create, newIndex, attr);
+              if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                console.warn(
+                  `WARNING: ignoring unknown attribute name ` +
+                    `${lowerAttrName} on element ${tagName} ` +
+                    `(see ${XSS_SECURITY_URL})`,
+                );
+              }
             }
           }
           const elementNode: I18nElementNode = {
@@ -945,10 +961,11 @@ function addCreateNodeAndAppend(
   );
 }
 
-function addCreateAttribute(create: IcuCreateOpCodes, newIndex: number, attr: Attr) {
-  create.push(
-    (newIndex << IcuCreateOpCode.SHIFT_REF) | IcuCreateOpCode.Attr,
-    attr.name,
-    attr.value,
-  );
+function addCreateAttribute(
+  create: IcuCreateOpCodes,
+  newIndex: number,
+  attrName: string,
+  attrValue: string,
+) {
+  create.push((newIndex << IcuCreateOpCode.SHIFT_REF) | IcuCreateOpCode.Attr, attrName, attrValue);
 }

packages/core/src/sanitization/html_sanitizer.ts

@@ -13,14 +13,16 @@ import {trustedHTMLFromString} from '../util/security/trusted_types';
 import {getInertBodyHelper, InertBodyHelper} from './inert_body';
 import {_sanitizeUrl} from './url_sanitizer';
 
-function tagSet(tags: string): {[k: string]: boolean} {
-  const res: {[k: string]: boolean} = {};
+type BooleanRecord = Record<string, boolean>;
+
+function tagSet(tags: string): BooleanRecord {
+  const res: BooleanRecord = {};
   for (const t of tags.split(',')) res[t] = true;
   return res;
 }
 
-function merge(...sets: {[k: string]: boolean}[]): {[k: string]: boolean} {
-  const res: {[k: string]: boolean} = {};
+function merge(...sets: BooleanRecord[]): BooleanRecord {
+  const res: BooleanRecord = {};
   for (const s of sets) {
     for (const v in s) {
       if (s.hasOwnProperty(v)) res[v] = true;
@@ -66,15 +68,15 @@ const INLINE_ELEMENTS = merge(
   ),
 );
 
-export const VALID_ELEMENTS: {[k: string]: boolean} = merge(
+export const VALID_ELEMENTS: BooleanRecord = merge(
   VOID_ELEMENTS,
   BLOCK_ELEMENTS,
   INLINE_ELEMENTS,
   OPTIONAL_END_TAG_ELEMENTS,
 );
 
 // Attributes that have href and hence need to be sanitized
-export const URI_ATTRS: {[k: string]: boolean} = tagSet(
+const URI_ATTRS: BooleanRecord = tagSet(
   'background,cite,href,itemtype,longdesc,poster,src,xlink:href',
 );
 
@@ -105,7 +107,7 @@ const ARIA_ATTRS = tagSet(
 // can be sanitized, but they increase security surface area without a legitimate use case, so they
 // are left out here.
 
-export const VALID_ATTRS: {[k: string]: boolean} = merge(URI_ATTRS, HTML_ATTRS, ARIA_ATTRS);
+export const VALID_ATTRS: BooleanRecord = merge(URI_ATTRS, HTML_ATTRS, ARIA_ATTRS);
 
 // Elements whose content should not be traversed/preserved, if the elements themselves are invalid.
 //
@@ -114,6 +116,16 @@ export const VALID_ATTRS: {[k: string]: boolean} = merge(URI_ATTRS, HTML_ATTRS,
 // don't want to preserve the content, if the elements themselves are going to be removed.
 const SKIP_TRAVERSING_CONTENT_IF_INVALID_ELEMENTS = tagSet('script,style,template');
 
+/**
+ * Attributes that are potential attach vectors and may need to be sanitized.
+ */
+export const SENSITIVE_ATTRS: BooleanRecord = merge(
+  URI_ATTRS,
+  // Note: we don't include these attributes in `URI_ATTRS`, because `URI_ATTRS` also
+  // determines whether an attribute should be dropped when sanitizing an HTML string.
+  tagSet('action,formaction,data,codebase'),
+);
+
 /**
  * SanitizingHtmlSerializer serializes a DOM fragment, stripping out any unsafe elements and unsafe
  * attributes.

packages/core/test/acceptance/i18n_spec.ts

@@ -13,6 +13,7 @@ import {CommonModule, DOCUMENT, registerLocaleData} from '@angular/common';
 import localeEs from '@angular/common/locales/es';
 import localeRo from '@angular/common/locales/ro';
 import {computeMsgId} from '@angular/compiler';
+import {isBrowser} from '@angular/private/testing';
 import {
   Attribute,
   Component,
@@ -3506,7 +3507,7 @@ describe('runtime i18n', () => {
         <div i18n>{
           parameters.length,
           plural,
-          =1 {Affects parameter <span class="parameter-name" attr="should_be_present">{{parameters[0].name}}</span>}
+          =1 {Affects parameter <span class="parameter-name" label="should_be_present">{{parameters[0].name}}</span>}
           other {Affects {{parameters.length}} parameters, including <span
               class="parameter-name">{{parameters[0].name}}</span>}
           }</div>
@@ -3521,7 +3522,7 @@ describe('runtime i18n', () => {
     const fixture = TestBed.createComponent(MyApp);
     fixture.detectChanges();
     const span = (fixture.nativeElement as HTMLElement).querySelector('span')!;
-    expect(span.getAttribute('attr')).toEqual('should_be_present');
+    expect(span.getAttribute('label')).toEqual('should_be_present');
     expect(span.getAttribute('class')).toEqual('parameter-name');
   });
 
@@ -3607,6 +3608,92 @@ describe('runtime i18n', () => {
       'translatedText value',
     );
   });
+
+  describe('attribute sanitization', () => {
+    @Component({template: ''})
+    class SanitizeAppComp {
+      url = 'javascript:alert("oh no")';
+      count = 0;
+    }
+
+    it('should sanitize translated attribute binding', () => {
+      const fixture = initWithTemplate(SanitizeAppComp, '<a [attr.href]="url" i18n-href></a>');
+      const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+      expect(link.getAttribute('href')).toMatch(/^unsafe:/);
+    });
+
+    it('should sanitize translated property binding', () => {
+      const fixture = initWithTemplate(SanitizeAppComp, '<a [href]="url" i18n-href></a>');
+      const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+      expect(link.getAttribute('href')).toMatch(/^unsafe:/);
+    });
+
+    it('should sanitize translated interpolation', () => {
+      const fixture = initWithTemplate(SanitizeAppComp, '<a href="{{url}}" i18n-href></a>');
+      const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+      expect(link.getAttribute('href')).toMatch(/^unsafe:/);
+    });
+
+    it('should sanitize interpolation inside translated element', () => {
+      const fixture = initWithTemplate(SanitizeAppComp, `<div i18n><a href="{{url}}"></a></div>`);
+      const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+      expect(link.getAttribute('href')).toMatch(/^unsafe:/);
+    });
+
+    it('should sanitize attribute binding inside translated element', () => {
+      const fixture = initWithTemplate(
+        SanitizeAppComp,
+        `<div i18n><a [attr.href]="url"></a></div>`,
+      );
+      const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+      expect(link.getAttribute('href')).toMatch(/^unsafe:/);
+    });
+
+    it('should sanitize property binding inside translated element', () => {
+      const fixture = initWithTemplate(SanitizeAppComp, `<div i18n><a [href]="url"></a></div>`);
+      const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+      expect(link.getAttribute('href')).toMatch(/^unsafe:/);
+    });
+
+    it('should sanitize property binding inside an ICU', () => {
+      const fixture = initWithTemplate(
+        SanitizeAppComp,
+        `<div i18n>{count, plural,
+            =0 {no <strong>link</strong> yet}
+            other {{{count}} Here is the <a href="{{url}}">link</a>!}
+        }</div>`,
+      );
+
+      expect(fixture.nativeElement.querySelector('a')).toBeFalsy();
+
+      fixture.componentInstance.count = 1;
+      fixture.detectChanges();
+      const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
+      expect(link).toBeTruthy();
+      expect(link.getAttribute('href')).toMatch(/^unsafe:/);
+    });
+
+    it('should sanitize action binding', () => {
+      const fixture = initWithTemplate(
+        SanitizeAppComp,
+        '<form action="{{url}}" i18n-action></form>',
+      );
+      const form: HTMLFormElement = fixture.nativeElement.querySelector('form');
+      expect(form.getAttribute('action')).toMatch(/^unsafe:/);
+    });
+
+    // Skip this test in Node, because Domino doesn't support `formAction`.
+    if (isBrowser) {
+      it('should sanitize formaction binding', () => {
+        const fixture = initWithTemplate(
+          SanitizeAppComp,
+          '<input type="text" formaction="{{url}}" i18n-formaction>',
+        );
+        const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
+        expect(input.getAttribute('formaction')).toMatch(/^unsafe:/);
+      });
+    }
+  });
 });
 
 function initWithTemplate(compType: Type<any>, template: string) {

packages/core/test/acceptance/security_spec.ts

@@ -768,3 +768,19 @@ describe('SVG animation processing', () => {
     );
   });
 });
+
+describe('innerHTML processing', () => {
+  it('should drop risky attributes from elements created with innerHTML', () => {
+    @Component({
+      template: '<div [innerHTML]="html"></div>',
+    })
+    class App {
+      html = '<div action="abc"></div>';
+    }
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.innerHTML).not.toContain('action');
+  });
+});