@natjswenson/devlog 0.1.5 → 0.1.7

package/examples/react/DevLogPage.jsx

@@ -7,9 +7,24 @@ import './DevLogPage.css';
 
 const ENTRIES_PER_PAGE = 10;
 
+// Strict allowlist of URL schemes permitted in markdown links/images.
+// react-markdown 9's default sanitizer already blocks `javascript:`,
+// `vbscript:`, `file:`. We narrow further: only http/https/mailto.
+// Anything else (data:, blob:, ftp:, custom schemes) is replaced with `#`.
+const SAFE_URL_SCHEME = /^(https?:|mailto:|#|\/|\.\.?\/|[^:]*$)/i;
+function safeUrlTransform(url) {
+  if (typeof url !== 'string') return '#';
+  if (SAFE_URL_SCHEME.test(url)) return url;
+  return '#';
+}
+
 function formatDate(dateStr) {
-  const [year, month, day] = dateStr.split('-');
-  const date = new Date(year, month - 1, day);
+  if (typeof dateStr !== 'string') return '';
+  const parts = dateStr.split('-');
+  if (parts.length !== 3) return '';
+  const [year, month, day] = parts;
+  const date = new Date(Number(year), Number(month) - 1, Number(day));
+  if (isNaN(date.getTime())) return '';
   return date.toLocaleDateString('en-US', {
     month: 'short',
     day: 'numeric',
@@ -139,7 +154,11 @@ export default function DevLogPage({
                     <div className="devlog-content-inner">
                       {isExpanded && content && (
                         <div className="devlog-content" onClick={(e) => e.stopPropagation()}>
-                          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            urlTransform={safeUrlTransform}
+                            skipHtml
+                          >
                             {content}
                           </ReactMarkdown>
                         </div>

package/examples/react/useDevLogEntries.js

@@ -1,24 +1,44 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { DEVLOG_CONFIG as DEFAULT_CONFIG } from './devlog-config.js';
 
+// Allowlist of frontmatter keys we recognize. Anything else is ignored —
+// prevents prototype-pollution via crafted keys like `__proto__`.
+const FRONTMATTER_KEYS = new Set(['title', 'date', 'project', 'summary']);
+
 /**
  * Parse YAML-ish frontmatter from a markdown string.
  * Returns { metadata: { title, date, project, summary }, body: string }
  */
 function parseFrontmatter(raw) {
   const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/);
-  if (!match) return { metadata: {}, body: raw };
-
-  const frontmatter = match[1];
-  const body = match[2];
-  const metadata = {};
+  // Use Object.create(null) so the returned object has no prototype chain.
+  const metadata = Object.create(null);
+  if (!match) return { metadata, body: raw };
 
-  for (const line of frontmatter.split('\n')) {
+  for (const line of match[1].split('\n')) {
     const m = line.match(/^(\w+)\s*:\s*"?([^"]*)"?\s*$/);
-    if (m) metadata[m[1]] = m[2].trim();
+    if (m && FRONTMATTER_KEYS.has(m[1])) metadata[m[1]] = m[2].trim();
   }
 
-  return { metadata, body };
+  return { metadata, body: match[2] };
+}
+
+// Schema validation for fetched manifest. Reject anything that isn't shaped
+// like { entries: [{ date, file, title, summary }, ...] } so a hostile commit
+// to the dev-log repo can't crash the page.
+function validateManifest(data) {
+  if (!data || typeof data !== 'object') return null;
+  if (!Array.isArray(data.entries)) return null;
+  const entries = [];
+  for (const e of data.entries) {
+    if (!e || typeof e !== 'object') continue;
+    const { date, file, title, summary } = e;
+    if (typeof date !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(date)) continue;
+    if (typeof file !== 'string' || !/^[a-zA-Z0-9._-]+\.md$/.test(file)) continue;
+    if (typeof title !== 'string' || typeof summary !== 'string') continue;
+    entries.push({ date, file, title, summary });
+  }
+  return { entries };
 }
 
 /**
@@ -51,7 +71,9 @@ export function useDevLogEntries(project, configOverride) {
     setError(null);
 
     try {
-      const url = `${config.baseUrl}/${project}/manifest.json`;
+      // Encode project key to neutralize any path-traversal characters
+      // (the project key is allowlisted upstream, but defense-in-depth).
+      const url = `${config.baseUrl}/${encodeURIComponent(project)}/manifest.json`;
       const res = await fetch(url);
       if (!res.ok) {
         if (res.status === 404) {
@@ -61,7 +83,9 @@ export function useDevLogEntries(project, configOverride) {
         throw new Error(`Failed to fetch manifest (${res.status})`);
       }
       const data = await res.json();
-      setEntries(data.entries || []);
+      const validated = validateManifest(data);
+      if (!validated) throw new Error('Manifest failed schema validation');
+      setEntries(validated.entries);
     } catch (err) {
       setError(err.message);
     } finally {
@@ -76,8 +100,15 @@ export function useDevLogEntries(project, configOverride) {
   const fetchEntryContent = useCallback(async (filename) => {
     if (contentCache.current.has(filename)) return;
 
+    // Final filename gate (manifest validation already enforces the same
+    // pattern — keep this here so any consumer calling fetchEntryContent
+    // directly is also protected).
+    if (typeof filename !== 'string' || !/^[a-zA-Z0-9._-]+\.md$/.test(filename)) {
+      return;
+    }
+
     try {
-      const url = `${config.baseUrl}/${project}/${filename}`;
+      const url = `${config.baseUrl}/${encodeURIComponent(project)}/${filename}`;
       const res = await fetch(url);
       if (!res.ok) throw new Error(`Failed to fetch entry (${res.status})`);
       const raw = await res.text();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natjswenson/devlog",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Daily dev log generator — Claude Code skill + preview app for publishing git-based dev logs to your site",
   "license": "MIT",
   "author": "Nate Swenson",
@@ -29,6 +29,8 @@
     "preview/",
     "examples/",
     "SKILL.md",
+    "SECURITY.md",
+    "CHANGELOG.md",
     "config.example.json",
     "README.md",
     "LICENSE"
@@ -36,14 +38,17 @@
   "engines": {
     "node": ">=18"
   },
+  "scripts": {
+    "audit": "npm audit --audit-level=moderate"
+  },
   "dependencies": {
-    "@vitejs/plugin-react": "^4.3.0",
-    "kleur": "^4.1.5",
-    "prompts": "^2.4.2",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "react-markdown": "^9.0.0",
-    "remark-gfm": "^4.0.0",
-    "vite": "^5.4.0"
+    "@vitejs/plugin-react": "6.0.1",
+    "kleur": "4.1.5",
+    "prompts": "2.4.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-markdown": "9.1.0",
+    "remark-gfm": "4.0.1",
+    "vite": "8.0.10"
   }
 }

package/preview/App.jsx

@@ -6,12 +6,24 @@ const owner = import.meta.env.VITE_DEVLOG_OWNER;
 const repo = import.meta.env.VITE_DEVLOG_REPO;
 const branch = import.meta.env.VITE_DEVLOG_BRANCH || 'main';
 const projectsRaw = import.meta.env.VITE_DEVLOG_PROJECTS;
+const isDev = import.meta.env.DEV;
 
 const isDemo = !owner || !repo;
 
 let realProjects = [];
 try {
-  realProjects = projectsRaw ? JSON.parse(projectsRaw) : [];
+  const parsed = projectsRaw ? JSON.parse(projectsRaw) : [];
+  // Schema-validate: must be array of {key, label?} where key matches a safe
+  // allowlist. Anything else gets dropped silently.
+  if (Array.isArray(parsed)) {
+    for (const p of parsed) {
+      if (!p || typeof p !== 'object') continue;
+      if (typeof p.key !== 'string' || !/^[a-zA-Z0-9][a-zA-Z0-9._-]*$/.test(p.key)) continue;
+      if (p.key.includes('..')) continue;
+      const label = typeof p.label === 'string' ? p.label : p.key;
+      realProjects.push({ key: p.key, label });
+    }
+  }
 } catch {
   realProjects = [];
 }
@@ -49,16 +61,39 @@ function NoProjectsScreen() {
         Env vars say you have a repo (<code>{owner}/{repo}</code>) but no projects.
         That's like buying a stage and forgetting to invite a band.
       </p>
-      <p>Add at least one project to your config:</p>
+      <p>Add a project the easy way:</p>
+      <pre>npx @natjswenson/devlog add-project</pre>
+      <p>Or edit your config directly:</p>
       <pre>{`{
+  "targetRepo": "${owner}/${repo}",
+  "branch": "${branch}",
   "projects": [
-    { "key": "myproject", "path": "...", "remote": "${owner}/myproject" }
+    { "key": "myproject", "label": "My Project", "path": "...", "remote": "${owner}/myproject" }
   ]
 }`}</pre>
+      <p>Then re-run <code>npx @natjswenson/devlog preview</code>.</p>
+    </div>
+  );
+}
+
+// Production builds without env vars: show a clear "setup required" screen,
+// not the demo banner with broken fetches (since installDemoFetch is gated to DEV).
+function SetupRequiredScreen() {
+  return (
+    <div className="empty-screen">
+      <h1>Setup required</h1>
+      <p>
+        This preview was built without the env vars that point it at a dev-log repo.
+        Set these in your hosting environment (Vercel/Netlify/Cloudflare/wherever):
+      </p>
+      <pre>{`VITE_DEVLOG_OWNER=your-github-username
+VITE_DEVLOG_REPO=daily-dev-log
+VITE_DEVLOG_BRANCH=main
+VITE_DEVLOG_PROJECTS=[{"key":"myproject","label":"My Project"}]`}</pre>
       <p>
-        Then run <code>npx @natjswenson/devlog preview</code> again, or set
-        <code> VITE_DEVLOG_PROJECTS</code> directly in <code>preview/.env.local</code>.
+        Or, if you're trying this locally, the friendlier path is:
       </p>
+      <pre>npx @natjswenson/devlog init &amp;&amp; npx @natjswenson/devlog preview</pre>
     </div>
   );
 }
@@ -66,6 +101,12 @@ function NoProjectsScreen() {
 export default function App() {
   const [activeKey, setActiveKey] = useState((projects && projects[0]?.key) || DEMO_PROJECT_KEY);
 
+  // Production build with no env vars: show actionable setup screen
+  // (demo fetch override is DEV-only, so demo entries would 404 here).
+  if (isDemo && !isDev) {
+    return <SetupRequiredScreen />;
+  }
+
   if (!isDemo && !projects) {
     return <NoProjectsScreen />;
   }

package/preview/index.html

@@ -3,6 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--
+      Content-Security-Policy: defense-in-depth for the preview app.
+      - 'self' for scripts/styles (no inline JS, no eval)
+      - 'unsafe-inline' for styles only — required by Vite's HMR runtime in dev
+        and react-markdown's prismjs (none used here, but standard practice)
+      - connect to raw.githubusercontent.com for entry fetches; api.github.com
+        for any future repo metadata; demo-mode.local for the in-browser fetch
+        override that powers demo mode without env vars
+      - no objects, no frames, no plugins
+      Production build: replace 'unsafe-inline' with hashes/nonces if you
+      configure Vite to emit them.
+    -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://raw.githubusercontent.com https://api.github.com https://demo-mode.local; object-src 'none'; frame-src 'none'; base-uri 'self'; form-action 'none';" />
+    <meta name="referrer" content="no-referrer-when-downgrade" />
     <title>devlog preview</title>
     <style>
       :root {

package/preview/main.jsx

@@ -4,7 +4,10 @@ import App from './App.jsx';
 import { installDemoFetch } from './demo.js';
 import './preview.css';
 
-if (!import.meta.env.VITE_DEVLOG_OWNER || !import.meta.env.VITE_DEVLOG_REPO) {
+// Gate the global window.fetch override behind DEV. In production builds
+// (e.g. when adopters deploy the preview directory standalone), demo content
+// must NOT silently intercept fetches — show the empty-state UX instead.
+if (import.meta.env.DEV && (!import.meta.env.VITE_DEVLOG_OWNER || !import.meta.env.VITE_DEVLOG_REPO)) {
   installDemoFetch();
 }
 

package/preview/vite.config.js

@@ -19,8 +19,16 @@ export default defineConfig({
       'style-to-js',
     ],
   },
+  // Bind preview server to localhost only — the dev server has no auth and
+  // serves transformed source modules. Don't expose it to LAN by default.
+  // (npm audit flags moderate CVEs in dev-server CORS handling for any
+  // deployment that allows cross-origin reads; localhost-binding is
+  // defense-in-depth on top of vite's own patches.)
   server: {
+    host: 'localhost',
     port: 5173,
     open: true,
+    strictPort: false,
+    cors: false,
   },
 });