diff --git a/.gitignore b/.gitignore index 9e37fa624d..8a9f025866 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,8 @@ npm/node_modules .node_repl_history npm-debug.log* .yarn +package-lock.json +yarn.lock # Generated assets /assets diff --git a/client/components/editor/common/sanitize.js b/client/components/editor/common/sanitize.js new file mode 100644 index 0000000000..a0e8df2d35 --- /dev/null +++ b/client/components/editor/common/sanitize.js @@ -0,0 +1,48 @@ + +import DOMPurify from 'dompurify' + +/* global siteConfig */ +export default function drawioSanitize( + content) { + if (siteConfig.drawio.sanitizing === false) { + return content + } + + console.log('DEBUG: Performing sanitizing ...') + + content = + DOMPurify.sanitize( + content, + { + USE_PROFILES: + { + svg: true, + html: true + }, + HTML_INTEGRATION_POINTS: + { + foreignobject: true + }, + ADD_TAGS: [ + 'div', + 'foreignObject', + 'switch', + 'style', + 'title', + 'desc', + 'metadata'], + ADD_ATTR: [ + 'xmlns', 'xmlns:xlink', 'xlink:href', 'xml:space', 'xml:base', + 'font-family', 'font-size', 'font-style', 'font-weight', + 'alignment-baseline', 'dominant-baseline', 'baseline-shift', + 'vector-effect', 'text-anchor', 'clip-path', 'mask', + 'fill-rule', 'stroke-linejoin', 'stroke-linecap', + 'transform', 'viewBox', 'preserveAspectRatio', + 'overflow', 'filter', 'style', 'data-name', 'aria-label', 'requiredFeatures', 'pointer-events'], + FORBID_TAGS: ['script'], // keep scripting disabled + FORBID_ATTR: ['onload', 'onclick', 'onmouseover'], // prevent XSS + ALLOW_UNKNOWN_PROTOCOLS: true // for xlink:href + }) + + return content +} diff --git a/client/components/editor/editor-asciidoc.vue b/client/components/editor/editor-asciidoc.vue index 296b2414b9..fcadf96e90 100644 --- a/client/components/editor/editor-asciidoc.vue +++ b/client/components/editor/editor-asciidoc.vue @@ -152,6 +152,7 @@ import 'codemirror/addon/fold/foldcode.js' import 'codemirror/addon/fold/foldgutter.js' import 'codemirror/addon/fold/foldgutter.css' import cmFold from './common/cmFold' +import drawioSanitize from './common/sanitize' // ======================================== // INIT @@ -227,9 +228,7 @@ export default { $(elm).parent().replaceWith(`
${diagramContent}`)
})
- this.previewHTML = DOMPurify.sanitize($.html(), {
- ADD_TAGS: ['foreignObject']
- })
+ this.previewHTML = drawioSanitize($.html())
},
/**
* Insert content at cursor
diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index 4ca6e192c5..722a948018 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -226,6 +226,7 @@ import mermaid from 'mermaid'
import katexHelper from './common/katex'
import tabsetHelper from './markdown/tabset'
import cmFold from './common/cmFold'
+import drawioSanitize from './common/sanitize'
// ========================================
// INIT
@@ -453,9 +454,7 @@ export default {
linesMap = []
// this.$store.set('editor/content', newContent)
this.processMarkers(this.cm.firstLine(), this.cm.lastLine())
- this.previewHTML = DOMPurify.sanitize(md.render(newContent), {
- ADD_TAGS: ['foreignObject']
- })
+ this.previewHTML = drawioSanitize(md.render(newContent))
this.$nextTick(() => {
tabsetHelper.format()
this.renderMermaidDiagrams()
diff --git a/client/components/editor/editor-modal-drawio.vue b/client/components/editor/editor-modal-drawio.vue
index 9328c45e52..f11925ca98 100644
--- a/client/components/editor/editor-modal-drawio.vue
+++ b/client/components/editor/editor-modal-drawio.vue
@@ -2,7 +2,7 @@
v-card.editor-modal-drawio.animated.fadeIn(flat, tile)
iframe(
ref='drawio'
- src='https://embed.diagrams.net/?embed=1&proto=json&spin=1&saveAndExit=1&noSaveBtn=1&noExitBtn=0'
+ :src='drawioBaseUrl'
frameborder='0'
)
@@ -10,22 +10,6 @@