@wipcomputer/markdown-viewer 1.0.8 → 1.1.0

package/README.md

@@ -129,6 +129,19 @@ That's it. The server watches the file and pushes updates via SSE. You don't nee
 
 ---
 
+## Security
+
+- Server binds to `127.0.0.1` only. It is not accessible from other machines.
+- The `/view?path=` parameter reads files from your local filesystem. Use `--root` to restrict access to a specific directory tree:
+
+```bash
+mdview --root /path/to/your/project
+```
+
+When `--root` is set, the server will only serve files under that directory. Requests for files outside it return 404. Recommended when running in shared or multi-user environments.
+
+---
+
 ## License
 
 MIT

package/markdown-viewer.html

@@ -4,17 +4,17 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WIP Computer: Live .md Viewer</title>
-    <!-- Markdown parser -->
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <!-- Syntax highlighting -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css" id="highlight-theme">
-    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
-    <!-- Mermaid for diagrams -->
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
-    <!-- KaTeX for math -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
+    <!-- Markdown parser (bundled, no CDN) -->
+    <script src="/vendor/marked.min.js"></script>
+    <!-- Syntax highlighting (bundled, no CDN) -->
+    <link rel="stylesheet" href="/vendor/github.min.css" id="highlight-theme">
+    <script src="/vendor/highlight.min.js"></script>
+    <!-- Mermaid for diagrams (bundled, no CDN) -->
+    <script src="/vendor/mermaid.min.js"></script>
+    <!-- KaTeX for math (bundled, no CDN) -->
+    <link rel="stylesheet" href="/vendor/katex.min.css">
+    <script src="/vendor/katex.min.js"></script>
+    <script src="/vendor/auto-render.min.js"></script>
     <style>
         :root {
             --bg-primary: #fcfbf9;
@@ -1312,10 +1312,10 @@
             // Update highlight.js theme
             const highlightTheme = document.getElementById('highlight-theme');
             if (newTheme === 'dark') {
-                highlightTheme.href = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css';
+                highlightTheme.href = '/vendor/github-dark.min.css';
                 mermaid.initialize({ theme: 'dark' });
             } else {
-                highlightTheme.href = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css';
+                highlightTheme.href = '/vendor/github.min.css';
                 mermaid.initialize({ theme: 'default' });
             }
 
@@ -1336,7 +1336,7 @@
                 // Update highlight.js theme
                 const highlightTheme = document.getElementById('highlight-theme');
                 if (savedTheme === 'dark') {
-                    highlightTheme.href = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css';
+                    highlightTheme.href = '/vendor/github-dark.min.css';
                     mermaid.initialize({ theme: 'dark' });
                 }
             }
@@ -1371,8 +1371,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>${currentFile.name}</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
+    <link rel="stylesheet" href="/vendor/github.min.css">
+    <link rel="stylesheet" href="/vendor/katex.min.css">
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipcomputer/markdown-viewer",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Live markdown viewer for AI pair-editing. When you collaborate, the updates render instantly. Works with any AI agent and web browser.",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -5,6 +5,7 @@
 // Usage:
 //   mdview                         Start server, open homepage
 //   mdview --port 8080             Use custom port
+//   mdview --root /path/to/dir     Restrict file access to this directory
 //
 // Opens browser to http://127.0.0.1:3000/ — pick files, view with live reload.
 
@@ -20,18 +21,28 @@ const __dirname = dirname(__filename);
 // ── Parse args ───────────────────────────────────────────────────────
 
 let port = 3000;
