astro-mermaid 1.3.1 → 2.0.0

package/README.md

@@ -100,17 +100,21 @@ export default defineConfig({
 mermaid({
   // Default theme: 'default', 'dark', 'forest', 'neutral', 'base'
   theme: 'forest',
-  
+
   // Enable automatic theme switching based on data-theme attribute
   autoTheme: true,
-  
+
+  // Enable client-side logging (default: true). Set to false to suppress
+  // console.log output in the browser. Errors are always logged.
+  enableLog: false,
+
   // Additional mermaid configuration
   mermaidConfig: {
     flowchart: {
       curve: 'basis'
     }
   },
-  
+
   // Register icon packs for use in diagrams
   iconPacks: [
     {
@@ -218,8 +222,6 @@ All mermaid diagram types are supported:
 
 ## Version
 
-**Current:** `v1.2.0` - Enhanced universal compatibility with dual plugin system
-
 See [changelog](https://github.com/joesaby/astro-mermaid/releases) for version history.
 
 ## Contributing

package/astro-mermaid-integration.d.ts

@@ -5,11 +5,19 @@ export interface IconPack {
    * Name of the icon pack
    */
   name: string;
-  
+
+  /**
+   * URL to the icon pack JSON file (preferred, safe serialization).
+   * @example 'https://unpkg.com/@iconify-json/logos@1/icons.json'
+   */
+  url?: string;
+
   /**
-   * Function that returns a promise resolving to the icon pack data
+   * Legacy: loader function whose source is inspected for a fetch() URL.
+   * Prefer using the `url` property instead for safer serialization.
+   * @deprecated Use `url` instead.
    */
-  loader: () => Promise<any>;
+  loader?: () => Promise<any>;
 }
 
 export interface AstroMermaidOptions {
@@ -24,7 +32,13 @@ export interface AstroMermaidOptions {
    * @default true
    */
   autoTheme?: boolean;
-  
+
+  /**
+   * Enable client-side logging
+   * @default true
+   */
+  enableLog?: boolean;
+
   /**
    * Additional mermaid configuration options
    * @see https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults

package/astro-mermaid-integration.js

@@ -15,6 +15,36 @@ function escapeHtml(text) {
   return text.replace(/[&<>"']/g, char => htmlEntities[char]);
 }
 
+/**
+ * Sanitize a JSON string for safe embedding inside a <script> tag.
+ * Prevents premature script termination via </script> or <!-- sequences.
+ */
+function sanitizeJsonForScript(jsonStr) {
+  return jsonStr
+    .replace(/<\//g, '<\\/')
+    .replace(/<!--/g, '<\\!--');
+}
+
+/**
+ * Validate that mermaidConfig is a plain object (not an array, null, etc.)
+ * and does not contain __proto__ or constructor keys to prevent prototype pollution.
+ */
+function validateConfig(obj, path = 'mermaidConfig') {
+  if (obj === null || typeof obj !== 'object' || Array.isArray(obj)) {
+    return;
+  }
+  const dangerous = ['__proto__', 'constructor', 'prototype'];
+  // Use getOwnPropertyNames to catch __proto__ which Object.keys skips
+  for (const key of Object.getOwnPropertyNames(obj)) {
+    if (dangerous.includes(key)) {
+      throw new Error(`astro-mermaid: "${key}" is not allowed in ${path}`);
+    }
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      validateConfig(obj[key], `${path}.${key}`);
+    }
+  }
+}
+
 /**
  * Remark plugin to transform mermaid code blocks at the markdown level
  */
@@ -51,6 +81,27 @@ function remarkMermaidPlugin(options = {}) {
   };
 }
 
+/**
+ * Escape a string for safe use inside an HTML attribute value.
+ */
+function escapeAttribute(value) {
+  return String(value).replace(/[&<>"']/g, char => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  })[char]);
+}
+
+/**
+ * Allowlist of safe HTML tag names that may appear inside mermaid HAST content.
+ */
+const ALLOWED_TAG_NAMES = new Set([
+  'b', 'i', 'u', 'em', 'strong', 'br', 'hr', 'sub', 'sup', 'span', 'div',
+  'code', 'pre', 'img', 'a', 'p', 'ul', 'ol', 'li'
+]);
+
 /**
  * Helper function to serialize HAST nodes back to HTML text
  * This preserves HTML tags within the mermaid content
@@ -62,19 +113,26 @@ function serializeHastChildren(children) {
     if (child.type === 'text') {
       result += child.value;
     } else if (child.type === 'element') {
-      // Reconstruct the HTML tag
+      // Reconstruct the HTML tag — only allow safe tag names
       const tagName = child.tagName;
+      if (!ALLOWED_TAG_NAMES.has(tagName)) {
+        // Skip disallowed tags, but still serialize their text children
+        if (child.children && child.children.length > 0) {
+          result += serializeHastChildren(child.children);
+        }
+        continue;
+      }
       const selfClosing = ['br', 'hr', 'img', 'input', 'meta', 'link'].includes(tagName);
 
       result += `<${tagName}`;
 
-      // Add attributes if any
+      // Add attributes if any — escape all attribute values
       if (child.properties) {
         for (const [key, value] of Object.entries(child.properties)) {
           if (key !== 'className') {
-            result += ` ${key}="${value}"`;
+            result += ` ${key}="${escapeAttribute(value)}"`;
           } else if (Array.isArray(value)) {
-            result += ` class="${value.join(' ')}"`;
+            result += ` class="${escapeAttribute(value.join(' '))}"`;
           }
         }
       }
@@ -164,6 +222,7 @@ async function isElkInstalled(logger, consumerRoot) {
  * @param {string} [options.theme='default'] - Default theme ('default', 'dark', 'forest', 'neutral')
  * @param {boolean} [options.autoTheme=true] - Enable automatic theme switching based on data-theme attribute
  * @param {Object} [options.mermaidConfig={}] - Additional mermaid configuration options
+ * @param {boolean} [options.enableLog=true] - Enable client-side logging
  * @returns {import('astro').AstroIntegration}
  */
 export default function astroMermaid(options = {}) {
@@ -171,9 +230,13 @@ export default function astroMermaid(options = {}) {
     theme = 'default',
     autoTheme = true,
     mermaidConfig = {},
-    iconPacks = []
+    iconPacks = [],
+    enableLog = true
   } = options;
 
+  // Validate mermaidConfig to prevent prototype pollution
+  validateConfig(mermaidConfig);
+
   return {
     name: 'astro-mermaid',
     hooks: {
@@ -211,14 +274,44 @@ export default function astroMermaid(options = {}) {
           }
         });
 
-        // Serialize icon packs for client-side use
-        const iconPacksConfig = iconPacks.map(pack => ({
-          name: pack.name,
-          loader: pack.loader.toString()
-        }));
+        // Validate and serialize icon packs for client-side use.
+        // Only the pack name and a JSON URL string are forwarded to the
+        // client — we never serialize arbitrary function bodies.
+        const iconPacksConfig = iconPacks.map(pack => {
+          if (typeof pack.name !== 'string' || !pack.name) {
+            throw new Error('astro-mermaid: each iconPack must have a non-empty "name" string');
+          }
+          if (typeof pack.url === 'string') {
+            // Preferred: explicit URL
+            return { name: pack.name, url: pack.url };
+          }
+          if (typeof pack.loader === 'function') {
+            // Legacy: extract URL from loader().toString() if it contains a
+            // fetch('...') call, otherwise warn and skip.
+            const src = pack.loader.toString();
+            const urlMatch = src.match(/fetch\s*\(\s*['"]([^'"]+)['"]\s*\)/);
+            if (urlMatch) {
+              return { name: pack.name, url: urlMatch[1] };
+            }
+            logger.warn(
+              `astro-mermaid: iconPack "${pack.name}" uses a loader function ` +
+              `that could not be safely serialized. Please provide a "url" ` +
+              `property instead. This pack will be skipped.`
+            );
+            return null;
+          }
+          throw new Error(
+            `astro-mermaid: iconPack "${pack.name}" must have a "url" string ` +
+            `or a "loader" function`
+          );
+        }).filter(Boolean);
 
         // Inject client-side mermaid script with conditional loading
         const mermaidScriptContent = `
+// Logging helpers — controlled by enableLog option
+const log = ${enableLog} ? (...args) => console.log('[astro-mermaid]', ...args) : () => {};
+const logError = (...args) => console.error('[astro-mermaid]', ...args);
+
 // Check if page has mermaid diagrams
 const hasMermaidDiagrams = () => {
   return document.querySelectorAll('pre.mermaid').length > 0;
@@ -231,16 +324,16 @@ let mermaidInstance = null;
 async function loadMermaid() {
   if (mermaidPromise) return mermaidPromise;
 
-  console.log('[astro-mermaid] Loading mermaid.js...');
+  log('Loading mermaid.js...');
 
   mermaidPromise = import('mermaid').then(async ({ default: mermaid }) => {
-    // Register icon packs if provided
-    const iconPacks = ${JSON.stringify(iconPacksConfig)};
+    // Register icon packs if provided — uses safe fetch(url) instead of eval
+    const iconPacks = ${sanitizeJsonForScript(JSON.stringify(iconPacksConfig))};
     if (iconPacks && iconPacks.length > 0) {
-      console.log('[astro-mermaid] Registering', iconPacks.length, 'icon packs');
+      log('Registering', iconPacks.length, 'icon packs');
       const packs = iconPacks.map(pack => ({
         name: pack.name,
-        loader: new Function('return ' + pack.loader)()
+        loader: () => fetch(pack.url).then(res => res.json())
       }));
       await mermaid.registerIconPacks(packs);
     }
@@ -249,7 +342,7 @@ async function loadMermaid() {
     ${useElk ? `
 const elkModule = await import("@mermaid-js/layout-elk").catch(() => null);
 if (elkModule?.default) {
-  console.log("[astro-mermaid] Registering elk layouts");
+  log('Registering elk layouts');
   mermaid.registerLayoutLoaders(elkModule.default);
 }
 ` : ``}
@@ -257,7 +350,7 @@ if (elkModule?.default) {
     mermaidInstance = mermaid;
     return mermaid;
   }).catch(error => {
-    console.error('[astro-mermaid] Failed to load mermaid:', error);
+    logError('Failed to load mermaid:', error);
     mermaidPromise = null;
     throw error;
   });
@@ -266,11 +359,11 @@ if (elkModule?.default) {
 }
 
 // Mermaid configuration
-const defaultConfig = ${JSON.stringify({
+const defaultConfig = ${sanitizeJsonForScript(JSON.stringify({
   startOnLoad: false,
   theme: theme,
   ...mermaidConfig
-})};
+}))};
 
 // Theme mapping for auto-theme switching
 const themeMap = {
@@ -280,10 +373,10 @@ const themeMap = {
 
 // Initialize all mermaid diagrams
 async function initMermaid() {
-  console.log('[astro-mermaid] Initializing mermaid diagrams...');
+  log('Initializing mermaid diagrams...');
   const diagrams = document.querySelectorAll('pre.mermaid');
 
-  console.log('[astro-mermaid] Found', diagrams.length, 'mermaid diagrams');
+  log('Found', diagrams.length, 'mermaid diagrams');
 
   if (diagrams.length === 0) {
     return;
@@ -301,7 +394,7 @@ async function initMermaid() {
     const bodyTheme = document.body.getAttribute('data-theme');
     const dataTheme = htmlTheme || bodyTheme;
     currentTheme = themeMap[dataTheme] || defaultConfig.theme;
-    console.log('[astro-mermaid] Using theme:', currentTheme, 'from', htmlTheme ? 'html' : 'body');
+    log('Using theme:', currentTheme, 'from', htmlTheme ? 'html' : 'body');
   }
 
   // Configure mermaid with gitGraph support
@@ -329,7 +422,7 @@ async function initMermaid() {
     const diagramDefinition = diagram.getAttribute('data-diagram') || '';
     const id = 'mermaid-' + Math.random().toString(36).slice(2, 11);
 
-    console.log('[astro-mermaid] Rendering diagram:', id);
+    log('Rendering diagram:', id);
 
     try {
       // Clear any existing error state
@@ -341,13 +434,20 @@ async function initMermaid() {
       const { svg } = await mermaid.render(id, diagramDefinition);
       diagram.innerHTML = svg;
       diagram.setAttribute('data-processed', 'true');
-      console.log('[astro-mermaid] Successfully rendered diagram:', id);
+      log('Successfully rendered diagram:', id);
     } catch (error) {
-      console.error('[astro-mermaid] Mermaid rendering error for diagram:', id, error);
-      diagram.innerHTML = \`<div style="color: red; padding: 1rem; border: 1px solid red; border-radius: 0.5rem;">
-        <strong>Error rendering diagram:</strong><br/>
-        \${error.message || 'Unknown error'}
-      </div>\`;
+      logError('Mermaid rendering error for diagram:', id, error);
+      // Build error UI safely — use textContent to prevent XSS via error messages
+      const errorDiv = document.createElement('div');
+      errorDiv.style.cssText = 'color: red; padding: 1rem; border: 1px solid red; border-radius: 0.5rem;';
+      const strong = document.createElement('strong');
+      strong.textContent = 'Error rendering diagram:';
+      const msg = document.createElement('span');
+      msg.textContent = ' ' + (error.message || 'Unknown error');
+      errorDiv.appendChild(strong);
+      errorDiv.appendChild(msg);
+      diagram.textContent = '';
+      diagram.appendChild(errorDiv);
       diagram.setAttribute('data-processed', 'true');
     }
   }
@@ -355,10 +455,10 @@ async function initMermaid() {
 
 // Initialize on first load if there are diagrams
 if (hasMermaidDiagrams()) {
-  console.log('[astro-mermaid] Mermaid diagrams detected on initial load');
+  log('Mermaid diagrams detected on initial load');
   initMermaid();
 } else {
-  console.log('[astro-mermaid] No mermaid diagrams found on initial load');
+  log('No mermaid diagrams found on initial load');
 }
 
 // Re-render on theme change if auto-theme is enabled
@@ -389,7 +489,7 @@ if (${autoTheme}) {
 // Handle view transitions (for Astro View Transitions API)
 // This is registered ALWAYS, not just when initial page has diagrams
 document.addEventListener('astro:after-swap', () => {
-  console.log('[astro-mermaid] View transition detected');
+  log('View transition detected');
   // Check if new page has diagrams
   if (hasMermaidDiagrams()) {
     initMermaid();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-mermaid",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "An Astro integration for rendering Mermaid diagrams with automatic theme switching and client-side rendering",
   "type": "module",
   "main": "./astro-mermaid-integration.js",
@@ -30,7 +30,7 @@
   "license": "MIT",
   "peerDependencies": {
     "@mermaid-js/layout-elk": "^0.2.0",
-    "astro": "^4.0.0 || ^5.0.0",
+    "astro": ">=4",
     "mermaid": "^10.0.0 || ^11.0.0"
   },
   "peerDependenciesMeta": {
@@ -46,18 +46,20 @@
   "scripts": {
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage"
+    "test:coverage": "vitest --coverage",
+    "semantic-release": "semantic-release"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
     "@vitest/ui": "^3.2.4",
-    "astro": "^5.0.0",
+    "astro": "^6.0.0",
     "hast-util-from-html": "^2.0.3",
     "mermaid": "^11.0.0",
     "rehype-parse": "^9.0.1",
     "rehype-stringify": "^10.0.1",
     "remark-mermaid": "^0.2.0",
     "remark-parse": "^11.0.0",
+    "semantic-release": "^25.0.3",
     "typescript": "^5.0.0",
     "unified": "^11.0.5",
     "vitest": "^3.2.4"
@@ -70,4 +72,4 @@
   "bugs": {
     "url": "https://github.com/joesaby/astro-mermaid/issues"
   }
-}
+}