fix: xss bug

lib/json-box.vue

@@ -66,8 +66,9 @@ export default {
     } else if (typeof this.value === 'function') {
       dataType = JsonFunction
     }
+    const toggle = this.keyName && (this.value && (Array.isArray(this.value) || typeof this.value === 'object'))
 
-    if (this.keyName && (this.value && (Array.isArray(this.value) || typeof this.value === 'object'))) {
+    if (toggle) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -85,7 +86,7 @@ export default {
           'jv-key': true
         },
         domProps: {
-          innerHTML: `${this.keyName}:`
+          innerText: `${this.keyName}:`
         }
       }))
     }
@@ -110,7 +111,8 @@ export default {
 
     return h('div', {
       class: { 
-        'jv-node': true
+        'jv-node': true,
+        'toggle': toggle
       }
     }, elements)
   }
@@ -130,6 +132,10 @@ export default {
     }
   }
 
+  &.toggle {
+    margin-left: 13px !important;
+  }
+
   & .jv-node {
     margin-left: 25px;
   }

lib/types/json-array.vue

@@ -91,7 +91,7 @@ export default {
         'jv-array': true,
       },
       domProps: {
-        innerHTML: '['
+        innerText: '['
       }
     }))
     this.ordered.forEach((value, key) => {
@@ -124,7 +124,7 @@ export default {
           title: `click to reveal ${this.value.length} hidden items`
         },
         domProps: {
-          innerHTML: '...'
+          innerText: '...'
         }
       }))
     }
@@ -135,7 +135,7 @@ export default {
         'jv-array': true,
       },
       domProps: {
-        innerHTML: ']'
+        innerText: ']'
       }
     }))
 

lib/types/json-boolean.vue

@@ -12,7 +12,7 @@ export default {
         'jv-boolean': true,
       },
       domProps: {
-        innerHTML: props.jsonValue.toString()
+        innerText: props.jsonValue.toString()
       }
     })
   }

lib/types/json-number.vue

@@ -15,7 +15,7 @@ export default {
         'jv-number': true,
       },
       domProps: {
-        innerHTML: props.jsonValue.toString()
+        innerText: props.jsonValue.toString()
       }
     })
   }

lib/types/json-object.vue

@@ -87,7 +87,7 @@ export default {
         'jv-object': true,
       },
       domProps: {
-        innerHTML: '{'
+        innerText: '{'
       }
     }))
 
@@ -125,7 +125,7 @@ export default {
           title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`
         },
         domProps: {
-          innerHTML: '...'
+          innerText: '...'
         }
       }))
     }
@@ -136,7 +136,7 @@ export default {
         'jv-object': true,
       },
       domProps: {
-        innerHTML: '}'
+        innerText: '}'
       }
     }))
 

lib/types/json-string.vue

@@ -12,9 +12,18 @@ export default {
   },
   render (h, { props }) {
     let value = props.jsonValue;
+    const islink = REG_LINK.test(value)
+    let domProps
     
-    if (REG_LINK.test(value)) {
+    if (islink) {
       value = `<a href="${value}" target="_blank" style="color: #0366d6;">${value}</a>`;
+      domProps = {
+        innerHTML: `"${value.toString()}"`
+      }
+    } else {
+      domProps = {
+        innerText: `"${value.toString()}"`
+      }
     }
 
     return h('span', {
@@ -23,7 +32,7 @@ export default {
         'jv-string': true,
       },
       domProps: {
-        innerHTML: `"${value.toString()}"`
+        ...domProps
       }
     })
   }

lib/types/json-undefined.vue

@@ -15,7 +15,7 @@ export default {
         'jv-undefined': true,
       },
       domProps: {
-        innerHTML: props.jsonValue === null ? 'null' : 'undefined'
+        innerText: props.jsonValue === null ? 'null' : 'undefined'
       }
     })
   }