Protect Selector Manager views from XSS. Closes #4411

src/selector_manager/view/ClassTagView.ts

@@ -1,5 +1,6 @@
 import { View } from '../../common';
 import State from '../model/State';
+import html from '../../utils/html';
 
 const inputProp = 'contentEditable';
 
@@ -8,12 +9,10 @@ export default class ClassTagView extends View<State> {
     const { pfx, model, config } = this;
     const label = model.get('label') || '';
 
-    return `
+    return html`
       <span id="${pfx}checkbox" class="${pfx}tag-status" data-tag-status></span>
       <span id="${pfx}tag-label" data-tag-name>${label}</span>
-      <span id="${pfx}close" class="${pfx}tag-close" data-tag-remove>
+      <span id="${pfx}close" class="${pfx}tag-close" data-tag-remove> $${config.iconTagRemove} </span>
-        ${config.iconTagRemove}
-      </span>
     `;
   }
 

src/selector_manager/view/ClassTagsView.ts

@@ -11,36 +11,31 @@ import Selectors from '../model/Selectors';
 
 export default class ClassTagsView extends View<Selector> {
   template({ labelInfo, labelHead, iconSync, iconAdd, pfx, ppfx }: any) {
-    return `
+    return html` <div id="${pfx}up" class="${pfx}header">
-    <div id="${pfx}up" class="${pfx}header">
+        <div id="${pfx}label" class="${pfx}header-label">${labelHead}</div>
-      <div id="${pfx}label" class="${pfx}header-label">${labelHead}</div>
+        <div id="${pfx}status-c" class="${pfx}header-status">
-      <div id="${pfx}status-c" class="${pfx}header-status">
+          <span id="${pfx}input-c" data-states-c>
-        <span id="${pfx}input-c" data-states-c>
+            <div class="${ppfx}field ${ppfx}select">
-          <div class="${ppfx}field ${ppfx}select">
+              <span id="${ppfx}input-holder">
-            <span id="${ppfx}input-holder">
+                <select id="${pfx}states" data-states></select>
-              <select id="${pfx}states" data-states></select>
+              </span>
-            </span>
+              <div class="${ppfx}sel-arrow">
-            <div class="${ppfx}sel-arrow">
+                <div class="${ppfx}d-s-arrow"></div>
-              <div class="${ppfx}d-s-arrow"></div>
+              </div>
             </div>
-          </div>
+          </span>
-        </span>
+        </div>
       </div>
-    </div>
+      <div id="${pfx}tags-field" class="${ppfx}field">
-    <div id="${pfx}tags-field" class="${ppfx}field">
+        <div id="${pfx}tags-c" data-selectors></div>
-      <div id="${pfx}tags-c" data-selectors></div>
+        <input id="${pfx}new" data-input />
-      <input id="${pfx}new" data-input/>
+        <span id="${pfx}add-tag" class="${pfx}tags-btn ${pfx}tags-btn__add" data-add> $${iconAdd} </span>
-      <span id="${pfx}add-tag" class="${pfx}tags-btn ${pfx}tags-btn__add" data-add>
+        <span class="${pfx}tags-btn ${pfx}tags-btn__sync" style="display: none" data-sync-style> $${iconSync} </span>
-        ${iconAdd}
+      </div>
-      </span>
+      <div class="${pfx}sels-info">
-      <span class="${pfx}tags-btn ${pfx}tags-btn__sync" style="display: none" data-sync-style>
+        <div class="${pfx}label-sel">${labelInfo}:</div>
-        ${iconSync}
+        <div class="${pfx}sels" data-selected></div>
-      </span>
+      </div>`;
-    </div>
-    <div class="${pfx}sels-info">
-      <div class="${pfx}label-sel">${labelInfo}:</div>
-      <div class="${pfx}sels" data-selected></div>
-    </div>`;
   }
 
   events() {