Bump version to 1.0.22-beta with security hardening

bydb · claude · bydb · commit 4a36a17c028c · 2026-02-08T17:12:27.000+01:00
Add DOMPurify HTML sanitization across all dangerouslySetInnerHTML
and innerHTML usages. Escape user-controlled values in templates.
Set Mermaid securityLevel to strict, KaTeX trust to false.
Add useShallow selectors to prevent unnecessary re-renders.
Cache loaded images in renderedMarkdown to survive re-renders.
Update website download links and changelog.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 Alle nennenswerten Änderungen an diesem Projekt werden hier dokumentiert.
 
+## [1.0.22-beta] - 2026-02-08
+
+### Security
+- **DOMPurify HTML-Sanitization**: Alle `dangerouslySetInnerHTML`- und `innerHTML`-Ausgaben werden jetzt mit DOMPurify sanitized — verhindert XSS über bösartige Markdown-Dateien, SVGs oder AI-Antworten
+- **SVG-Sanitization**: SVG-Dateien im ImageViewer werden mit spezieller SVG-Sanitization gerendert (Script-Tags, Event-Handler und foreignObject werden entfernt)
+- **HTML-Escaping**: Alle user-kontrollierten Werte (Dateinamen, Notiz-Namen, Fehlermeldungen) in innerHTML-Templates werden jetzt HTML-escaped
+- **Mermaid Security**: `securityLevel` von `loose` auf `strict` geändert — verhindert Click-Callbacks und HTML-Labels in Diagrammen
+- **KaTeX Trust**: `trust` von `true` auf `false` geändert — blockiert potenziell gefährliche KaTeX-Befehle
+- **Zustand Selector-Optimierung**: `useShallow` für Store-Aufrufe im MarkdownEditor — verhindert unnötige Re-Renders bei Panel-Wechseln
+
+### Fixes
+- **Preview-Bilder bei Panel-Wechsel**: Geladene Bilder werden jetzt gecacht und direkt in den HTML-String eingebettet — SVGs/Bilder verschwinden nicht mehr beim Öffnen von Karteikarten oder anderen Panels
+
 ## [1.0.21-beta] - 2026-02-08
 
 ### Features
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mindgraph-notes",
-  "version": "1.0.21-beta",
+  "version": "1.0.22-beta",
   "description": "Eine minimalistische Markdown-Notizen-App mit editierbarer Graph View",
   "main": "out/main/index.js",
   "scripts": {
@@ -80,6 +80,7 @@
     }
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
@@ -100,6 +101,7 @@
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "chokidar": "^5.0.0",
+    "dompurify": "^3.3.1",
     "html-to-image": "^1.11.13",
     "katex": "^0.16.27",
     "markdown-it": "^14.1.0",
diff --git a/app/src/renderer/components/Editor/MarkdownEditor.tsx b/app/src/renderer/components/Editor/MarkdownEditor.tsx
diff --git a/app/src/renderer/components/Editor/extensions/dataview/widget.ts b/app/src/renderer/components/Editor/extensions/dataview/widget.ts
@@ -7,6 +7,7 @@ import { WidgetType } from '@codemirror/view'
 import type { Note } from '../../../../../shared/types'
 import { renderResult } from '../../../../utils/dataview'
 import { useDataviewStore } from '../../../../stores/dataviewStore'
