-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(material/icon): make icon-registry compatible with Trusted Types (#…
…23140) When Angular Material is used in an environment that enforces Trusted Types, the icon registry raises a Trusted Types violation due to its use of element.innerHTML when initializing SVG icons. To make the icon registry compatible with Trusted Types, SvgIconConfig.svgText is changed to a TrustedHTML, and its users updated to either produce TrustedHTML (making sure to only do so in cases where its security can be readily assessed) or pass such values along. To facilitate this, add a module that provides a Trusted Types policy, 'angular#components'. The policy is created lazily and stored in a module-local variable. This is the same as the approach taken by Angular proper in https://github.com/angular/angular/blob/master/packages/core/src/util/security/trusted_types.ts
- Loading branch information
Showing
2 changed files
with
92 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
|
|
||
| /** | ||
| * @fileoverview | ||
| * A module to facilitate use of a Trusted Types policy internally within | ||
| * Angular Material. It lazily constructs the Trusted Types policy, providing | ||
| * helper utilities for promoting strings to Trusted Types. When Trusted Types | ||
| * are not available, strings are used as a fallback. | ||
| * @security All use of this module is security-sensitive and should go through | ||
| * security review. | ||
| */ | ||
|
|
||
| export declare interface TrustedHTML { | ||
| __brand__: 'TrustedHTML'; | ||
| } | ||
|
|
||
| export declare interface TrustedTypePolicyFactory { | ||
| createPolicy(policyName: string, policyOptions: { | ||
| createHTML?: (input: string) => string, | ||
| }): TrustedTypePolicy; | ||
| } | ||
|
|
||
| export declare interface TrustedTypePolicy { | ||
| createHTML(input: string): TrustedHTML; | ||
| } | ||
|
|
||
| /** | ||
| * The Trusted Types policy, or null if Trusted Types are not | ||
| * enabled/supported, or undefined if the policy has not been created yet. | ||
| */ | ||
| let policy: TrustedTypePolicy|null|undefined; | ||
|
|
||
| /** | ||
| * Returns the Trusted Types policy, or null if Trusted Types are not | ||
| * enabled/supported. The first call to this function will create the policy. | ||
| */ | ||
| function getPolicy(): TrustedTypePolicy|null { | ||
| if (policy === undefined) { | ||
| policy = null; | ||
| if (typeof window !== 'undefined') { | ||
| const ttWindow = window as unknown as {trustedTypes?: TrustedTypePolicyFactory}; | ||
| if (ttWindow.trustedTypes !== undefined) { | ||
| policy = ttWindow.trustedTypes.createPolicy('angular#components', { | ||
| createHTML: (s: string) => s, | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| return policy; | ||
| } | ||
|
|
||
| /** | ||
| * Unsafely promote a string to a TrustedHTML, falling back to strings when | ||
| * Trusted Types are not available. | ||
| * @security This is a security-sensitive function; any use of this function | ||
| * must go through security review. In particular, it must be assured that the | ||
| * provided string will never cause an XSS vulnerability if used in a context | ||
| * that will be interpreted as HTML by a browser, e.g. when assigning to | ||
| * element.innerHTML. | ||
| */ | ||
| export function trustedHTMLFromString(html: string): TrustedHTML { | ||
| return getPolicy()?.createHTML(html) || html as unknown as TrustedHTML; | ||
| } |