fix: prevent XSS

Author: SSShooter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Mind elixir is a free open source mind map core.",
   "main": "dist/MindElixir.js",
   "scripts": {

readme.md

@@ -51,7 +51,6 @@ import MindElixir, { E } from 'mind-elixir'
 #### Script tag
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime"></script>
 <script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
 ```
 

src/plugin/contextMenu.ts

@@ -1,16 +1,17 @@
 import i18n from '../i18n'
+import { encodeHTML } from '../utils/index'
 
 export default function(mind, option) {
   const createTips = words => {
     const div = document.createElement('div')
-    div.innerHTML = words
+    div.innerText = words
     div.style.cssText = 'position:absolute;bottom:20px;left:50%;transform:translateX(-50%);'
     return div
   }
   const createLi = (id, name, keyname) => {
     const li = document.createElement('li')
     li.id = id
-    li.innerHTML = `<span>${name}</span><span>${keyname}</span>`
+    li.innerHTML = `<span>${encodeHTML(name)}</span><span>${encodeHTML(keyname)}</span>`
     return li
   }
   const locale = i18n[mind.locale] ? mind.locale : 'en'

src/plugin/nodeMenu.ts

@@ -1,9 +1,8 @@
 import i18n from '../i18n'
 
-const createDiv = (id, name) => {
+const createDiv = (id) => {
   const div = document.createElement('div')
   div.id = id
-  div.innerHTML = `<span>${name}</span>`
   return div
 }
 
@@ -31,9 +30,9 @@ const colorList = [
 export default function(mind) {
   const locale = i18n[mind.locale] ? mind.locale : 'en'
   let bgOrFont
-  const styleDiv = createDiv('nm-style', 'style')
-  const tagDiv = createDiv('nm-tag', 'tag')
-  const iconDiv = createDiv('nm-icon', 'icon')
+  const styleDiv = createDiv('nm-style')
+  const tagDiv = createDiv('nm-tag')
+  const iconDiv = createDiv('nm-icon')
 
   styleDiv.innerHTML = `
       <div class="nm-fontsize-container">
@@ -60,12 +59,8 @@ export default function(mind) {
       <span class="background">${i18n[locale].background}</span>
       </div>
   `
-  tagDiv.innerHTML = `
-      ${i18n[locale].tag}<input class="nm-tag" tabindex="-1" placeholder="${i18n[locale].tagsSeparate}" /><br>
-  `
-  iconDiv.innerHTML = `
-      ${i18n[locale].icon}<input class="nm-icon" tabindex="-1" placeholder="${i18n[locale].iconsSeparate}" /><br>
-  `
+  tagDiv.innerHTML = `${i18n[locale].tag}<input class="nm-tag" tabindex="-1" placeholder="${i18n[locale].tagsSeparate}" /><br>`
+  iconDiv.innerHTML = `${i18n[locale].icon}<input class="nm-icon" tabindex="-1" placeholder="${i18n[locale].iconsSeparate}" /><br>`
 
   const menuContainer = document.createElement('nmenu')
   menuContainer.innerHTML = `

src/plugin/toolBar.ts

@@ -14,7 +14,7 @@ function createToolBarRBContainer(mind) {
   const zo = createButton('zoomout', 'move')
   const zi = createButton('zoomin', 'add')
   const percentage = document.createElement('span')
-  percentage.innerHTML = '100%'
+  percentage.innerText = '100%'
   toolBarRBContainer.appendChild(fc)
   toolBarRBContainer.appendChild(gc)
   toolBarRBContainer.appendChild(zo)

src/utils/dom.ts

@@ -1,7 +1,7 @@
 import { LEFT, RIGHT, SIDE } from '../const'
 import vari from '../var'
 import { NodeObj } from '../index'
-
+import { encodeHTML } from '../utils/index'
 export type Top = HTMLElement
 
 export type Group = HTMLElement
@@ -36,7 +36,7 @@ export const createGroup = function(nodeObj: NodeObj) {
 }
 
 export const shapeTpc = function(tpc: Topic, nodeObj: NodeObj) {
-  tpc.innerHTML = nodeObj.topic
+  tpc.innerText = nodeObj.topic
 
   if (nodeObj.style) {
     tpc.style.color = nodeObj.style.color || 'inherit'
@@ -56,23 +56,23 @@ export const shapeTpc = function(tpc: Topic, nodeObj: NodeObj) {
     const linkContainer = $d.createElement('a')
     linkContainer.className = 'hyper-link'
     linkContainer.target = '_blank'
-    linkContainer.innerHTML = '🔗'
+    linkContainer.innerText = '🔗'
     linkContainer.href = nodeObj.hyperLink
     tpc.appendChild(linkContainer)
   }
   if (nodeObj.icons) {
     const iconsContainer = $d.createElement('span')
     iconsContainer.className = 'icons'
     iconsContainer.innerHTML = nodeObj.icons
-      .map(icon => `<span>${icon}</span>`)
+      .map(icon => `<span>${encodeHTML(icon)}</span>`)
       .join('')
     tpc.appendChild(iconsContainer)
   }
   if (nodeObj.tags) {
     const tagsContainer = $d.createElement('div')
     tagsContainer.className = 'tags'
     tagsContainer.innerHTML = nodeObj.tags
-      .map(tag => `<span>${tag}</span>`)
+      .map(tag => `<span>${encodeHTML(tag)}</span>`)
       .join('')
     tpc.appendChild(tagsContainer)
   }
@@ -110,7 +110,7 @@ export function createInputDiv(tpc: Topic) {
   let div = $d.createElement('div')
   const origin = tpc.childNodes[0].textContent as string
   tpc.appendChild(div)
-  div.innerHTML = origin
+  div.innerText = origin
   div.contentEditable = 'true'
   div.spellcheck = false
   div.style.cssText = `min-width:${tpc.offsetWidth - 8}px;`
@@ -161,7 +161,7 @@ export function createInputDiv(tpc: Topic) {
 export const createExpander = function(expanded: boolean | undefined): Expander {
   const expander: Expander = $d.createElement('epd')
   // 包含未定义 expanded 的情况，未定义视为展开
-  expander.innerHTML = expanded !== false ? '-' : '+'
+  expander.innerText = expanded !== false ? '-' : '+'
   expander.expanded = expanded !== false
   expander.className = expanded !== false ? 'minus' : ''
   return expander

src/utils/index.ts

@@ -1,6 +1,10 @@
 import vari from '../var'
 import { NodeObj } from '../index'
 
+export function encodeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;')
+}
+
 export const isMobile = (): boolean =>
   /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
     navigator.userAgent