555 - Fix HTML value not escaped in DataField (#556)

* Escape HTML in DataField value

* Html data prop test

Author: Guillaume Chau

shells/dev/target/NativeTypes.vue

@@ -64,7 +64,8 @@ export default {
       },
       largeArray: [],
       i: new Set([1, 2, 3, 4, new Set([5, 6, 7, 8]), new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])]])]),
-      j: new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])], [8, new Set([1, 2, 3, 4, new Set([5, 6, 7, 8]), new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])]])])]])
+      j: new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])], [8, new Set([1, 2, 3, 4, new Set([5, 6, 7, 8]), new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])]])])]]),
+      html: '<b>Bold</b> <i>Italic</i>'
     }
   },
   computed: {

src/devtools/components/DataField.vue

@@ -157,7 +157,8 @@ import {
   NAN,
   isPlainObject,
   sortByKey,
-  openInEditor
+  openInEditor,
+  escape
 } from 'src/util'
 
 import DataFieldEdit from '../mixins/data-field-edit'
@@ -285,7 +286,7 @@ export default {
         if (typeMatch) {
           return typeMatch[1]
         } else {
-          return `<span>"</span>${value}<span>"</span>`
+          return `<span>"</span>${escape(value)}<span>"</span>`
         }
       } else {
         return value

src/util.js

@@ -426,3 +426,18 @@ export function openInEditor (file) {
     eval(src)
   }
 }
+
+const ESC = {
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  '&': '&amp;'
+}
+
+export function escape (s) {
+  return s.replace(/[<>"&]/g, escapeChar)
+}
+
+function escapeChar (a) {
+  return ESC[a] || a
+}