From 748b67829fcd25ef8ded1c43fafcb482c1213e31 Mon Sep 17 00:00:00 2001 From: Bjarki Date: Thu, 28 Oct 2021 17:04:25 +0000 Subject: [PATCH] fix(all): fix Trusted Types violations during initialization Currently, when Angular Material is loaded in an application that has Trusted Types enforced, two violations occur. Both violations are caused when a plain string is passed to angular.element since there is no guarantee that the string was not derived from user input, which could cause XSS. It should be noted that, in this case, neither call to angular.element represents a security vulnerability, but this blocks Trusted Types adoption in applications that load Angular Material. To fix the violations, refactor the calls to angular.element to use safe DOM operations instead. This change does not alter any functionality and is fully backwards compatible. --- src/components/panel/panel.js | 9 +++++++-- src/components/select/select.js | 10 ++++++++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js index 10bd6291b70..7ffce6a7dd5 100644 --- a/src/components/panel/panel.js +++ b/src/components/panel/panel.js @@ -933,8 +933,7 @@ angular var MD_PANEL_Z_INDEX = 80; var MD_PANEL_HIDDEN = '_md-panel-hidden'; -var FOCUS_TRAP_TEMPLATE = angular.element( - '
'); +var FOCUS_TRAP_TEMPLATE; var _presets = {}; @@ -2232,6 +2231,12 @@ MdPanelRef.prototype._configureTrapFocus = function() { var element = this.panelEl; // Set up elements before and after the panel to capture focus and // redirect back into the panel. + if (!FOCUS_TRAP_TEMPLATE) { + var template = document.createElement('div'); + template.className = '_md-panel-focus-trap'; + template.tabIndex = 0; + FOCUS_TRAP_TEMPLATE = angular.element(template); + } this._topFocusTrap = FOCUS_TRAP_TEMPLATE.clone()[0]; this._bottomFocusTrap = FOCUS_TRAP_TEMPLATE.clone()[0]; diff --git a/src/components/select/select.js b/src/components/select/select.js index 1675cd6c9bf..7536c99f49f 100755 --- a/src/components/select/select.js +++ b/src/components/select/select.js @@ -12,8 +12,7 @@ var SELECT_EDGE_MARGIN = 8; var selectNextId = 0; -var CHECKBOX_SELECTION_INDICATOR = - angular.element('
'); +var CHECKBOX_SELECTION_INDICATOR; angular.module('material.components.select', [ 'material.core', @@ -1017,6 +1016,13 @@ function OptionDirective($mdButtonInkRipple, $mdUtil, $mdTheming) { if (selectCtrl.isMultiple) { element.addClass('md-checkbox-enabled'); + if (!CHECKBOX_SELECTION_INDICATOR) { + var indicator = document.createElement('div'); + indicator.className = 'md-container'; + indicator.appendChild(document.createElement('div')); + indicator.firstChild.className = 'md-icon'; + CHECKBOX_SELECTION_INDICATOR = angular.element(indicator); + } element.prepend(CHECKBOX_SELECTION_INDICATOR.clone()); }