Make sanitization configurable

browser/components/MarkdownEditor.js

@@ -280,6 +280,7 @@ class MarkdownEditor extends React.Component {
           indentSize={editorIndentSize}
           scrollPastEnd={config.preview.scrollPastEnd}
           smartQuotes={config.preview.smartQuotes}
+          sanitize={config.preview.sanitize}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           onDoubleClick={(e) => this.handleDoubleClick(e)}

browser/components/MarkdownPreview.js

@@ -135,8 +135,11 @@ export default class MarkdownPreview extends React.Component {
   }
 
   initMarkdown () {
-    const { smartQuotes } = this.props
+    const { smartQuotes, sanitize } = this.props
-    this.markdown = new Markdown({ typographer: smartQuotes })
+    this.markdown = new Markdown({
+      typographer: smartQuotes,
+      sanitize
+    })
   }
 
   handlePreviewAnchorClick (e) {
@@ -318,7 +321,7 @@ export default class MarkdownPreview extends React.Component {
 
   componentDidUpdate (prevProps) {
     if (prevProps.value !== this.props.value) this.rewriteIframe()
-    if (prevProps.smartQuotes !== this.props.smartQuotes) {
+    if (prevProps.smartQuotes !== this.props.smartQuotes || prevProps.sanitize !== this.props.sanitize) {
       this.initMarkdown()
       this.rewriteIframe()
     }

browser/components/MarkdownSplitEditor.js

@@ -128,6 +128,7 @@ class MarkdownSplitEditor extends React.Component {
           lineNumber={config.preview.lineNumber}
           scrollPastEnd={config.preview.scrollPastEnd}
           smartQuotes={config.preview.smartQuotes}
+          sanitize={config.preview.sanitize}
           ref='preview'
           tabInde='0'
           value={value}

browser/lib/markdown.js

@@ -45,52 +45,62 @@ class Markdown {
           '<code class="' + langType + '">' +
           str +
           '</code></pre>'
-      }
+      },
+      sanitize: 'STRICT'
     }
 
     const updatedOptions = Object.assign(defaultOptions, options)
     this.md = markdownit(updatedOptions)
 
-    // Sanitize use rinput before other plugins
+    if (updatedOptions.sanitize !== 'NONE') {
-    this.md.use(sanitize, {
+      const allowedTags = ['iframe', 'input', 'b',
-      allowedTags: ['iframe', 'input', 'b',
         'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8', 'br', 'b', 'i', 'strong', 'em', 'a', 'pre', 'code', 'img', 'tt',
         'div', 'ins', 'del', 'sup', 'sub', 'p', 'ol', 'ul', 'table', 'thead', 'tbody', 'tfoot', 'blockquote',
         'dl', 'dt', 'dd', 'kbd', 'q', 'samp', 'var', 'hr', 'ruby', 'rt', 'rp', 'li', 'tr', 'td', 'th', 's', 'strike', 'summary', 'details'
-      ],
+      ]
-      allowedAttributes: {
+      const allowedAttributes = [
-        '*': [
+        'abbr', 'accept', 'accept-charset',
-          'style',
+        'accesskey', 'action', 'align', 'alt', 'axis',
-          'abbr', 'accept', 'accept-charset',
+        'border', 'cellpadding', 'cellspacing', 'char',
-          'accesskey', 'action', 'align', 'alt', 'axis',
+        'charoff', 'charset', 'checked',
-          'border', 'cellpadding', 'cellspacing', 'char',
+        'clear', 'cols', 'colspan', 'color',
-          'charoff', 'charset', 'checked',
+        'compact', 'coords', 'datetime', 'dir',
-          'clear', 'cols', 'colspan', 'color',
+        'disabled', 'enctype', 'for', 'frame',
-          'compact', 'coords', 'datetime', 'dir',
+        'headers', 'height', 'hreflang',
-          'disabled', 'enctype', 'for', 'frame',
+        'hspace', 'ismap', 'label', 'lang',
-          'headers', 'height', 'hreflang',
+        'maxlength', 'media', 'method',
-          'hspace', 'ismap', 'label', 'lang',
+        'multiple', 'name', 'nohref', 'noshade',
-          'maxlength', 'media', 'method',
+        'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev',
-          'multiple', 'name', 'nohref', 'noshade',
+        'rows', 'rowspan', 'rules', 'scope',
-          'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev',
+        'selected', 'shape', 'size', 'span',
-          'rows', 'rowspan', 'rules', 'scope',
+        'start', 'summary', 'tabindex', 'target',
-          'selected', 'shape', 'size', 'span',
+        'title', 'type', 'usemap', 'valign', 'value',
-          'start', 'summary', 'tabindex', 'target',
+        'vspace', 'width', 'itemprop'
-          'title', 'type', 'usemap', 'valign', 'value',
+      ]
-          'vspace', 'width', 'itemprop'
+
-        ],
+      if (updatedOptions.sanitize === 'ALLOW_STYLES') {
-        'a': ['href'],
+        allowedTags.push('style')
-        'div': ['itemscope', 'itemtype'],
+        allowedAttributes.push('style')
-        'blockquote': ['cite'],
+      }
-        'del': ['cite'],
+
-        'ins': ['cite'],
+      // Sanitize use rinput before other plugins
-        'q': ['cite'],
+      this.md.use(sanitize, {
-        'img': ['src', 'width', 'height'],
+        allowedTags,
-        'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+        allowedAttributes: {
-        'input': ['type', 'id', 'checked']
+          '*': allowedAttributes,
-      },
+          'a': ['href'],
-      allowedIframeHostnames: ['www.youtube.com']
+          'div': ['itemscope', 'itemtype'],
-    })
+          'blockquote': ['cite'],
+          'del': ['cite'],
+          'ins': ['cite'],
+          'q': ['cite'],
+          'img': ['src', 'width', 'height'],
+          'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+          'input': ['type', 'id', 'checked']
+        },
+        allowedIframeHostnames: ['www.youtube.com']
+      })
+    }
 
     this.md.use(emoji, {
       shortcuts: {}

browser/main/lib/ConfigManager.js

@@ -51,7 +51,8 @@ export const DEFAULT_CONFIG = {
     latexBlockOpen: '$$',
     latexBlockClose: '$$',
     scrollPastEnd: false,
-    smartQuotes: true
+    smartQuotes: true,
+    sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE'
   },
   blog: {
     type: 'wordpress', // Available value: wordpress, add more types in the future plz

browser/main/modals/PreferencesModal/UiTab.js

@@ -91,7 +91,8 @@ class UiTab extends React.Component {
         latexBlockOpen: this.refs.previewLatexBlockOpen.value,
         latexBlockClose: this.refs.previewLatexBlockClose.value,
         scrollPastEnd: this.refs.previewScrollPastEnd.checked,
-        smartQuotes: this.refs.previewSmartQuotes.checked
+        smartQuotes: this.refs.previewSmartQuotes.checked,
+        sanitize: this.refs.previewSanitize.value
       }
     }
 
@@ -441,6 +442,23 @@ class UiTab extends React.Component {
               Enable smart quotes
             </label>
           </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              {i18n.__('Sanitization')}
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.preview.sanitize}
+                ref='previewSanitize'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                <option value='STRICT'>✅ {i18n.__('Only allow secure html tags (recommended)')}
+                </option>
+                <option value='ALLOW_STYLES'>⚠️ {i18n.__('Allow styles')}</option>
+                <option value='NONE'>❌ {i18n.__('Allow dangerous html tags')}</option>
+              </select>
+            </div>
+          </div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
               {i18n.__('LaTeX Inline Open Delimiter')}

locales/da.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/de.json

@@ -143,5 +143,9 @@
 	"Successfully applied!": "Erfolgreich angewendet!",
 	"UserName": "UserName",
 	"Password": "Password",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/en.json

@@ -144,5 +144,9 @@
 	"UserName": "UserName",
 	"Password": "Password",
 	"Russian": "Russian",
-	"Command(⌘)": "Command(⌘)"
+	"Command(⌘)": "Command(⌘)",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/es.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/fr.json

@@ -139,5 +139,11 @@
 	"Polish": "Polonais",
 	"Portuguese": "Portugais",
 	"Spanish": "Espagnol",
-	"You have to save!": "Il faut sauvegarder !"
+	"You have to save!": "Il faut sauvegarder !",
-	}
+	"Russian": "Russian",
+	"Allow preview to scroll past the last line": "Allow preview to scroll past the last line",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
+}

locales/ja.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/ko.json

@@ -148,5 +148,9 @@
 	"UserName": "유저명",
 	"Password": "패스워드",
 	"Storage": "저장소",
-	"Hotkeys": "단축키"
+	"Hotkeys": "단축키",
+	"Sanitization": "허용 태그 범위",
+	"Only allow secure html tags (recommended)": "안전한 HTML 태그만 허용 (추천)",
+	"Allow styles": "style 태그, 속성까지 허용",
+	"Allow dangerous html tags": "모든 위험한 태그 허용"
 }

locales/no.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/pl.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/pt.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/sq.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/zh-CN.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }

locales/zh-TW.json

@@ -141,5 +141,9 @@
 	"Portuguese": "Portuguese",
 	"Spanish": "Spanish",
 	"You have to save!": "You have to save!",
-	"Russian": "Russian"
+	"Russian": "Russian",
+	"Sanitization": "Sanitization",
+	"Only allow secure html tags (recommended)": "Only allow secure html tags (recommended)",
+	"Allow styles": "Allow styles",
+	"Allow dangerous html tags": "Allow dangerous html tags"
 }