chore(deps): upgrade dependencies, remove some unnecessary ones

This commit upgrades dependencies that are more or less trivial
to update, e.g. because they didn't have major version bumps or
simply didn't break anything. There are some dependencies which
have not been upgraded since this would have required larger
refactorings. This includes especially the markdown-it ecosystem
and the webpack ecosystem.
The largest refactorings in this commit come from the bump of
socket.io v2 to v4 which changed the handling of the connected
socket list for instance.

This commit further removes some outdated and/or unnecessary
dependencies. This includes the String.js library which is
unmaintained for 9 years and has some CVEs. We mainly used
this library for their escapeHTML and unescapeHTML methods.
This can be done using native DOM APIs nowadays, which is also
considered more safe since it is the same logic that the
browser itself uses.
Since we target Node 18 and above, we can also rely on the
built-in fetch function instead of the node-fetch package.
The current version of Chance.js includes a method for
generating a random color now too, so we don't need the
package randomcolor anymore.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

public/js/cover.js

@@ -24,7 +24,7 @@ import {
 
 import { saveAs } from 'file-saver'
 import List from 'list.js'
-import S from 'string'
+import { unescapeHtml } from './utils'
 
 require('./locale')
 
@@ -398,7 +398,7 @@ function buildTagsFilter (tags) {
   for (let i = 0; i < tags.length; i++) {
     tags[i] = {
       id: i,
-      text: S(tags[i]).unescapeHTML().s
+      text: unescapeHtml(tags[i])
     }
   }
   filtertags = tags

public/js/extra.js

@@ -3,11 +3,11 @@
 
 import Prism from 'prismjs'
 import PDFObject from 'pdfobject'
-import S from 'string'
 import { saveAs } from 'file-saver'
-import escapeHTML from 'escape-html'
+import filterXSS from 'xss'
 
 import getUIElements from './lib/editor/ui-elements'
+import { escapeHtml, unescapeHtml } from './utils'
 
 import markdownit from 'markdown-it'
 import markdownitContainer from 'markdown-it-container'
@@ -166,7 +166,11 @@ export function renderTags (view) {
 
 function slugifyWithUTF8 (text) {
   // remove HTML tags and trim spaces
-  let newText = S(text).trim().stripTags().s
+  let newText = filterXSS(text.trim(), {
+    whiteList: {},
+    stripIgnoreTag: true,
+    stripIgnoreTagBody: ['script', 'style']
+  })
   // replace space between words with dashes
   newText = newText.replace(/\s+/g, '-')
   // slugify string to make it valid as an attribute
@@ -318,7 +322,7 @@ export function finishView (view) {
       svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet')
     } catch (err) {
       $value.unwrap()
-      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      $value.parent().append(`<div class="alert alert-warning">${escapeHtml(err)}</div>`)
       console.warn(err)
     }
   })
@@ -343,7 +347,7 @@ export function finishView (view) {
       $value.children().unwrap().unwrap()
     } catch (err) {
       $value.unwrap()
-      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      $value.parent().append(`<div class="alert alert-warning">${escapeHtml(err)}</div>`)
       console.warn(err)
     }
   })
@@ -365,7 +369,7 @@ export function finishView (view) {
       })
     } catch (err) {
       $value.unwrap()
-      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      $value.parent().append(`<div class="alert alert-warning">${escapeHtml(err)}</div>`)
       console.warn(err)
     }
   })
@@ -388,7 +392,7 @@ export function finishView (view) {
           errormessage = err.str
         }
         $value.unwrap()
-        $value.parent().append(`<div class="alert alert-warning">${escapeHTML(errormessage)}</div>`)
+        $value.parent().append(`<div class="alert alert-warning">${escapeHtml(errormessage)}</div>`)
         console.warn(errormessage)
       }
     })
@@ -411,7 +415,7 @@ export function finishView (view) {
       })
     } catch (err) {
       $value.unwrap()
-      $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      $value.parent().append(`<div class="alert alert-warning">${escapeHtml(err)}</div>`)
       console.warn(err)
     }
   })