+let rootDir = null;
 
 const args = process.argv.slice(2);
 for (let i = 0; i < args.length; i++) {
   if (args[i] === "--port" && args[i + 1]) {
     port = parseInt(args[i + 1], 10);
     i++;
+  } else if (args[i] === "--root" && args[i + 1]) {
+    rootDir = resolve(args[i + 1]);
+    i++;
   } else if (args[i] === "--help" || args[i] === "-h") {
     console.log(`mdview: live markdown viewer
 
 Usage:
   mdview                         Start server, open homepage
   mdview --port 8080             Use custom port
+  mdview --root /path/to/dir     Restrict file access to this directory
+
+Options:
+  --root <dir>   Only serve files under this directory. Prevents access
+                 to files outside the specified path. Recommended for
+                 shared or multi-user environments.
 
 Opens browser to http://127.0.0.1:PORT/ — pick files, view with live reload.
 Works in all browsers (Safari, Chrome, Firefox).`);
@@ -39,6 +50,16 @@ Works in all browsers (Safari, Chrome, Firefox).`);
   }
 }
 
+// Validate that a file path is allowed. Returns the resolved path or null.
+function validateFilePath(filePath) {
+  if (!filePath) return null;
+  const resolved = resolve(filePath);
+  if (rootDir && !resolved.startsWith(rootDir + "/") && resolved !== rootDir) {
+    return null;
+  }
+  return resolved;
+}
+
 // ── Multi-file watcher ──────────────────────────────────────────────
 
 // Map<absolutePath, { clients: Set<res>, lastMtime: number }>
@@ -209,6 +230,7 @@ const mimeTypes = {
   ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
   ".gif": "image/gif", ".svg": "image/svg+xml", ".webp": "image/webp",
   ".ico": "image/x-icon", ".css": "text/css", ".js": "application/javascript",
+  ".woff": "font/woff", ".woff2": "font/woff2", ".ttf": "font/ttf",
 };
 
 const server = createServer((req, res) => {
@@ -224,7 +246,7 @@ const server = createServer((req, res) => {
 
   // Viewer — file loaded with live reload (path) or sessionStorage (name)
   if (url.pathname === "/view") {
-    const filePath = url.searchParams.get("path");
+    const filePath = validateFilePath(url.searchParams.get("path"));
     const fileName = url.searchParams.get("name");
 
     if (filePath && existsSync(filePath)) {
@@ -244,7 +266,7 @@ const server = createServer((req, res) => {
 
   // API: read a specific file
   if (url.pathname === "/api/file") {
-    const filePath = url.searchParams.get("path");
+    const filePath = validateFilePath(url.searchParams.get("path"));
     if (!filePath || !existsSync(filePath)) {
       res.writeHead(404, { "Content-Type": "text/plain" });
       res.end("File not found");
@@ -263,7 +285,7 @@ const server = createServer((req, res) => {
 
   // API: SSE events for a specific file
   if (url.pathname === "/api/events") {
-    const filePath = url.searchParams.get("path");
+    const filePath = validateFilePath(url.searchParams.get("path"));
     if (!filePath || !existsSync(filePath)) {
       res.writeHead(404, { "Content-Type": "text/plain" });
       res.end("File not found");
@@ -280,6 +302,17 @@ const server = createServer((req, res) => {
     return;
   }
 
+  // Serve bundled vendor files (no CDN dependency)
+  if (url.pathname.startsWith("/vendor/")) {
+    const vendorPath = join(__dirname, url.pathname);
+    if (existsSync(vendorPath) && statSync(vendorPath).isFile()) {
+      const ext = extname(vendorPath).toLowerCase();
+      res.writeHead(200, { "Content-Type": mimeTypes[ext] || "application/octet-stream" });
+      res.end(readFileSync(vendorPath));
+      return;
+    }
+  }
+
   // Serve static files relative to a viewed file's directory
   const referer = req.headers.referer;
   if (referer) {
@@ -289,7 +322,8 @@ const server = createServer((req, res) => {
       if (refPath) {
         const fileDir = dirname(refPath);
         const requestedPath = resolve(fileDir, url.pathname.slice(1));
-        if (requestedPath.startsWith(fileDir) && existsSync(requestedPath) && statSync(requestedPath).isFile()) {
+        const validatedStatic = validateFilePath(requestedPath);
+        if (validatedStatic && requestedPath.startsWith(fileDir) && existsSync(requestedPath) && statSync(requestedPath).isFile()) {
           const ext = extname(requestedPath).toLowerCase();
           res.writeHead(200, { "Content-Type": mimeTypes[ext] || "application/octet-stream" });
           res.end(readFileSync(requestedPath));
@@ -308,6 +342,7 @@ const server = createServer((req, res) => {
 server.listen(port, "127.0.0.1", () => {
   const url = `http://127.0.0.1:${port}`;
   console.log(`mdview: ${url}`);
+  if (rootDir) console.log(`root: ${rootDir} (file access restricted)`);
   console.log(`Press Ctrl+C to stop.\n`);
 
   const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";

package/skills/markdown-viewer/SKILL.md

@@ -71,7 +71,7 @@ Open multiple tabs to work on multiple documents at once.
 ## Security
 
 - Server binds to `127.0.0.1` only. It is not accessible from other machines.
-- The `/view?path=` parameter reads files from your local filesystem. This is expected behavior for a local viewer. Do not expose the port to untrusted networks.
+- The `/view?path=` parameter reads files from your local filesystem. Use `--root <dir>` to restrict access to a specific directory tree. Recommended for shared environments.
 - Zero npm dependencies. No supply chain risk beyond Node.js itself.
 
 ## Features

package/vendor/auto-render.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var i=r[e];if(void 0!==i)return i.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var i={};return function(){n.d(i,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,i=0,a=e.length;n<t.length;){var o=t[n];if(i<=0&&t.slice(n,n+a)===e)return n;"\\"===o?n++:"{"===o?i++:"}"===o&&i--,n++}return-1},a=/^\\begin{/,o=function(e,t){for(var n,i=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(i.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=a.test(d)?d:e.slice(t[l].left.length,n);i.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&i.push({type:"text",data:e}),i},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var i=document.createDocumentFragment(),a=0;a<n.length;a++)if("text"===n[a].type)i.appendChild(document.createTextNode(n[a].data));else{var l=document.createElement("span"),d=n[a].data;r.displayMode=n[a].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[a].data+"` with ",e),i.appendChild(document.createTextNode(n[a].rawData));continue}i.appendChild(l)}return i},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var i=t.childNodes[n];if(3===i.nodeType){for(var a=i.textContent,o=i.nextSibling,d=0;o&&o.nodeType===Node.TEXT_NODE;)a+=o.textContent,o=o.nextSibling,d++;var s=l(a,r);if(s){for(var f=0;f<d;f++)i.nextSibling.remove();n+=s.childNodes.length-1,t.replaceChild(s,i)}else n+=d}else 1===i.nodeType&&function(){var t=" "+i.className+" ";-1===r.ignoredTags.indexOf(i.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(i,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),i=i.default}()}));

package/vendor/github-dark.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}

package/vendor/github.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}