Merge pull request #31943 from mozfreddyb/system-sanitizer-usage

Bug 1206661 - rewrite existing sanitizer usages to create/unwrap pattern. r=timdream

apps/system/js/app_install_manager.js

@@ -121,7 +121,7 @@
     },
 
     imeListView: function({displayName, imeName}) {
-      return Sanitizer.escapeHTML `<li>
+      return Sanitizer.createSafeHTML`<li>
          <gaia-checkbox class="ime inline" name="keyboards" value="${imeName}">
            <label>${displayName}</label>
          </gaia-checkbox>
@@ -413,16 +413,16 @@
       }
 
       // build the list of keyboard layouts
-      var listHtml = '';
+      var listHtml = [];
       for (var name in inputs) {
         var displayIMEName = new ManifestHelper(inputs[name]).displayName;
-        listHtml += this.imeListView({
+        listHtml.push(this.imeListView({
           imeName: name,
           displayName: displayIMEName
-        });
+        }));
       }
       // keeping li template
-      this.imeList.innerHTML = listHtml;
+      this.imeList.innerHTML = Sanitizer.unwrapSafeHTML(...listHtml);
       this.imeLayoutDialog.classList.add('visible');
       this.dispatchPromptEvent('shown');
     },
@@ -532,14 +532,15 @@
         return;
       }
 