@@ -486,24 +490,24 @@ export function finishView (view) {
             value: code
           }
         } else if (reallang === 'haskell' || reallang === 'go' || reallang === 'typescript' || reallang === 'jsx' || reallang === 'gherkin') {
-          code = S(code).unescapeHTML().s
+          code = unescapeHtml(code)
           result = {
             value: Prism.highlight(code, Prism.languages[reallang])
           }
         } else if (reallang === 'tiddlywiki' || reallang === 'mediawiki') {
-          code = S(code).unescapeHTML().s
+          code = unescapeHtml(code)
           result = {
             value: Prism.highlight(code, Prism.languages.wiki)
           }
         } else if (reallang === 'cmake') {
-          code = S(code).unescapeHTML().s
+          code = unescapeHtml(code)
           result = {
             value: Prism.highlight(code, Prism.languages.makefile)
           }
         } else {
           require.ensure([], function (require) {
             const hljs = require('highlight.js')
-            code = S(code).unescapeHTML().s
+            code = unescapeHtml(code)
             const languages = hljs.listLanguages()
             if (!languages.includes(reallang)) {
               result = hljs.highlightAuto(code)
@@ -576,7 +580,7 @@ export function postProcess (code) {
     if (warning && warning.length > 0) {
       warning.text(md.metaError)
     } else {
-      warning = $(`<div id="meta-error" class="alert alert-warning">${escapeHTML(md.metaError)}</div>`)
+      warning = $(`<div id="meta-error" class="alert alert-warning">${escapeHtml(md.metaError)}</div>`)
       result.prepend(warning)
     }
   }
@@ -963,7 +967,7 @@ export function scrollToHash () {
 
 function highlightRender (code, lang) {
   if (!lang || /no(-?)highlight|plain|text/.test(lang)) { return }
-  code = S(code).escapeHTML().s
+  code = escapeHtml(code)
   if (lang === 'sequence') {
     return `<div class="sequence-diagram raw">${code}</div>`
   } else if (lang === 'flow') {

public/js/history.js

@@ -2,13 +2,13 @@
 /* global serverurl, moment */
 
 import store from 'store'
-import S from 'string'
 import LZString from 'lz-string'
 import url from 'wurl'
 
 import {
   checkNoteIdValid,
-  encodeNoteId
+  encodeNoteId,
+  escapeHtml
 } from './utils'
 
 import {
@@ -275,8 +275,8 @@ function parseToHistory (list, notehistory, callback) {
       notehistory[i].fromNow = timestamp.fromNow()
       notehistory[i].time = timestamp.format('llll')
       // prevent XSS
-      notehistory[i].text = S(notehistory[i].text).escapeHTML().s
-      notehistory[i].tags = (notehistory[i].tags && notehistory[i].tags.length > 0) ? S(notehistory[i].tags).escapeHTML().s.split(',') : []
+      notehistory[i].text = escapeHtml(notehistory[i].text)
+      notehistory[i].tags = (notehistory[i].tags && notehistory[i].tags.length > 0) ? escapeHtml(notehistory[i].tags).split(',') : []
       // add to list
       if (notehistory[i].id && list.get('id', notehistory[i].id).length === 0) { list.add(notehistory[i]) }
     }

public/js/index.js

@@ -16,7 +16,7 @@ import { ot } from '../vendor/ot/ot.min.js'
 import hex2rgb from '../vendor/ot/hex2rgb'
 
 import { saveAs } from 'file-saver'
-import randomColor from 'randomcolor'
+import chance from 'chance'
 import store from 'store'
 import url from 'wurl'
 import { Spinner } from 'spin.js'
@@ -427,7 +427,7 @@ const supportExtraTags = [
     text: '[random color tag]',
     search: '[]',
     command: function () {
-      const color = randomColor()
+      const color = chance().color()
       return '[color=' + color + ']'
     }
   }

public/js/utils.js

@@ -30,3 +30,21 @@ export function decodeNoteId (encodedId) {
   idParts.push(id.substr(20, 12))
   return idParts.join('-')
 }
+
+// use browser's DOM APIs for escaping and unescaping HTML
+export function escapeHtml (unsafe) {
+  if (!unsafe) {
+    return ''
+  }
+  const tempDiv = document.createElement('div')
+  tempDiv.appendChild(document.createTextNode(String(unsafe)))
+  return tempDiv.innerHTML
+}
+
+export function unescapeHtml (escapedHtml) {
+  if (!escapedHtml) {
+    return ''
+  }
+  const doc = new DOMParser().parseFromString(escapedHtml, 'text/html')
+  return doc.documentElement.textContent || ''
+}