+import { sanitizeHtml, escapeHtml } from '../../../../utils/sanitize'
 
 export class DataviewWidget extends WidgetType {
   private container: HTMLElement | null = null
@@ -64,7 +65,7 @@ export class DataviewWidget extends WidgetType {
       console.log('[DataviewWidget] Rendered HTML length:', html.length)
 
       if (this.container) {
-        this.container.innerHTML = html
+        this.container.innerHTML = sanitizeHtml(html)
 
         // Add click handlers for note links
         this.setupLinkHandlers()
@@ -74,7 +75,7 @@ export class DataviewWidget extends WidgetType {
       if (this.container) {
         this.container.innerHTML = `<div class="dataview-error">
           <span class="dataview-error-icon">⚠️</span>
-          <span class="dataview-error-message">Error: ${error instanceof Error ? error.message : 'Unknown error'}</span>
+          <span class="dataview-error-message">Error: ${escapeHtml(error instanceof Error ? error.message : 'Unknown error')}</span>
         </div>`
       }
     }
diff --git a/app/src/renderer/components/Editor/extensions/livePreview/widgets.ts b/app/src/renderer/components/Editor/extensions/livePreview/widgets.ts
@@ -1,4 +1,5 @@
 import { WidgetType } from '@codemirror/view'
+import { escapeHtml } from '../../../../utils/sanitize'
 
 /**
  * Widget for rendered wikilinks
@@ -390,7 +391,7 @@ export class PdfEmbedWidget extends WidgetType {
           <path d="M4 1C3.45 1 3 1.45 3 2V14C3 14.55 3.45 15 4 15H12C12.55 15 13 14.55 13 14V5.41C13 5.15 12.89 4.9 12.71 4.71L10.29 2.29C10.1 2.11 9.85 2 9.59 2H4Z" fill="#ffebee" stroke="#e53935" strokeWidth="0.8"/>
           <text x="8" y="11" text-anchor="middle" font-size="5" font-weight="bold" fill="#e53935">PDF</text>
         </svg>
-        <span class="lp-pdf-filename">${this.filename}</span>
+        <span class="lp-pdf-filename">${escapeHtml(this.filename)}</span>
       `
       container.appendChild(header)
 
@@ -420,7 +421,7 @@ export class PdfEmbedWidget extends WidgetType {
         console.log('[PdfEmbed] iframe added to container')
       } catch (e) {
         console.error('[PdfEmbed] Error creating PDF view:', e)
-        container.innerHTML += `<div class="lp-pdf-error">Error: ${e}</div>`
+        container.innerHTML += `<div class="lp-pdf-error">Error: ${escapeHtml(String(e))}</div>`
       }
     } else {
       // PDF not found
@@ -430,7 +431,7 @@ export class PdfEmbedWidget extends WidgetType {
             <path d="M4 1C3.45 1 3 1.45 3 2V14C3 14.55 3.45 15 4 15H12C12.55 15 13 14.55 13 14V5.41C13 5.15 12.89 4.9 12.71 4.71L10.29 2.29C10.1 2.11 9.85 2 9.59 2H4Z" fill="#ffebee" stroke="#e53935" strokeWidth="0.8"/>
             <text x="8" y="11" text-anchor="middle" font-size="5" font-weight="bold" fill="#e53935">PDF</text>
           </svg>
-          <span>PDF nicht gefunden: ${this.filename}</span>
+          <span>PDF nicht gefunden: ${escapeHtml(this.filename)}</span>
         </div>
       `
     }
diff --git a/app/src/renderer/components/Flashcards/MarkdownContent.tsx b/app/src/renderer/components/Flashcards/MarkdownContent.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import MarkdownIt from 'markdown-it'
+import { sanitizeHtml } from '../../utils/sanitize'
 import texmath from 'markdown-it-texmath'
 import katex from 'katex'
 import 'katex/dist/katex.min.css'
@@ -10,7 +11,7 @@ import mermaid from 'mermaid'
 mermaid.initialize({
   startOnLoad: false,
   theme: 'dark',
-  securityLevel: 'loose',
+  securityLevel: 'strict',
   fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif'
 })
 
@@ -28,7 +29,7 @@ md.use(texmath, {
   delimiters: 'dollars',  // $...$ für inline, $$...$$ für block
   katexOptions: {
     throwOnError: false,
-    trust: true,
+    trust: false,
     strict: false,
     displayMode: false
   }
@@ -95,7 +96,7 @@ export const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, class
     <div
       ref={containerRef}
       className={`markdown-content ${className}`}
-      dangerouslySetInnerHTML={{ __html: html }}
+      dangerouslySetInnerHTML={{ __html: sanitizeHtml(html) }}
     />
   )
 }
diff --git a/app/src/renderer/components/ImageViewer/ImageViewer.tsx b/app/src/renderer/components/ImageViewer/ImageViewer.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react'
+import { sanitizeSvg } from '../../utils/sanitize'
 import './ImageViewer.css'
 
 interface ImageViewerProps {
@@ -170,7 +171,7 @@ export const ImageViewer: React.FC<ImageViewerProps> = ({ filePath, fileName })
           <div
             className="image-container svg-container"
             style={{ transform: `scale(${zoom / 100})` }}
-            dangerouslySetInnerHTML={{ __html: svgContent }}
+            dangerouslySetInnerHTML={{ __html: sanitizeSvg(svgContent) }}
           />
         )}
       </div>
diff --git a/app/src/renderer/components/NotesChat/NotesChat.tsx b/app/src/renderer/components/NotesChat/NotesChat.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { sanitizeHtml } from '../../utils/sanitize'
 import { useNotesStore } from '../../stores/notesStore'
 import { useUIStore } from '../../stores/uiStore'
 import { useTranslation } from '../../utils/translations'
@@ -474,7 +475,7 @@ export const NotesChat: React.FC<NotesChatProps> = ({ onClose }) => {
                   <div key={idx} className={`notes-chat-message ${msg.role}`}>
                     <div
                       className="notes-chat-message-content markdown-content"
-                      dangerouslySetInnerHTML={{ __html: md.render(msg.content) }}
+                      dangerouslySetInnerHTML={{ __html: sanitizeHtml(md.render(msg.content)) }}
                     />
                     {msg.role === 'assistant' && (
                       <button
@@ -500,7 +501,7 @@ export const NotesChat: React.FC<NotesChatProps> = ({ onClose }) => {
                   <div className="notes-chat-message assistant streaming">
                     <div
                       className="notes-chat-message-content markdown-content"
-                      dangerouslySetInnerHTML={{ __html: md.render(streamingContent) + '<span class="notes-chat-cursor">|</span>' }}
+                      dangerouslySetInnerHTML={{ __html: sanitizeHtml(md.render(streamingContent)) + '<span class="notes-chat-cursor">|</span>' }}
                     />
                   </div>
                 )}
diff --git a/app/src/renderer/components/WhatsNew/WhatsNew.tsx b/app/src/renderer/components/WhatsNew/WhatsNew.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react'
 import MarkdownIt from 'markdown-it'
+import { sanitizeHtml } from '../../utils/sanitize'
 import { useUIStore } from '../../stores/uiStore'
 import { useTranslation } from '../../utils/translations'
 
@@ -79,7 +80,7 @@ export const WhatsNew: React.FC = () => {
           ) : content ? (
             <div
               className="whats-new-markdown"
-              dangerouslySetInnerHTML={{ __html: renderedContent }}
+              dangerouslySetInnerHTML={{ __html: sanitizeHtml(renderedContent) }}
             />
           ) : (
             <div className="whats-new-empty">{t('whatsNew.noContent')}</div>
diff --git a/app/src/renderer/utils/sanitize.ts b/app/src/renderer/utils/sanitize.ts
@@ -0,0 +1,84 @@
+import DOMPurify from 'dompurify'
+
+// Allow common markdown HTML elements, data attributes for our app, and SVG
+const ALLOWED_TAGS = [
+  // Block elements
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div', 'span', 'pre', 'code',
+  'blockquote', 'ul', 'ol', 'li', 'hr', 'br', 'table', 'thead', 'tbody',
+  'tr', 'th', 'td', 'figure', 'figcaption', 'details', 'summary',
+  // Inline elements
+  'a', 'strong', 'em', 'b', 'i', 'u', 's', 'del', 'ins', 'mark', 'sub', 'sup',
+  'abbr', 'small', 'img', 'input', 'label',
+  // SVG elements (for inline SVGs and KaTeX)
+  'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse',
+  'g', 'text', 'tspan', 'defs', 'use', 'symbol', 'clipPath', 'mask',
+  'linearGradient', 'radialGradient', 'stop', 'pattern', 'image',
+  'foreignObject', 'marker', 'title', 'desc',
+  // KaTeX elements
+  'math', 'semantics', 'mrow', 'mi', 'mo', 'mn', 'ms', 'mtext',
+  'msup', 'msub', 'msubsup', 'mfrac', 'mroot', 'msqrt', 'mtable',
+  'mtr', 'mtd', 'mover', 'munder', 'munderover', 'menclose',
+  'annotation', 'annotation-xml',
+  // Mermaid
+  'iframe',
+]
+
+const ALLOWED_ATTR = [
+  // Standard HTML
+  'class', 'id', 'style', 'href', 'src', 'alt', 'title', 'width', 'height',
+  'type', 'checked', 'disabled', 'name', 'value', 'target', 'rel',
+  'colspan', 'rowspan', 'open',
+  // Data attributes (used extensively by our app)
+  'data-src', 'data-link', 'data-fragment', 'data-note', 'data-embed-type',
+  'data-callout-type', 'data-processed', 'data-heading-id', 'data-checkbox-index',
+  'data-line', 'data-block-id',
+  // SVG attributes
+  'viewBox', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin',
+  'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2',
+  'points', 'transform', 'opacity', 'font-size', 'font-weight', 'font-family',
+  'text-anchor', 'dominant-baseline', 'xmlns', 'xmlns:xlink', 'xlink:href',
+  'clip-path', 'mask', 'marker-end', 'marker-start', 'marker-mid',
+  'gradientUnits', 'gradientTransform', 'offset', 'stop-color', 'stop-opacity',
+  'patternUnits', 'patternTransform', 'preserveAspectRatio',
+  // KaTeX
+  'mathvariant', 'encoding', 'stretchy', 'fence', 'separator', 'accent',
+  'accentunder', 'columnalign', 'columnlines', 'columnspacing',
+  'rowalign', 'rowlines', 'rowspacing', 'displaystyle', 'scriptlevel',
+]
+
+/**
+ * Sanitize HTML content for safe rendering via dangerouslySetInnerHTML.
+ * Strips all scripts, event handlers, and dangerous elements while preserving
+ * common markdown HTML, SVG, KaTeX, and our app's data attributes.
+ */
+export function sanitizeHtml(dirty: string): string {
+  return DOMPurify.sanitize(dirty, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ALLOW_DATA_ATTR: true,
+    ADD_URI_SAFE_ATTR: ['data-src', 'data-link', 'xlink:href'],
+  })
+}
+
+/**
+ * Sanitize SVG content specifically.
+ * More restrictive — strips foreignObject and any non-SVG elements.
+ */
+export function sanitizeSvg(dirty: string): string {
+  return DOMPurify.sanitize(dirty, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    ADD_TAGS: ['style'],
+    ADD_ATTR: ['class', 'id', 'style', 'xmlns', 'xmlns:xlink', 'xlink:href'],
+    FORBID_TAGS: ['script', 'foreignObject'],
+  })
+}
+
+/**
+ * Escape a string for safe insertion into HTML.
+ * Use this for user-controlled values in template literals.
+ */
+export function escapeHtml(str: string): string {
+  const div = document.createElement('div')
+  div.textContent = str
+  return div.innerHTML
+}
diff --git a/docs/index.html b/docs/index.html