-      var newNotif =
-        `<div class="fake-notification" role="link">
+      var newNotif = Sanitizer.createSafeHTML`
+        <div class="fake-notification" role="link">
           <div data-icon="rocket" class="alert" aria-hidden="true"></div>
           <div class="title-container"></div>
           <progress></progress>
         </div>`;
 
-      this.notifContainer.insertAdjacentHTML('afterbegin', newNotif);
+      this.notifContainer.insertAdjacentHTML('afterbegin',
+        Sanitizer.unwrapSafeHTML(newNotif));
 
       var newNode = this.notifContainer.firstElementChild;
       newNode.dataset.manifest = manifestURL;

apps/system/js/card.js

@@ -97,7 +97,7 @@
    * @memberOf Card.prototype
    */
   Card.prototype.template = function() {
-    return Sanitizer.escapeHTML `<div class="titles">
+    return Sanitizer.createSafeHTML `<div class="titles">
      <h1 id="${this.titleId}" dir="auto" class="title">${this.title}</h1>
      <p class="subtitle">
       <span class="subtitle-url">${this.subTitle}</span>
@@ -201,7 +201,7 @@
     this._populateViewData();
 
     // populate the view
-    elem.innerHTML = this.view();
+    elem.innerHTML = Sanitizer.unwrapSafeHTML(this.view());
 
     // Label the card by title (for screen reader).
     elem.setAttribute('aria-labelledby', this.titleId);

apps/system/js/ime_menu.js

@@ -33,9 +33,9 @@
     initUI: function() {
       var dummy = document.createElement('div');
 
-      dummy.innerHTML = this.imeMenuView({
+      dummy.innerHTML = Sanitizer.unwrapSafeHTML(this.imeMenuView({
         title: this.title
-      });
+      }));
       this.container = dummy.firstElementChild;
 
       // We have a menu with all the options
@@ -78,7 +78,7 @@
      * @memberof ImeMenu.prototype
      */
     imeMenuView: function({title, cancelLabel}) {
-      return Sanitizer.escapeHTML `<form role="dialog"
+      return Sanitizer.createSafeHTML`<form role="dialog"
         data-type="value-selector" class="ime-menu value-selector-container"
         data-z-index-level="action-menu">
         <section>
@@ -99,7 +99,8 @@
      * @memberof ImeMenu.prototype
      */
     menuItemView: function({layoutName, appName, layoutId, selected}) {
-      return Sanitizer.escapeHTML `<li role="option" aria-selected="${selected}"
+      return Sanitizer.createSafeHTML`
+      <li role="option" aria-selected="${selected}"
         data-id="${layoutId}">
         <label role="presentation">
           <span class="item-label">${layoutName}</span>
@@ -113,15 +114,16 @@
      * @memberof ImeMenu.prototype
      */
     buildMenu: function(items) {
-      this.menu.innerHTML = '';
+      var menuList = [];
       items.forEach(function traveseItems(item) {
-        this.menu.innerHTML += this.menuItemView({
+         menuList.push(this.menuItemView({
           layoutName: item.layoutName,
           appName: item.appName,
           layoutId: item.value.toString(),
           selected: item.selected ? 'true' : 'false'
-        });
+        }));
       }, this);
+      this.menu.innerHTML = Sanitizer.unwrapSafeHTML(...menuList);
     },
 
     /**

apps/system/js/permission_manager.js

@@ -99,7 +99,7 @@
      * @memberof PermissionManager.prototype
      */
     deviceOptionView: function({id, checked, label}) {
-      return Sanitizer.escapeHTML `<label class="device-list deviceEnable">
+      return Sanitizer.createSafeHTML `<label class="device-list deviceEnable">
           <input class="input-enable" id="${id}" type="checkbox" ${checked}>
           <span></span>
         </label>
@@ -582,11 +582,11 @@
 
         var item_li = document.createElement('li');
         item_li.className = 'device-cell';
-        item_li.innerHTML = this.deviceOptionView({
+        item_li.innerHTML = Sanitizer.unwrapSafeHTML(this.deviceOptionView({
                               id: option,
                               checked: checked,
                               label: 'device-' + option
-                            });
+                            }));
         this.devices.appendChild(item_li);
       });
       this.devices.addEventListener('click',

apps/system/js/value_selector/value_selector.js

@@ -127,7 +127,8 @@
 
   ValueSelector.prototype.render = function vs_render(callback) {
     this.publish('willrender');
-    this.containerElement.insertAdjacentHTML('beforeend', this.view());
+    this.containerElement.insertAdjacentHTML('beforeend',
+          Sanitizer.unwrapSafeHTML(this.view()));
     this._fetchElements();
     this._registerEvents();
     this._injected = true;
@@ -155,7 +156,7 @@
   ValueSelector.prototype.view = function vs_view() {
     /* jshint maxlen: false */
     var id = this.CLASS_NAME + this.instanceID;
-    return Sanitizer.escapeHTML `<div data-z-index-level="value-selector" class="value-selector" id="${id}" hidden>
+    return Sanitizer.createSafeHTML`<div data-z-index-level="value-selector" class="value-selector" id="${id}" hidden>
       <form class="value-selector-select-option-popup" role="dialog" data-type="value-selector" hidden>
         <section class="value-selector-container">
           <h1 class="value-selector-options-title" data-l10n-id="choose-option"></h1>
@@ -219,7 +220,8 @@
 
   ValueSelector.prototype.optionView = function(
     {index, checked, labelFor,text}) {
-    return Sanitizer.escapeHTML `<li role="option" data-option-index="${index}"
+    return Sanitizer.createSafeHTML`
+      <li role="option" data-option-index="${index}"
         aria-selected="${checked}" dir="auto">
         <label role="presentation" for="${labelFor}">
           <span>${text}</span>
@@ -228,7 +230,7 @@
   };
 
   ValueSelector.prototype.groupView = function({text}) {
-    return Sanitizer.escapeHTML `<li role="subheader" dir="auto">
+    return Sanitizer.createSafeHTML `<li role="subheader" dir="auto">
         <label role="presentation">
           <span>${text}</span>
         </label>
@@ -495,17 +497,17 @@
     options.forEach(function(option) {
       if (option.group) {
         this.elements.optionsContainer.insertAdjacentHTML('beforeend',
-          this.groupView({
+          Sanitizer.unwrapSafeHTML(this.groupView({
             text: option.text
-          }));
+          })));
       } else {
         this.elements.optionsContainer.insertAdjacentHTML('beforeend',
-          this.optionView({
+          Sanitizer.unwrapSafeHTML(this.optionView({
             index: option.optionIndex.toString(10),
             checked: option.selected.toString(),
             labelFor: 'gaia-option-' + option.optionIndex,
             text: option.text
-          }));
+          })));
       }
     }, this);
 

build/eslint/xfail.list

@@ -163,28 +163,19 @@ apps/system/fxa/js/screens/fxam_signup_success.js # line 26, col 5, Error - Unsa
 apps/system/js/activity_window.js # line 200, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/app_chrome.js # line 1076, col 9, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/app_chrome.js # line 824, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/app_install_manager.js # line 425, col 7, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/app_install_manager.js # line 542, col 7, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/attention_window.js # line 114, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/base_icon.js # line 113, col 9, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/base_ui.js # line 28, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/bluetooth_transfer.js # line 405, col 5, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/call_forwarding_icon.js # line 29, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/callscreen_window.js # line 89, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/card.js # line 204, col 5, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/entry_sheet.js # line 63, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/global_overlay_window.js # line 86, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/ime_menu.js # line 118, col 9, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/ime_menu.js # line 36, col 7, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/permission_manager.js # line 585, col 9, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/roaming_icon.js # line 22, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/signal_icon.js # line 22, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/system_dialog.js # line 143, col 7, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/time_icon.js # line 59, col 5, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/js/ttl_view.js # line 133, col 7, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/value_selector/value_selector.js # line 130, col 5, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/value_selector/value_selector.js # line 497, col 9, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
-apps/system/js/value_selector/value_selector.js # line 502, col 9, Error - Unsafe call to insertAdjacentHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/mobile_id/js/error_overlay.js # line 40, col 5, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/mobile_id/js/ui.js # line 169, col 13, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)
 apps/system/mobile_id/js/ui.js # line 340, col 9, Error - Unsafe assignment to innerHTML (no-unsafe-innerhtml/no-unsafe-innerhtml)