Fix 3007 (#3028)

* fix code fences never sanitized

* fix mermaid xss

* Revert "fix mermaid xss"

This reverts commit 1ff179a1bd.

* configuable mermaid HTML label

* add locales for mermaid configuration

browser/components/MarkdownEditor.js

@@ -341,6 +341,7 @@ class MarkdownEditor extends React.Component {
           smartArrows={config.preview.smartArrows}
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           onDoubleClick={(e) => this.handleDoubleClick(e)}

browser/components/MarkdownPreview.js

@@ -560,6 +560,7 @@ export default class MarkdownPreview extends React.Component {
     if (
       prevProps.smartQuotes !== this.props.smartQuotes ||
       prevProps.sanitize !== this.props.sanitize ||
+      prevProps.mermaidHTMLLabel !== this.props.mermaidHTMLLabel ||
       prevProps.smartArrows !== this.props.smartArrows ||
       prevProps.breaks !== this.props.breaks ||
       prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox
@@ -681,7 +682,8 @@ export default class MarkdownPreview extends React.Component {
       showCopyNotification,
       storagePath,
       noteKey,
-      sanitize
+      sanitize,
+      mermaidHTMLLabel
     } = this.props
     let { value, codeBlockTheme } = this.props
 
@@ -823,7 +825,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
       el => {
-        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme)
+        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme, mermaidHTMLLabel)
       }
     )
 

browser/components/MarkdownSplitEditor.js

@@ -199,6 +199,7 @@ class MarkdownSplitEditor extends React.Component {
           smartArrows={config.preview.smartArrows}
           breaks={config.preview.breaks}
           sanitize={config.preview.sanitize}
+          mermaidHTMLLabel={config.preview.mermaidHTMLLabel}
           ref='preview'
           tabInde='0'
           value={value}

browser/components/render/MermaidRender.js

@@ -19,7 +19,7 @@ function getId () {
   return id
 }
 
-function render (element, content, theme) {
+function render (element, content, theme, enableHTMLLabel) {
   try {
     const height = element.attributes.getNamedItem('data-height')
     if (height && height.value !== 'undefined') {
@@ -29,7 +29,8 @@ function render (element, content, theme) {
     mermaidAPI.initialize({
       theme: isDarkTheme ? 'dark' : 'default',
       themeCSS: isDarkTheme ? darkThemeStyling : '',
-      useMaxWidth: false
+      useMaxWidth: false,
+      flowchart: { htmlLabels: enableHTMLLabel }
     })
     mermaidAPI.render(getId(), content, (svgGraph) => {
       element.innerHTML = svgGraph

browser/lib/markdown-it-sanitize-html.js

@@ -15,7 +15,7 @@ module.exports = function sanitizePlugin (md, options) {
           options
         )
       }
-      if (state.tokens[tokenIdx].type === '_fence') {
+      if (state.tokens[tokenIdx].type.match(/.*_fence$/)) {
         // escapeHtmlCharacters has better performance
         state.tokens[tokenIdx].content = escapeHtmlCharacters(
           state.tokens[tokenIdx].content,

browser/main/lib/ConfigManager.js

@@ -86,8 +86,10 @@ export const DEFAULT_CONFIG = {
     breaks: true,
     smartArrows: false,
     allowCustomCSS: false,
+
     customCSS: '/* Drop Your Custom CSS Code Here */',
     sanitize: 'STRICT', // 'STRICT', 'ALLOW_STYLES', 'NONE'
+    mermaidHTMLLabel: false,
     lineThroughCheckbox: true
   },
   blog: {

browser/main/modals/PreferencesModal/UiTab.js

@@ -125,6 +125,7 @@ class UiTab extends React.Component {
         breaks: this.refs.previewBreaks.checked,
         smartArrows: this.refs.previewSmartArrows.checked,
         sanitize: this.refs.previewSanitize.value,
+        mermaidHTMLLabel: this.refs.previewMermaidHTMLLabel.checked,
         allowCustomCSS: this.refs.previewAllowCustomCSS.checked,
         lineThroughCheckbox: this.refs.lineThroughCheckbox.checked,
         customCSS: this.customCSSCM.getCodeMirror().getValue()
@@ -813,6 +814,16 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.mermaidHTMLLabel}
+                ref='previewMermaidHTMLLabel'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Enable HTML label in mermaid flowcharts')}
+            </label>
+          </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
               {i18n.__('LaTeX Inline Open Delimiter')}

locales/da.json

@@ -157,5 +157,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/de.json

@@ -213,5 +213,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/en.json

@@ -188,5 +188,6 @@
 	"New notes are tagged with the filtering tags": "New notes are tagged with the filtering tags",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/es-ES.json

@@ -159,5 +159,6 @@
 	"Show menu bar": "Mostrar barra del menú",
 	"Auto Detect": "Detección automática",
 	"Snippet Default Language": "Lenguaje por defecto de los fragmentos de código",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/fa.json

@@ -161,5 +161,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/fr.json

@@ -173,5 +173,6 @@
 	"Snippet prefix": "Préfixe du snippet",
 	"Delete Note": "Supprimer la note",
 	"New notes are tagged with the filtering tags": "Les nouvelles notes sont taggées avec les tags de filtrage",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/hu.json

@@ -181,5 +181,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/it.json

@@ -161,5 +161,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/ja.json

@@ -220,5 +220,6 @@
 	"Spellcheck disabled": "スペルチェック無効",
 	"Show menu bar": "メニューバーを表示",
 	"Auto Detect": "自動検出",
+	"Enable HTML label in mermaid flowcharts": "mermaid flowchartでHTMLラベルを有効にする  ⚠ このオプションには潜在的なXSSの危険性があります。",
 	"Wrap line in Snippet Note": "行を右端で折り返す（Snippet Note）"
 }

locales/ko.json

@@ -164,5 +164,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/no.json

@@ -157,5 +157,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/pl.json

@@ -166,5 +166,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/pt-BR.json

@@ -157,5 +157,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/pt-PT.json

@@ -156,5 +156,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/ru.json

@@ -154,5 +154,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/sq.json

@@ -156,5 +156,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/th.json

@@ -183,5 +183,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/tr.json

@@ -156,5 +156,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/zh-CN.json

@@ -221,5 +221,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }

locales/zh-TW.json

@@ -165,5 +165,6 @@
 	"Spellcheck disabled": "Spellcheck disabled",
 	"Show menu bar": "Show menu bar",
 	"Auto Detect": "Auto Detect",
+	"Enable HTML label in mermaid flowcharts": "Enable HTML label in mermaid flowcharts ⚠ This option potentially has a risk of XSS.",
 	"Wrap line in Snippet Note": "Wrap line in Snippet Note"
 }