mdv-live 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.3] - 2026-03-29
+
+### Fixed
+
+- Security: exec/execSync → execFile/process.kill でコマンドインジェクション防止（PDF生成・サーバーkill）
+- Security: PIDバリデーション厳密化（数字のみ許可、部分一致を拒否）
+- Range Requestのバリデーション追加（不正ヘッダで416、end超過はRFC準拠でclamp）
+- ファイル監視の再描画でrelativeDirを渡すように修正（サブフォルダ内Markdownの画像パス解決）
+- バージョン表示をpackage.jsonから動的取得に統一（CLI・サーバー・テスト全箇所）
+
+## [0.5.2] - 2026-03-27
+
+### Fixed
+
+- CJK + Unicode句読点で太字・斜体が壊れる問題を修正
+
 ## [0.5.1] - 2026-03-20
 
 ### Fixed

package/bin/mdv.js

@@ -5,10 +5,12 @@
  * Compatible with the original Python mdv-live CLI
  */
 
-import { execSync } from 'node:child_process';
+import { execFileSync, execSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
 import fs from 'node:fs/promises';
 import { createServer as createNetServer } from 'node:net';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { parseArgs } from 'node:util';
 
 import open from 'open';
@@ -184,12 +186,17 @@ function listServers() {
 function killServers(target, killAll) {
   if (target) {
     // Kill specific PID
+    if (!/^\d+$/.test(target)) {
+      console.log(`無効なPID: ${target}`);
+      return 1;
+    }
+    const pid = Number(target);
     try {
-      execSync(`kill ${target}`, { encoding: 'utf-8' });
-      console.log(`PID ${target} を停止しました`);
+      process.kill(pid);
+      console.log(`PID ${pid} を停止しました`);
       return 0;
     } catch {
-      console.log(`PID ${target} の停止に失敗しました`);
+      console.log(`PID ${pid} の停止に失敗しました`);
       return 1;
     }
   }
@@ -214,7 +221,7 @@ function killServers(target, killAll) {
   let killed = 0;
   for (const proc of processes) {
     try {
-      execSync(`kill ${proc.pid}`, { encoding: 'utf-8' });
+      process.kill(proc.pid);
       console.log(`  PID ${proc.pid} (port ${proc.port}) を停止`);
       killed++;
     } catch {
@@ -279,7 +286,7 @@ async function convertToPdf(inputPath, outputPath) {
  */
 async function convertMarpToPdf(inputPath, outputPath) {
   try {
-    execSync(`npx @marp-team/marp-cli --no-stdin "${inputPath}" --pdf --html --allow-local-files -o "${outputPath}"`, {
+    execFileSync('npx', ['@marp-team/marp-cli', '--no-stdin', inputPath, '--pdf', '--html', '--allow-local-files', '-o', outputPath], {
       encoding: 'utf-8',
       stdio: 'inherit'
     });
@@ -302,7 +309,7 @@ async function convertMarkdownToPdf(inputPath, outputPath) {
 
   try {
     const pdfOptions = '{"format":"A4","margin":{"top":"20mm","right":"20mm","bottom":"20mm","left":"20mm"}}';
-    execSync(`npx md-to-pdf "${inputPath}" --pdf-options '${pdfOptions}'`, {
+    execFileSync('npx', ['md-to-pdf', inputPath, '--pdf-options', pdfOptions], {
       encoding: 'utf-8',
       stdio: 'inherit',
       cwd: path.dirname(inputPath)
@@ -453,7 +460,11 @@ async function main() {
   }
 
   if (values.version) {
-    console.log('mdv v0.5.0');
+    const __cliDir = path.dirname(fileURLToPath(import.meta.url));
+    const { version } = JSON.parse(
+      readFileSync(path.join(__cliDir, '..', 'package.json'), 'utf-8')
+    );
+    console.log(`mdv v${version}`);
     process.exit(0);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.2",
+  "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' });
@@ -292,9 +292,18 @@ export function setupFileRoutes(app) {
 
       // Range Request for video/audio streaming
       const fileSize = stat.size;
-      const parts = rangeHeader.replace(/bytes=/, '').split('-');
-      const start = parseInt(parts[0], 10);
-      const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
+      const match = /^bytes=(\d+)-(\d+)?$/.exec(rangeHeader);
+      if (!match) {
+        return res.status(416).set('Content-Range', `bytes */${fileSize}`).end();
+      }
+      const start = Number(match[1]);
+      if (start >= fileSize) {
+        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

@@ -3,14 +3,15 @@
  * Uses marp-cli for Marp presentations
  */
 
-import { exec } from 'child_process';
+import { execFile } from 'child_process';
 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 execAsync = promisify(exec);
+const execFileAsync = promisify(execFile);
 const marpBin = path.join(
   path.dirname(fileURLToPath(import.meta.url)),
   '..',
@@ -47,23 +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 command = `"${marpBin}" "${fullPath}" -o "${outputPath}" --html --allow-local-files --no-stdin`;
+    const baseName = path.basename(fullPath, '.md');
+    const outputPath = path.join(os.tmpdir(), `mdv-${Date.now()}-${baseName}.pdf`);
+    const outputFileName = `${baseName}.pdf`;
 
     try {
-      await execAsync(command, { timeout: 60000 });
-      res.download(outputPath, outputFileName, (err) => {
+      await execFileAsync(marpBin, [fullPath, '-o', outputPath, '--html', '--allow-local-files', '--no-stdin'], { timeout: 60000 });
+      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

@@ -4,6 +4,7 @@
  */
 
 import express from 'express';
+import { readFileSync } from 'fs';
 import { createServer } from 'http';
 import path from 'path';
 import { fileURLToPath } from 'url';
@@ -17,7 +18,9 @@ import { setupWebSocket } from './websocket.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const STATIC_DIR = path.join(__dirname, 'static');
-const VERSION = '0.5.0';
+const { version: VERSION } = JSON.parse(
+  readFileSync(path.join(__dirname, '..', 'package.json'), 'utf-8')
+);
 
 /**
  * Setup API routes for the Express app
@@ -64,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/watcher.js

@@ -65,9 +65,10 @@ export function setupWatcher(rootDir, wss, options = {}) {
 
   watcher.on('change', async (filePath) => {
     const relativePath = toRelativePath(filePath);
+    const relativeDir = path.dirname(relativePath);
 
     try {
-      const rendered = await renderFile(filePath);
+      const rendered = await renderFile(filePath, relativeDir === '.' ? '' : relativeDir);
       wss.broadcastFileUpdate(relativePath, {
         type: 'file_update',
         path: relativePath,

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);