mdv-live 0.5.3 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/api/file.js

@@ -9,16 +9,16 @@ import mime from 'mime-types';
 import WebSocket from 'ws';
 import { getFileType } from '../utils/fileTypes.js';
 import { renderFile } from '../rendering/index.js';
-import { validatePath } from '../utils/path.js';
+import { validatePathReal } from '../utils/path.js';
 
 /**
- * Validate path and resolve to full path
+ * Validate path and resolve to full path (with symlink protection)
  * @param {string} relativePath - Relative path to validate
  * @param {string} rootDir - Root directory
- * @returns {{ valid: boolean, fullPath: string }} Validation result with full path
+ * @returns {Promise<{ valid: boolean, fullPath: string }>} Validation result with full path
  */
-function resolveAndValidate(relativePath, rootDir) {
-  if (!relativePath || !validatePath(relativePath, rootDir)) {
+async function resolveAndValidate(relativePath, rootDir) {
+  if (!relativePath || !await validatePathReal(relativePath, rootDir)) {
     return { valid: false, fullPath: '' };
   }
   return { valid: true, fullPath: path.join(rootDir, relativePath) };
@@ -92,7 +92,7 @@ export function setupFileRoutes(app) {
   // Serve raw files (for HTML preview with relative paths)
   app.get('/raw/*', async (req, res) => {
     const relativePath = req.params[0];
-    const { valid, fullPath } = resolveAndValidate(relativePath, rootDir);
+    const { valid, fullPath } = await resolveAndValidate(relativePath, rootDir);
 
     if (!relativePath || !valid) {
       return res.status(403).json({ error: 'Access denied' });
@@ -118,7 +118,7 @@ export function setupFileRoutes(app) {
   // Get file content
   app.get('/api/file', async (req, res) => {
     const { path: relativePath } = req.query;
-    const { valid, fullPath } = resolveAndValidate(relativePath, rootDir);
+    const { valid, fullPath } = await resolveAndValidate(relativePath, rootDir);
 
     if (!relativePath) {
       return res.status(400).json({ error: 'Path is required' });
@@ -174,7 +174,7 @@ export function setupFileRoutes(app) {
   // Save file content
   app.post('/api/file', async (req, res) => {
     const { path: relativePath, content } = req.body;
-    const { valid, fullPath } = resolveAndValidate(relativePath, rootDir);
+    const { valid, fullPath } = await resolveAndValidate(relativePath, rootDir);
 
     if (!relativePath) {
       return res.status(400).json({ error: 'Path is required' });
@@ -195,7 +195,7 @@ export function setupFileRoutes(app) {
   // Delete file or directory
   app.delete('/api/file', async (req, res) => {
     const { path: relativePath } = req.query;
-    const { valid, fullPath } = resolveAndValidate(relativePath, rootDir);
+    const { valid, fullPath } = await resolveAndValidate(relativePath, rootDir);
 
     if (!relativePath) {
       return res.status(400).json({ error: 'Path is required' });
@@ -225,7 +225,7 @@ export function setupFileRoutes(app) {
   // Create directory
   app.post('/api/mkdir', async (req, res) => {
     const { path: relativePath } = req.body;
-    const { valid, fullPath } = resolveAndValidate(relativePath, rootDir);
+    const { valid, fullPath } = await resolveAndValidate(relativePath, rootDir);
 
     if (!relativePath) {
       return res.status(400).json({ error: 'Path is required' });
@@ -251,8 +251,8 @@ export function setupFileRoutes(app) {
       return res.status(400).json({ error: 'Source and destination are required' });
     }
 
-    const sourceResult = resolveAndValidate(source, rootDir);
-    const destResult = resolveAndValidate(destination, rootDir);
+    const sourceResult = await resolveAndValidate(source, rootDir);
+    const destResult = await resolveAndValidate(destination, rootDir);
 
     if (!sourceResult.valid || !destResult.valid) {
       return res.status(403).json({ error: 'Access denied' });
@@ -270,7 +270,7 @@ export function setupFileRoutes(app) {
   // Download file (with Range Request support for video/audio streaming)
   app.get('/api/download', async (req, res) => {
     const { path: relativePath } = req.query;
-    const { valid, fullPath } = resolveAndValidate(relativePath, rootDir);
+    const { valid, fullPath } = await resolveAndValidate(relativePath, rootDir);
 
     if (!relativePath) {
       return res.status(400).json({ error: 'Path is required' });
@@ -301,6 +301,9 @@ export function setupFileRoutes(app) {
         return res.status(416).set('Content-Range', `bytes */${fileSize}`).end();
       }
       const end = Math.min(match[2] ? Number(match[2]) : fileSize - 1, fileSize - 1);
+      if (end < start) {
+        return res.status(416).set('Content-Range', `bytes */${fileSize}`).end();
+      }
       const chunkSize = end - start + 1;
       const mimeType = mime.lookup(fullPath) || 'application/octet-stream';
 

package/src/api/pdf.js

@@ -8,6 +8,7 @@ import { promisify } from 'util';
 import fs from 'fs/promises';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import os from 'os';
 import { validatePath } from '../utils/path.js';
 
 const execFileAsync = promisify(execFile);
@@ -47,22 +48,22 @@ export function setupPdfRoutes(app) {
       return res.status(404).json({ error: 'File not found' });
     }
 
-    const outputPath = fullPath.replace(/\.md$/, '.pdf');
-    const outputFileName = path.basename(outputPath);
+    const baseName = path.basename(fullPath, '.md');
+    const outputPath = path.join(os.tmpdir(), `mdv-${Date.now()}-${baseName}.pdf`);
+    const outputFileName = `${baseName}.pdf`;
 
     try {
       await execFileAsync(marpBin, [fullPath, '-o', outputPath, '--html', '--allow-local-files', '--no-stdin'], { timeout: 60000 });
-      res.download(outputPath, outputFileName, (err) => {
+      res.download(outputPath, outputFileName, async (err) => {
         if (err) {
           console.error('Download error:', err);
         }
+        try { await fs.unlink(outputPath); } catch { /* ignore cleanup errors */ }
       });
     } catch (err) {
       console.error('PDF export error:', err);
-      res.status(500).json({
-        error: 'PDF export failed',
-        details: err.message
-      });
+      try { await fs.unlink(outputPath); } catch { /* ignore */ }
+      res.status(500).json({ error: 'PDF export failed' });
     }
   });
 }

package/src/api/tree.js

@@ -5,7 +5,7 @@
 import fs from 'fs/promises';
 import path from 'path';
 import { getFileType } from '../utils/fileTypes.js';
-import { getRelativePath, validatePath } from '../utils/path.js';
+import { getRelativePath, validatePathReal } from '../utils/path.js';
 
 const IGNORED_PATTERNS = new Set(['node_modules', '__pycache__', '.git']);
 const MAX_INITIAL_DEPTH = 1;
@@ -100,13 +100,12 @@ export function setupTreeRoutes(app) {
         return res.status(400).json({ error: 'Path is required' });
       }
 
-      const fullPath = path.join(app.locals.rootDir, relativePath);
-
-      // Security: ensure path is within root
-      if (!validatePath(relativePath, app.locals.rootDir)) {
+      // Security: validate before resolving path (with symlink check)
+      if (!await validatePathReal(relativePath, app.locals.rootDir)) {
         return res.status(403).json({ error: 'Access denied' });
       }
 
+      const fullPath = path.join(app.locals.rootDir, relativePath);
       const children = await buildFileTree(fullPath, app.locals.rootDir, 0);
       res.json(children);
     } catch (err) {

package/src/server.js

@@ -67,7 +67,9 @@ export function createMdvServer(options) {
 
   setupApiRoutes(app);
 
-  app.get('/', (req, res) => {
+  // Catch-all: serve index.html for SPA (path-based routing)
+  // Express matches routes in order, so API/static routes above take priority
+  app.get('*', (req, res) => {
     res.sendFile(path.join(STATIC_DIR, 'index.html'));
   });
 

package/src/static/app.js

@@ -93,14 +93,13 @@
     // ============================================================
 
     function updateUrlPath(path) {
-        const url = new URL(window.location);
         if (path) {
-            // パスの/をエンコードせずに表示
-            url.search = '?path=' + encodeURIComponent(path).replace(/%2F/g, '/');
+            // パスベースURL: /README.md, /04_提案/10億円戦略.md
+            const encoded = path.split('/').map(s => encodeURIComponent(s)).join('/');
+            history.replaceState(null, '', '/' + encoded);
         } else {
-            url.search = '';
+            history.replaceState(null, '', '/');
         }
-        history.replaceState(null, '', url);
     }
 
     // ============================================================
@@ -430,7 +429,7 @@
 
             // 展開済みディレクトリを復元（子要素も再取得）
             for (const path of expandedPaths) {
-                const item = document.querySelector(`.tree-item[data-path="${path}"]`);
+                const item = document.querySelector(`.tree-item[data-path="${CSS.escape(path)}"]`);
                 if (item) {
                     const children = item.querySelector('.tree-children');
                     const chevron = item.querySelector('.chevron');
@@ -461,8 +460,10 @@
 
         renderDirectory(item) {
             const loaded = item.loaded !== false;
+            const safePath = escapeHtml(item.path);
+            const safeName = escapeHtml(item.name);
             return `
-                <div class="tree-item" data-path="${item.path}" data-loaded="${loaded}" draggable="true">
+                <div class="tree-item" data-path="${safePath}" data-loaded="${loaded}" draggable="true">
                     <div class="tree-item-content" onclick="MDV.toggleDirectory(this)">
                         <svg class="chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
@@ -470,7 +471,7 @@
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                         </svg>
-                        <span class="name">${item.name}</span>
+                        <span class="name">${safeName}</span>
                     </div>
                     <div class="tree-children collapsed">${this.renderItems(item.children)}</div>
                 </div>
@@ -501,7 +502,7 @@
             for (const part of parts) {
                 currentPath = currentPath ? `${currentPath}/${part}` : part;
 
-                const item = document.querySelector(`.tree-item[data-path="${currentPath}"]`);
+                const item = document.querySelector(`.tree-item[data-path="${CSS.escape(currentPath)}"]`);
                 if (!item) continue;
 
                 const children = item.querySelector('.tree-children');
@@ -525,13 +526,15 @@
         renderFile(item) {
             const iconClass = item.icon ? `icon-${item.icon}` : '';
             const iconSvg = getFileIcon(item.icon);
+            const safePath = escapeHtml(item.path);
+            const safeName = escapeHtml(item.name);
             return `
-                <div class="tree-item" data-path="${item.path}" draggable="true">
-                    <div class="tree-item-content" onclick="MDV.openFile('${item.path}')">
+                <div class="tree-item" data-path="${safePath}" draggable="true">
+                    <div class="tree-item-content" data-action="open">
                         <span class="${iconClass}" style="margin-left: 22px; display: flex; align-items: center;">
                             ${iconSvg}
                         </span>
-                        <span class="name">${item.name}</span>
+                        <span class="name">${safeName}</span>
                     </div>
                 </div>
             `;
@@ -543,7 +546,7 @@
             });
             if (state.activeTabIndex >= 0) {
                 const path = state.tabs[state.activeTabIndex].path;
-                const el = document.querySelector(`.tree-item[data-path="${path}"] > .tree-item-content`);
+                const el = document.querySelector(`.tree-item[data-path="${CSS.escape(path)}"] > .tree-item-content`);
                 if (el) el.classList.add('active');
             }
         }
@@ -857,29 +860,32 @@
 
         renderImage(imageUrl, name) {
             const url = imageUrl + '&t=' + Date.now();
+            const safeName = escapeHtml(name);
             elements.content.innerHTML = `
                 <div class="image-preview">
-                    <img src="${url}" alt="${name}" />
-                    <div class="image-info">${name}</div>
+                    <img src="${url}" alt="${safeName}" />
+                    <div class="image-info">${safeName}</div>
                 </div>
             `;
         },
 
         renderPDF(pdfUrl, name) {
             const url = pdfUrl + '&t=' + Date.now();
+            const safeName = escapeHtml(name);
             elements.content.style.padding = '0';
             elements.content.innerHTML = `
                 <div class="pdf-viewer">
-                    <iframe src="${url}" title="${name}"></iframe>
+                    <iframe src="${url}" title="${safeName}"></iframe>
                 </div>
             `;
         },
 
         renderHTML(htmlUrl, name) {
+            const safeName = escapeHtml(name);
             elements.content.style.padding = '0';
             elements.content.innerHTML = `
                 <div class="html-preview">
-                    <iframe src="${htmlUrl}" title="${name}"
+                    <iframe src="${htmlUrl}" title="${safeName}"
                         sandbox="allow-scripts allow-same-origin allow-forms allow-modals">
                     </iframe>
                 </div>
@@ -887,35 +893,38 @@
         },
 
         renderVideo(mediaUrl, name) {
+            const safeName = escapeHtml(name);
             elements.content.innerHTML = `
                 <div class="video-preview">
                     <video controls>
                         <source src="${mediaUrl}" type="video/mp4">
                         お使いのブラウザは動画再生に対応していません。
                     </video>
-                    <div class="media-info">${name}</div>
+                    <div class="media-info">${safeName}</div>
                 </div>
             `;
         },
 
         renderAudio(mediaUrl, name) {
+            const safeName = escapeHtml(name);
             elements.content.innerHTML = `
                 <div class="audio-preview">
                     <audio controls>
                         <source src="${mediaUrl}">
                         お使いのブラウザは音声再生に対応していません。
                     </audio>
-                    <div class="media-info">${name}</div>
+                    <div class="media-info">${safeName}</div>
                 </div>
             `;
         },
 
         renderBinary(name, icon) {
+            const safeName = escapeHtml(name);
             const iconSvg = getFileIcon(icon);
             elements.content.innerHTML = `
                 <div class="binary-preview">
                     <div class="binary-icon">${iconSvg}</div>
-                    <div class="binary-info">${name}</div>
+                    <div class="binary-info">${safeName}</div>
                 </div>
             `;
         },
@@ -1015,6 +1024,22 @@
         },
 
         close(index) {
+            // Warn about unsaved changes
+            if (state.isEditMode && state.hasUnsavedChanges && index === state.activeTabIndex) {
+                DialogManager.show('未保存の変更', {
+                    message: '変更を保存せずにタブを閉じますか？',
+                    isConfirm: true,
+                    danger: true,
+                    confirmText: '閉じる',
+                    onConfirm: () => {
+                        state.hasUnsavedChanges = false;
+                        state.isEditMode = false;
+                        EditorManager.updateButton();
+                        TabManager.close(index);
+                    }
+                });
+                return;
+            }
             state.tabs.splice(index, 1);
 
             if (state.tabs.length === 0) {
@@ -1040,7 +1065,7 @@
         render() {
             elements.tabBar.innerHTML = state.tabs.map((tab, i) => `
                 <button class="tab ${i === state.activeTabIndex ? 'active' : ''}" onclick="MDV.switchTab(${i})">
-                    ${tab.name}
+                    ${escapeHtml(tab.name)}
                     <span class="tab-close" onclick="event.stopPropagation(); MDV.closeTab(${i})">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -1885,7 +1910,7 @@
             const isTextInput = document.activeElement.tagName === 'INPUT' ||
                                 document.activeElement.tagName === 'TEXTAREA';
 
-            const activeItem = document.querySelector(`.tree-item[data-path="${this.selectedTreePath}"]`);
+            const activeItem = document.querySelector(`.tree-item[data-path="${CSS.escape(this.selectedTreePath)}"]`);
             const isDir = activeItem && !!activeItem.querySelector('.tree-children');
 
             if ((key === 'Delete' || key === 'Backspace') && !isTextInput) {
@@ -1918,6 +1943,14 @@
                 if (treeItem) {
                     this.selectedTreePath = treeItem.dataset.path;
                 }
+                // Event delegation for file open (replaces inline onclick)
+                const openTarget = e.target.closest('[data-action="open"]');
+                if (openTarget) {
+                    const item = openTarget.closest('.tree-item');
+                    if (item && item.dataset.path) {
+                        TabManager.open(item.dataset.path);
+                    }
+                }
             });
         }
     };
@@ -1997,6 +2030,14 @@
         ContextMenuManager.init();
         DragDropManager.init();
         KeyboardManager.init();
+
+        // Warn before leaving with unsaved changes
+        window.addEventListener('beforeunload', (e) => {
+            if (state.isEditMode && state.hasUnsavedChanges) {
+                e.preventDefault();
+                e.returnValue = '';
+            }
+        });
         TabManager.render();
 
         try {
@@ -2017,19 +2058,83 @@
         });
         window.addEventListener('focus', handleFocusChange);
 
-        const initialPath = new URLSearchParams(window.location.search).get('path');
+        // パスベースURL: /README.md → path = "README.md"
+        // ?path= も後方互換で対応
+        let initialPath = decodeURIComponent(window.location.pathname).replace(/^\//, '');
+        if (!initialPath) {
+            initialPath = new URLSearchParams(window.location.search).get('path') || '';
+        }
         if (initialPath) {
-            // 末尾の/でディレクトリ判定
             const isDirectoryPath = initialPath.endsWith('/');
             const cleanPath = isDirectoryPath ? initialPath.slice(0, -1) : initialPath;
 
             await FileTreeManager.expandToPath(cleanPath);
 
-            // ファイルの場合のみ開く
             if (!isDirectoryPath) {
                 await TabManager.open(cleanPath);
             }
         }
+
+        // Markdown内リンクのクリックをインターセプト
+        elements.content.addEventListener('click', (e) => {
+            const link = e.target.closest('a[href]');
+            if (!link) return;
+
+            const href = link.getAttribute('href');
+            if (!href) return;
+
+            // 外部リンク・非HTTPスキーム・アンカーはブラウザに任せる
+            if (href.startsWith('#') || href.startsWith('http') || href.startsWith('//') ||
+                /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(href)) return;
+
+            e.preventDefault();
+
+            // フラグメントを保持しつつパスを取り出す
+            const hashIndex = href.indexOf('#');
+            const fragment = hashIndex >= 0 ? href.slice(hashIndex + 1) : '';
+            const urlPath = (hashIndex >= 0 ? href.slice(0, hashIndex) : href).split('?')[0];
+            const decoded = decodeURIComponent(urlPath);
+
+            // 相対パスを現在のファイルパスから解決
+            let targetPath = decoded;
+            if (!decoded.startsWith('/')) {
+                const currentTab = state.tabs[state.activeTabIndex];
+                const currentDir = currentTab ? currentTab.path.replace(/[^/]*$/, '') : '';
+                targetPath = currentDir + decoded;
+            } else {
+                targetPath = decoded.replace(/^\//, '');
+            }
+
+            // 末尾スラッシュ（ディレクトリ）を保持
+            const isDirectory = targetPath.endsWith('/');
+
+            // パス正規化（foo/../bar → bar）
+            const parts = targetPath.split('/');
+            const resolved = [];
+            for (const part of parts) {
+                if (part === '..') resolved.pop();
+                else if (part !== '.' && part !== '') resolved.push(part);
+            }
+            targetPath = resolved.join('/');
+
+            if (isDirectory) {
+                // ディレクトリはツリーを展開
+                FileTreeManager.expandToPath(targetPath);
+                updateUrlPath(targetPath + '/');
+            } else {
+                TabManager.open(targetPath).then(() => {
+                    // フラグメントがあればアンカーにスクロール
+                    if (fragment) {
+                        const decodedFragment = decodeURIComponent(fragment);
+                        // id一致 → heading textContent一致 の順で検索
+                        const target = elements.content.querySelector(`#${CSS.escape(decodedFragment)}`) ||
+                            Array.from(elements.content.querySelectorAll('h1, h2, h3, h4, h5, h6'))
+                                .find(h => h.textContent.trim().toLowerCase() === decodedFragment.toLowerCase());
+                        if (target) target.scrollIntoView({ behavior: 'smooth' });
+                    }
+                });
+            }
+        });
     }
 
     // DOMContentLoadedを待ってから初期化

package/src/utils/path.js

@@ -3,6 +3,7 @@
  */
 
 import path from 'path';
+import fs from 'fs/promises';
 
 /**
  * Validate that a path is within the allowed root directory.
@@ -34,6 +35,44 @@ export function validatePath(targetPath, rootDir) {
   return resolved === resolvedRoot || resolved.startsWith(resolvedRoot + path.sep);
 }
 
+/**
+ * Validate path with symlink resolution.
+ * Calls validatePath first, then verifies the real filesystem path stays within rootDir.
+ * @param {string} targetPath - Relative path to validate
+ * @param {string} rootDir - Allowed root directory
+ * @returns {Promise<boolean>} True if path is safe after symlink resolution
+ */
+export async function validatePathReal(targetPath, rootDir) {
+  if (!validatePath(targetPath, rootDir)) {
+    return false;
+  }
+
+  const fullPath = path.resolve(rootDir, targetPath);
+  try {
+    const realPath = await fs.realpath(fullPath);
+    const realRoot = await fs.realpath(rootDir);
+    return realPath === realRoot || realPath.startsWith(realRoot + path.sep);
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      // File/dir doesn't exist yet — walk up to find nearest existing ancestor
+      const realRoot = await fs.realpath(rootDir);
+      let current = fullPath;
+      while (current !== path.dirname(current)) {
+        current = path.dirname(current);
+        try {
+          const realAncestor = await fs.realpath(current);
+          return realAncestor === realRoot || realAncestor.startsWith(realRoot + path.sep);
+        } catch (e) {
+          if (e.code !== 'ENOENT') return false;
+          // Keep walking up
+        }
+      }
+      return false;
+    }
+    return false;
+  }
+}
+
 /**
  * Convert absolute path to relative path with forward slashes
  * @param {string} fullPath - Absolute file path

package/src/websocket.js

@@ -19,7 +19,7 @@ function isClientReady(client) {
  * @returns {WebSocketServer} WebSocket server instance
  */
 export function setupWebSocket(server) {
-  const wss = new WebSocketServer({ server });
+  const wss = new WebSocketServer({ server, maxPayload: 64 * 1024 });
   const clientWatches = new Map();
 
   wss.on('connection', (ws) => {
@@ -30,6 +30,7 @@ export function setupWebSocket(server) {
         const message = JSON.parse(data.toString());
 
         if (message.type === 'watch') {
+          if (typeof message.path !== 'string' || message.path.length > 1024) return;
           const watches = clientWatches.get(ws);
           watches.clear();
           watches.add(message.path);