sanitize strings coming from user inputs

src/js/controller/HeaderController.js

@@ -31,7 +31,7 @@
       }
 
       if (this.piskelName_) {
-        this.piskelName_.innerHTML = name;
+        this.piskelName_.textContent = name;
       }
     } catch (e) {
       console.warn('Could not update header : ' + e.message);

src/js/controller/dialogs/BrowseLocalController.js

@@ -48,7 +48,10 @@
 
     keys.forEach((function (key) {
       var date = pskl.utils.DateUtils.format(key.date, '{{Y}}/{{M}}/{{D}} {{H}}:{{m}}');
-      html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date});
+      html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {
+        name : key.name,
+        date : date
+      });
     }).bind(this));
 
     var tableBody_ = this.piskelList.get(0).tBodies[0];

src/js/controller/dialogs/ImportImageController.js

@@ -135,7 +135,7 @@
     this.importedImage_.onload = function () {};
 
     var fileName = this.extractFileNameFromPath_(this.file_.name);
-    this.fileNameContainer.html(fileName);
+    this.fileNameContainer.text(fileName);
     this.fileNameContainer.attr('title', fileName);
 
     this.resizeWidth.val(w);

src/js/controller/settings/SaveController.js

@@ -62,7 +62,7 @@
 
   ns.SaveController.prototype.insertSavePartials_ = function () {
     this.getPartials_().forEach(function (partial) {
-      pskl.utils.Template.insert(this.saveForm, 'beforeend', partial);
+      this.saveForm.insertAdjacentHTML('beforeend', pskl.utils.Template.get(partial));
     }.bind(this));
   };
 

src/js/utils/Template.js

@@ -16,23 +16,12 @@
     },
 
     createFromHTML : function (html) {
-      var dummyEl = document.createElement('div');
+      var dummyEl = ns.Template._getDummyEl();
       dummyEl.innerHTML = html;
-      return dummyEl.children[0];
-    },
+      var element = dummyEl.children[0];
+      dummyEl.innerHTML = '';
 
-    insert : function (parent, position, templateId, dict) {
-      var html = pskl.utils.Template.getAndReplace(templateId, dict);
-      parent.insertAdjacentHTML(position, html);
-    },
-
-    getAndReplace : function (templateId, dict) {
-      var result = '';
-      var tpl = pskl.utils.Template.get(templateId);
-      if (tpl) {
-        result = pskl.utils.Template.replace(tpl, dict);
-      }
-      return result;
+      return element;
     },
 
     replace : function (template, dict) {
@@ -49,10 +38,38 @@
               value = '';
             }
           }
+
+          // Sanitize all values expect if the key is surrounded by `!`
+          if (!/^!.*!$/.test(key)) {
+            value = ns.Template.sanitize(value);
+          }
+
           template = template.replace(new RegExp('\\{\\{' + key + '\\}\\}', 'g'), value);
         }
       }
       return template;
+    },
+
+    /**
+     * Sanitize the provided string to make it safer for using in templates.
+     */
+    sanitize : function (string) {
+      var dummyEl = ns.Template._getDummyEl();
+
+      // Apply the unsafe string as text content and
+      dummyEl.textContent = string;
+      var sanitizedString = dummyEl.innerHTML;
+
+      dummyEl.innerHTML = '';
+
+      return sanitizedString;
+    },
+
+    _getDummyEl : function () {
+      if (!ns.Template._dummyEl) {
+        ns.Template._dummyEl = document.createElement('div');
+      }
+      return ns.Template._dummyEl;
     }
   };
 })();

src/js/utils/TooltipFormatter.js

@@ -9,7 +9,8 @@
     return pskl.utils.Template.replace(tpl, {
       helptext : helpText,
       shortcut : shortcut,
-      descriptors : this.formatDescriptors_(descriptors)
+      // Avoid sanitization for descriptors (markup)
+      '!descriptors!' : this.formatDescriptors_(descriptors)
     });
   };
 

src/templates/misc-templates.html

@@ -11,7 +11,7 @@
   <script type="text/template" id="tooltip-container-template">
     <div class='tooltip-container'>
       <div>{{helptext}} <span class='tooltip-shortcut'>{{shortcut}}</span></div>
-      {{descriptors}}
+      {{!descriptors!}}
     </div>
   </script>