fix(all): fix Trusted Types violations during initialization (#12128)

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.

Author: bjarkler

src/components/panel/panel.js

@@ -869,8 +869,7 @@ angular
 
 var MD_PANEL_Z_INDEX = 80;
 var MD_PANEL_HIDDEN = '_md-panel-hidden';
-var FOCUS_TRAP_TEMPLATE = angular.element(
-    '<div class="_md-panel-focus-trap" tabindex="0"></div>');
+var FOCUS_TRAP_TEMPLATE;
 
 var _presets = {};
 
@@ -2107,6 +2106,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];
 

src/components/select/select.js

@@ -12,8 +12,7 @@
 
 var SELECT_EDGE_MARGIN = 8;
 var selectNextId = 0;
-var CHECKBOX_SELECTION_INDICATOR =
-  angular.element('<div class="md-container"><div class="md-icon"></div></div>');
+var CHECKBOX_SELECTION_INDICATOR;
 
 angular.module('material.components.select', [
     'material.core',
@@ -1270,6 +1269,13 @@ function OptionDirective($mdButtonInkRipple, $mdUtil, $mdTheming) {
 
     if (selectMenuCtrl.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());
     }