fix: draw.io svgs are no longer removed with linebreaks (#2415)

client/components/editor/editor-markdown.vue

@@ -300,6 +300,21 @@ const md = new MarkdownIt({
   .use(mdFootnote)
   .use(mdImsize)
 
+// DOMPurify fix for draw.io
+DOMPurify.addHook('uponSanitizeElement', (elm) => {
+  if (elm.querySelectorAll) {
+    const breaks = elm.querySelectorAll('foreignObject br, foreignObject p')
+    if (breaks && breaks.length) {
+      for (let i = 0; i < breaks.length; i++) {
+        breaks[i].parentNode.replaceChild(
+          document.createElement('div'),
+          breaks[i]
+        )
+      }
+    }
+  }
+})
+
 // ========================================
 // HELPER FUNCTIONS
 // ========================================
@@ -459,7 +474,9 @@ export default {
       linesMap = []
       // this.$store.set('editor/content', newContent)
       this.processMarkers(this.cm.firstLine(), this.cm.lastLine())
-      this.previewHTML = DOMPurify.sanitize(md.render(newContent))
+      this.previewHTML = DOMPurify.sanitize(md.render(newContent), {
+        ADD_TAGS: ['foreignObject']
+      })
       this.$nextTick(() => {
         tabsetHelper.format()
         this.renderMermaidDiagrams()

package.json

@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@aoberoi/passport-slack": "1.0.5",
-    "@azure/storage-blob": "12.1.2",
-    "@bugsnag/js": "7.3.3",
+    "@azure/storage-blob": "12.2.0",
+    "@bugsnag/js": "7.3.4",
     "@exlinc/keycloak-passport": "1.0.2",
     "@root/csr": "0.8.1",
     "@root/keypairs": "0.10.1",
@@ -50,7 +50,7 @@
     "apollo-server": "2.17.0",
     "apollo-server-express": "2.17.0",
     "auto-load": "3.0.4",
-    "aws-sdk": "2.746.0",
+    "aws-sdk": "2.751.0",
     "azure-search-client": "3.1.5",
     "bcryptjs-then": "1.0.1",
     "bluebird": "3.7.2",
@@ -69,7 +69,7 @@
     "custom-error-instance": "2.1.2",
     "dependency-graph": "0.9.0",
     "diff": "4.0.2",
-    "diff2html": "3.1.12",
+    "diff2html": "3.1.13",
     "dompurify": "2.0.15",
     "dotize": "0.3.0",
     "elasticsearch6": "npm:@elastic/elasticsearch@6",
@@ -87,9 +87,9 @@
     "graphql-list-fields": "2.0.2",
     "graphql-rate-limit-directive": "1.2.1",
     "graphql-subscriptions": "1.1.0",
-    "graphql-tools": "6.2.0",
+    "graphql-tools": "6.2.1",
     "he": "1.2.0",
-    "highlight.js": "10.1.2",
+    "highlight.js": "10.2.0",
     "i18next": "19.7.0",
     "i18next-express-middleware": "2.0.0",
     "i18next-node-fs-backend": "2.1.3",
@@ -122,7 +122,7 @@
     "mime-types": "2.1.27",
     "moment": "2.27.0",
     "moment-timezone": "0.5.31",
-    "mongodb": "3.6.1",
+    "mongodb": "3.6.2",
     "ms": "2.1.2",
     "mssql": "6.2.1",
     "multer": "1.4.2",
@@ -134,7 +134,7 @@
     "objection": "2.2.3",
     "passport": "0.4.1",
     "passport-auth0": "1.3.3",
-    "passport-azure-ad": "4.2.1",
+    "passport-azure-ad": "4.3.0",
     "passport-cas": "0.1.1",
     "passport-discord": "0.1.4",
     "passport-dropbox-oauth2": "1.1.0",
@@ -183,7 +183,7 @@
     "validate.js": "0.13.1",
     "winston": "3.3.3",
     "xss": "1.0.8",
-    "yargs": "15.4.1"
+    "yargs": "16.0.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",
@@ -202,7 +202,7 @@
     "@mdi/font": "5.5.55",
     "@panter/vue-i18next": "0.15.2",
     "@requarks/ckeditor5": "19.0.1-wiki.2",
-    "@vue/babel-preset-app": "4.5.4",
+    "@vue/babel-preset-app": "4.5.6",
     "animate-sass": "0.8.2",
     "animated-number-vue": "1.0.0",
     "apollo-cache-inmemory": "1.6.6",
@@ -231,7 +231,7 @@
     "codemirror": "5.57.0",
     "copy-webpack-plugin": "6.1.0",
     "core-js": "3.6.5",
-    "css-loader": "4.2.2",
+    "css-loader": "4.3.0",
     "cssnano": "4.1.10",
     "cypress": "5.1.0",
     "d3": "6.1.1",
@@ -263,8 +263,8 @@
     "jest": "26.4.2",
     "js-beautify": "1.13.0",
     "js-cookie": "2.2.1",
-    "mermaid": "8.7.0",
-    "mini-css-extract-plugin": "0.11.0",
+    "mermaid": "8.8.0",
+    "mini-css-extract-plugin": "0.11.1",
     "moment-duration-format": "2.3.2",
     "moment-timezone-data-webpack-plugin": "1.3.0",
     "offline-plugin": "5.0.7",
@@ -289,7 +289,7 @@
     "script-ext-html-webpack-plugin": "2.1.4",
     "simple-progress-webpack-plugin": "1.1.2",
     "style-loader": "1.2.1",
-    "terser": "5.3.0",
+    "terser": "5.3.1",
     "twemoji-awesome": "1.0.6",
     "url-loader": "4.1.0",
     "velocity-animate": "1.5.2",
@@ -298,7 +298,7 @@
     "vue-apollo": "3.0.4",
     "vue-chartjs": "3.5.1",
     "vue-clipboards": "1.3.0",
-    "vue-filepond": "6.0.2",
+    "vue-filepond": "6.0.3",
     "vue-hot-reload-api": "2.3.4",
     "vue-loader": "15.9.3",
     "vue-moment": "4.1.0",
@@ -318,13 +318,13 @@
     "webpack-cli": "3.3.12",
     "webpack-dev-middleware": "3.7.2",
     "webpack-hot-middleware": "2.25.0",
-    "webpack-merge": "5.1.3",
+    "webpack-merge": "5.1.4",
     "webpack-modernizr-loader": "5.0.0",
     "webpack-subresource-integrity": "1.4.1",
     "webpackbar": "4.0.0",
-    "whatwg-fetch": "3.4.0",
+    "whatwg-fetch": "3.4.1",
     "write-file-webpack-plugin": "4.5.1",
-    "xterm": "4.8.1",
+    "xterm": "4.9.0",
     "zxcvbn": "4.4.2"
   },
   "resolutions": {

server/modules/rendering/html-security/definition.yml

@@ -14,9 +14,15 @@ props:
     default: true
     hint: Sanitize HTML from unsafe attributes and tags that could lead to XSS attacks
     order: 1
+  allowDrawIoUnsafe:
+    type: Boolean
+    title: Allow Draw.io Unsafe Elements
+    default: true
+    hint: Draw.io diagrams may introduce some elements that are usually filtered. Turning off this option may cause some diagrams to be completely removed during the sanitization process.
+    order: 2
   allowIFrames:
     type: Boolean
     title: Allow iframes
     default: false
     hint: iframes will not be stripped if enabled. (Not recommended)
-    order: 2
+    order: 3

server/modules/rendering/html-security/renderer.js

@@ -10,6 +10,23 @@ module.exports = {
       const allowedAttrs = ['v-pre', 'v-slot:tabs', 'v-slot:content', 'target']
       const allowedTags = ['tabset', 'template']
 
+      if (config.allowDrawIoUnsafe) {
+        allowedTags.push('foreignObject')
+        DOMPurify.addHook('uponSanitizeElement', (elm) => {
+          if (elm.querySelectorAll) {
+            const breaks = elm.querySelectorAll('foreignObject br, foreignObject p')
+            if (breaks && breaks.length) {
+              for (let i = 0; i < breaks.length; i++) {
+                breaks[i].parentNode.replaceChild(
+                  window.document.createElement('div'),
+                  breaks[i]
+                )
+              }
+            }
+          }
+        })
+      }
+
       if (config.allowIFrames) {
         allowedTags.push('iframe')
       }