@mandujs/core 0.13.0 → 0.13.2

package/src/runtime/ssr.ts

@@ -4,6 +4,7 @@ import type { ReactElement } from "react";
 import type { BundleManifest } from "../bundler/types";
 import type { HydrationConfig, HydrationPriority } from "../spec/schema";
 import { PORTS, TIMEOUTS } from "../constants";
+import { escapeHtmlAttr, escapeJsonForInlineScript } from "./escape";
 
 // Re-export streaming SSR utilities
 export {
@@ -53,11 +54,7 @@ export interface SSROptions {
  */
 function serializeServerData(data: Record<string, unknown>): string {
   // serializeProps로 고급 직렬화 (Date, Map, Set 등 지원)
-  const json = serializeProps(data)
-    .replace(/</g, "\\u003c")
-    .replace(/>/g, "\\u003e")
-    .replace(/&/g, "\\u0026")
-    .replace(/'/g, "\\u0027");
+  const json = escapeJsonForInlineScript(serializeProps(data));
 
   return `<script id="__MANDU_DATA__" type="application/json">${json}</script>
 <script>window.__MANDU_DATA_RAW__ = document.getElementById('__MANDU_DATA__').textContent;</script>`;
@@ -71,7 +68,7 @@ function generateImportMap(manifest: BundleManifest): string {
     return "";
   }
 
-  const importMapJson = JSON.stringify(manifest.importMap, null, 2);
+  const importMapJson = escapeJsonForInlineScript(JSON.stringify(manifest.importMap, null, 2));
   return `<script type="importmap">${importMapJson}</script>`;
 }
 
@@ -93,33 +90,33 @@ function generateHydrationScripts(
 
   // Vendor modulepreload (React, ReactDOM 등 - 캐시 효율 극대화)
   if (manifest.shared.vendor) {
-    scripts.push(`<link rel="modulepreload" href="${manifest.shared.vendor}">`);
+    scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(manifest.shared.vendor)}">`);
   }
   if (manifest.importMap?.imports) {
     const imports = manifest.importMap.imports;
     // react-dom, react-dom/client 등 추가 preload
     if (imports["react-dom"] && imports["react-dom"] !== manifest.shared.vendor) {
-      scripts.push(`<link rel="modulepreload" href="${imports["react-dom"]}">`);
+      scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(imports["react-dom"])}">`);
     }
     if (imports["react-dom/client"]) {
-      scripts.push(`<link rel="modulepreload" href="${imports["react-dom/client"]}">`);
+      scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(imports["react-dom/client"])}">`);
     }
   }
 
   // Runtime modulepreload (hydration 실행 전 미리 로드)
   if (manifest.shared.runtime) {
-    scripts.push(`<link rel="modulepreload" href="${manifest.shared.runtime}">`);
+    scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(manifest.shared.runtime)}">`);
   }
 
   // Island 번들 modulepreload (성능 최적화 - prefetch only)
   const bundle = manifest.bundles[routeId];
   if (bundle) {
-    scripts.push(`<link rel="modulepreload" href="${bundle.js}">`);
+    scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(bundle.js)}">`);
   }
 
   // Runtime 로드 (hydrateIslands 실행 - dynamic import 사용)
   if (manifest.shared.runtime) {
-    scripts.push(`<script type="module" src="${manifest.shared.runtime}"></script>`);
+    scripts.push(`<script type="module" src="${escapeHtmlAttr(manifest.shared.runtime)}"></script>`);
   }
 
   return scripts.join("\n");
@@ -135,8 +132,8 @@ export function wrapWithIsland(
   priority: HydrationPriority = "visible",
   bundleSrc?: string
 ): string {
-  const srcAttr = bundleSrc ? ` data-mandu-src="${bundleSrc}"` : "";
-  return `<div data-mandu-island="${routeId}"${srcAttr} data-mandu-priority="${priority}">${content}</div>`;
+  const srcAttr = bundleSrc ? ` data-mandu-src="${escapeHtmlAttr(bundleSrc)}"` : "";
+  return `<div data-mandu-island="${escapeHtmlAttr(routeId)}"${srcAttr} data-mandu-priority="${escapeHtmlAttr(priority)}">${content}</div>`;
 }
 
 export function renderToHTML(element: ReactElement, options: SSROptions = {}): string {
@@ -160,7 +157,7 @@ export function renderToHTML(element: ReactElement, options: SSROptions = {}): s
   // - cssPath가 string이면 해당 경로 사용
   // - cssPath가 false 또는 undefined이면 링크 미삽입 (404 방지)
   const cssLinkTag = cssPath && cssPath !== false
-    ? `<link rel="stylesheet" href="${cssPath}${isDev ? `?t=${Date.now()}` : ""}">`
+    ? `<link rel="stylesheet" href="${escapeHtmlAttr(`${cssPath}${isDev ? `?t=${Date.now()}` : ""}`)}">`
     : "";
 
   let content = renderToString(element);
@@ -213,11 +210,11 @@ export function renderToHTML(element: ReactElement, options: SSROptions = {}): s
   }
 
   return `<!doctype html>
-<html lang="${lang}">
+<html lang="${escapeHtmlAttr(lang)}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${title}</title>
+  <title>${escapeHtmlAttr(title)}</title>
   ${cssLinkTag}
   ${headTags}
 </head>
@@ -247,9 +244,7 @@ function generateRouteScript(
     params: extractParamsFromUrl(pattern),
   };
 
-  const json = JSON.stringify(routeInfo)
-    .replace(/</g, "\\u003c")
-    .replace(/>/g, "\\u003e");
+  const json = escapeJsonForInlineScript(JSON.stringify(routeInfo));
 
   return `<script>window.__MANDU_ROUTE__ = ${json};</script>`;
 }
@@ -272,7 +267,7 @@ function generateClientRouterScript(manifest: BundleManifest): string {
 
   // 라우터 번들이 있으면 로드
   if (manifest.shared?.router) {
-    scripts.push(`<script type="module" src="${manifest.shared.router}"></script>`);
+    scripts.push(`<script type="module" src="${escapeHtmlAttr(manifest.shared.router)}"></script>`);
   }
 
   return scripts.join("\n");

package/src/runtime/streaming-ssr.ts

@@ -20,6 +20,7 @@ import { serializeProps } from "../client/serialize";
 import type { Metadata, MetadataItem } from "../seo/types";
 import { injectSEOIntoOptions, resolveSEO, type SEOOptions } from "../seo/integration/ssr";
 import { PORTS, TIMEOUTS } from "../constants";
+import { escapeHtmlAttr, escapeJsonForInlineScript, escapeJsString } from "./escape";
 
 // ========== Types ==========
 
@@ -257,18 +258,13 @@ function warnStreamingCaveats(isDev: boolean): void {
  * Shell 이후 에러는 이 방식으로 클라이언트에 전달
  */
 function generateErrorScript(error: Error, routeId: string): string {
-  const safeMessage = error.message
-    .replace(/\\/g, "\\\\")      // 백슬래시 먼저 (다른 이스케이프에 영향)
-    .replace(/\n/g, "\\n")       // 줄바꿈
-    .replace(/\r/g, "\\r")       // 캐리지 리턴
-    .replace(/</g, "\\u003c")    // XSS 방지
-    .replace(/>/g, "\\u003e")
-    .replace(/"/g, "\\u0022");
+  const safeMessage = escapeJsString(error.message);
+  const safeRouteId = escapeJsString(routeId);
 
   return `<script>
 (function() {
   window.__MANDU_STREAMING_ERROR__ = {
-    routeId: "${routeId}",
+    routeId: "${safeRouteId}",
     message: "${safeMessage}",
     timestamp: ${Date.now()}
   };
@@ -377,13 +373,13 @@ function generateHTMLShell(options: StreamingSSROptions): string {
   // - cssPath가 string이면 해당 경로 사용
   // - cssPath가 false 또는 undefined이면 링크 미삽입 (404 방지)
   const cssLinkTag = cssPath && cssPath !== false
-    ? `<link rel="stylesheet" href="${cssPath}${isDev ? `?t=${Date.now()}` : ""}">`
+    ? `<link rel="stylesheet" href="${escapeHtmlAttr(`${cssPath}${isDev ? `?t=${Date.now()}` : ""}`)}">`
     : "";
 
   // Import map (module scripts 전에 위치해야 함)
   let importMapScript = "";
   if (bundleManifest?.importMap && Object.keys(bundleManifest.importMap.imports).length > 0) {
-    const importMapJson = JSON.stringify(bundleManifest.importMap, null, 2);
+    const importMapJson = escapeJsonForInlineScript(JSON.stringify(bundleManifest.importMap, null, 2));
     importMapScript = `<script type="importmap">${importMapJson}</script>`;
   }
 
@@ -415,16 +411,16 @@ function generateHTMLShell(options: StreamingSSROptions): string {
     const bundle = bundleManifest.bundles[routeId];
     const bundleSrc = bundle?.js || "";
     const priority = hydration.priority || "visible";
-    islandOpenTag = `<div data-mandu-island="${routeId}" data-mandu-src="${bundleSrc}" data-mandu-priority="${priority}">`;
+    islandOpenTag = `<div data-mandu-island="${escapeHtmlAttr(routeId)}" data-mandu-src="${escapeHtmlAttr(bundleSrc)}" data-mandu-priority="${escapeHtmlAttr(priority)}">`;
   }
 
   // Import map은 module 스크립트보다 먼저 정의되어야 bare specifier 해석 가능
   return `<!DOCTYPE html>
-<html lang="${lang}">
+<html lang="${escapeHtmlAttr(lang)}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${title}</title>
+  <title>${escapeHtmlAttr(title)}</title>
   ${cssLinkTag}
   ${loadingStyles}
   ${importMapScript}
@@ -461,10 +457,7 @@ function generateHTMLTailContent(options: StreamingSSROptions): string {
         streaming: true,
       },
     };
-    const json = serializeProps(wrappedData)
-      .replace(/</g, "\\u003c")
-      .replace(/>/g, "\\u003e")
-      .replace(/&/g, "\\u0026");
+    const json = escapeJsonForInlineScript(serializeProps(wrappedData));
     scripts.push(`<script id="__MANDU_DATA__" type="application/json">${json}</script>`);
     scripts.push(`<script>window.__MANDU_DATA_RAW__ = document.getElementById('__MANDU_DATA__').textContent;</script>`);
   }
@@ -477,9 +470,7 @@ function generateHTMLTailContent(options: StreamingSSROptions): string {
       params: {},
       streaming: true,
     };
-    const json = JSON.stringify(routeInfo)
-      .replace(/</g, "\\u003c")
-      .replace(/>/g, "\\u003e");
+    const json = escapeJsonForInlineScript(JSON.stringify(routeInfo));
     scripts.push(`<script>window.__MANDU_ROUTE__ = ${json};</script>`);
   }
 
@@ -488,39 +479,39 @@ function generateHTMLTailContent(options: StreamingSSROptions): string {
 
   // 4. Vendor modulepreload (React, ReactDOM 등 - 캐시 효율 극대화)
   if (bundleManifest?.shared.vendor) {
-    scripts.push(`<link rel="modulepreload" href="${bundleManifest.shared.vendor}">`);
+    scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(bundleManifest.shared.vendor)}">`);
   }
   if (bundleManifest?.importMap?.imports) {
     const imports = bundleManifest.importMap.imports;
     if (imports["react-dom"] && imports["react-dom"] !== bundleManifest.shared.vendor) {
-      scripts.push(`<link rel="modulepreload" href="${imports["react-dom"]}">`);
+      scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(imports["react-dom"])}">`);
     }
     if (imports["react-dom/client"]) {
-      scripts.push(`<link rel="modulepreload" href="${imports["react-dom/client"]}">`);
+      scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(imports["react-dom/client"])}">`);
     }
   }
 
   // 5. Runtime modulepreload (hydration 실행 전 미리 로드)
   if (bundleManifest?.shared.runtime) {
-    scripts.push(`<link rel="modulepreload" href="${bundleManifest.shared.runtime}">`);
+    scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(bundleManifest.shared.runtime)}">`);
   }
 
   // 6. Island modulepreload
   if (bundleManifest && routeId) {
     const bundle = bundleManifest.bundles[routeId];
     if (bundle) {
-      scripts.push(`<link rel="modulepreload" href="${bundle.js}">`);
+      scripts.push(`<link rel="modulepreload" href="${escapeHtmlAttr(bundle.js)}">`);
     }
   }
 
   // 7. Runtime 로드
   if (bundleManifest?.shared.runtime) {
-    scripts.push(`<script type="module" src="${bundleManifest.shared.runtime}"></script>`);
+    scripts.push(`<script type="module" src="${escapeHtmlAttr(bundleManifest.shared.runtime)}"></script>`);
   }
 
   // 8. Router 스크립트
   if (enableClientRouter && bundleManifest?.shared?.router) {
-    scripts.push(`<script type="module" src="${bundleManifest.shared.router}"></script>`);
+    scripts.push(`<script type="module" src="${escapeHtmlAttr(bundleManifest.shared.router)}"></script>`);
   }
 
   // 9. HMR 스크립트 (개발 모드)
@@ -559,16 +550,16 @@ function generateHTMLTail(options: StreamingSSROptions): string {
  * Streaming 중에 데이터 도착 시 DOM에 주입
  */
 function generateDeferredDataScript(routeId: string, key: string, data: unknown): string {
-  const json = serializeProps({ [key]: data })
-    .replace(/</g, "\\u003c")
-    .replace(/>/g, "\\u003e");
+  const json = escapeJsonForInlineScript(serializeProps({ [key]: data }));
+  const safeRouteId = escapeJsString(routeId);
+  const safeKey = escapeJsString(key);
 
   return `<script>
 (function() {
   window.__MANDU_DEFERRED__ = window.__MANDU_DEFERRED__ || {};
-  window.__MANDU_DEFERRED__["${routeId}"] = window.__MANDU_DEFERRED__["${routeId}"] || {};
-  Object.assign(window.__MANDU_DEFERRED__["${routeId}"], ${json});
-  window.dispatchEvent(new CustomEvent('mandu:deferred-data', { detail: { routeId: "${routeId}", key: "${key}" } }));
+  window.__MANDU_DEFERRED__["${safeRouteId}"] = window.__MANDU_DEFERRED__["${safeRouteId}"] || {};
+  Object.assign(window.__MANDU_DEFERRED__["${safeRouteId}"], ${json});
+  window.dispatchEvent(new CustomEvent('mandu:deferred-data', { detail: { routeId: "${safeRouteId}", key: "${safeKey}" } }));
 })();
 </script>`;
 }

package/src/runtime/trace.ts

@@ -1,144 +1,144 @@
-/**
- * Mandu Trace 🧭
- * Lifecycle 단계별 추적 (옵션)
- */
-
-import type { ManduContext } from "../filling/context";
-
-export type TraceEvent =
-  | "request"
-  | "parse"
-  | "transform"
-  | "beforeHandle"
-  | "handle"
-  | "afterHandle"
-  | "mapResponse"
-  | "afterResponse"
-  | "error";
-
-export type TracePhase = "begin" | "end" | "error";
-
-export interface TraceEntry {
-  event: TraceEvent;
-  phase: TracePhase;
-  time: number;
-  name?: string;
-  error?: string;
-}
-
-export interface TraceCollector {
-  records: TraceEntry[];
-}
-
-export interface TraceReportEntry {
-  event: TraceEvent;
-  name?: string;
-  start: number;
-  end: number;
-  duration: number;
-}
-
-export interface TraceReport {
-  entries: TraceReportEntry[];
-  errors: TraceEntry[];
-}
-
-export const TRACE_KEY = "__mandu_trace";
-
-const now = (): number => {
-  if (typeof performance !== "undefined" && typeof performance.now === "function") {
-    return performance.now();
-  }
-  return Date.now();
-};
-
-export function enableTrace(ctx: ManduContext): TraceCollector {
-  const existing = ctx.get<TraceCollector>(TRACE_KEY);
-  if (existing) return existing;
-  const collector: TraceCollector = { records: [] };
-  ctx.set(TRACE_KEY, collector);
-  return collector;
-}
-
-export function getTrace(ctx: ManduContext): TraceCollector | undefined {
-  return ctx.get<TraceCollector>(TRACE_KEY);
-}
-
-/**
- * Build a normalized trace report with durations
- */
-export function buildTraceReport(collector: TraceCollector): TraceReport {
-  const entries: TraceReportEntry[] = [];
-  const errors: TraceEntry[] = [];
-  const stacks = new Map<string, TraceEntry[]>();
-
-  for (const record of collector.records) {
-    if (record.phase === "error") {
-      errors.push(record);
-      continue;
-    }
-
-    const key = `${record.event}:${record.name ?? ""}`;
-    if (record.phase === "begin") {
-      const stack = stacks.get(key) ?? [];
-      stack.push(record);
-      stacks.set(key, stack);
-      continue;
-    }
-
-    if (record.phase === "end") {
-      const stack = stacks.get(key);
-      const begin = stack?.pop();
-      if (!begin) continue;
-      entries.push({
-        event: record.event,
-        name: record.name,
-        start: begin.time,
-        end: record.time,
-        duration: record.time - begin.time,
-      });
-    }
-  }
-
-  return { entries, errors };
-}
-
-/**
- * Convert trace report to JSON string
- */
-export function formatTraceReport(report: TraceReport): string {
-  return JSON.stringify(report, null, 2);
-}
-
-export interface Tracer {
-  enabled: boolean;
-  begin: (event: TraceEvent, name?: string) => () => void;
-  error: (event: TraceEvent, err: unknown, name?: string) => void;
-}
-
-const NOOP_TRACER: Tracer = {
-  enabled: false,
-  begin: () => () => {},
-  error: () => {},
-};
-
-export function createTracer(ctx: ManduContext, enabled?: boolean): Tracer {
-  const shouldEnable = Boolean(enabled) || ctx.has(TRACE_KEY);
-  if (!shouldEnable) return NOOP_TRACER;
-
-  const collector = enableTrace(ctx);
-
-  return {
-    enabled: true,
-    begin: (event, name) => {
-      collector.records.push({ event, phase: "begin", time: now(), name });
-      return () => {
-        collector.records.push({ event, phase: "end", time: now(), name });
-      };
-    },
-    error: (event, err, name) => {
-      const message = err instanceof Error ? err.message : String(err);
-      collector.records.push({ event, phase: "error", time: now(), name, error: message });
-    },
-  };
-}
+/**
+ * Mandu Trace 🧭
+ * Lifecycle 단계별 추적 (옵션)
+ */
+
+import type { ManduContext } from "../filling/context";
+
+export type TraceEvent =
+  | "request"
+  | "parse"
+  | "transform"
+  | "beforeHandle"
+  | "handle"
+  | "afterHandle"
+  | "mapResponse"
+  | "afterResponse"
+  | "error";
+
+export type TracePhase = "begin" | "end" | "error";
+
+export interface TraceEntry {
+  event: TraceEvent;
+  phase: TracePhase;
+  time: number;
+  name?: string;
+  error?: string;
+}
+
+export interface TraceCollector {
+  records: TraceEntry[];
+}
+
+export interface TraceReportEntry {
+  event: TraceEvent;
+  name?: string;
+  start: number;
+  end: number;
+  duration: number;
+}
+
+export interface TraceReport {
+  entries: TraceReportEntry[];
+  errors: TraceEntry[];
+}
+
+export const TRACE_KEY = "__mandu_trace";
+
+const now = (): number => {
+  if (typeof performance !== "undefined" && typeof performance.now === "function") {
+    return performance.now();
+  }
+  return Date.now();
+};
+
+export function enableTrace(ctx: ManduContext): TraceCollector {
+  const existing = ctx.get<TraceCollector>(TRACE_KEY);
+  if (existing) return existing;
+  const collector: TraceCollector = { records: [] };
+  ctx.set(TRACE_KEY, collector);
+  return collector;
+}
+
+export function getTrace(ctx: ManduContext): TraceCollector | undefined {
+  return ctx.get<TraceCollector>(TRACE_KEY);
+}
+
+/**
+ * Build a normalized trace report with durations
+ */
+export function buildTraceReport(collector: TraceCollector): TraceReport {
+  const entries: TraceReportEntry[] = [];
+  const errors: TraceEntry[] = [];
+  const stacks = new Map<string, TraceEntry[]>();
+
+  for (const record of collector.records) {
+    if (record.phase === "error") {
+      errors.push(record);
+      continue;
+    }
+
+    const key = `${record.event}:${record.name ?? ""}`;
+    if (record.phase === "begin") {
+      const stack = stacks.get(key) ?? [];
+      stack.push(record);
+      stacks.set(key, stack);
+      continue;
+    }
+
+    if (record.phase === "end") {
+      const stack = stacks.get(key);
+      const begin = stack?.pop();
+      if (!begin) continue;
+      entries.push({
+        event: record.event,
+        name: record.name,
+        start: begin.time,
+        end: record.time,
+        duration: record.time - begin.time,
+      });
+    }
+  }
+
+  return { entries, errors };
+}
+
+/**
+ * Convert trace report to JSON string
+ */
+export function formatTraceReport(report: TraceReport): string {
+  return JSON.stringify(report, null, 2);
+}
+
+export interface Tracer {
+  enabled: boolean;
+  begin: (event: TraceEvent, name?: string) => () => void;
+  error: (event: TraceEvent, err: unknown, name?: string) => void;
+}
+
+const NOOP_TRACER: Tracer = {
+  enabled: false,
+  begin: () => () => {},
+  error: () => {},
+};
+
+export function createTracer(ctx: ManduContext, enabled?: boolean): Tracer {
+  const shouldEnable = Boolean(enabled) || ctx.has(TRACE_KEY);
+  if (!shouldEnable) return NOOP_TRACER;
+
+  const collector = enableTrace(ctx);
+
+  return {
+    enabled: true,
+    begin: (event, name) => {
+      collector.records.push({ event, phase: "begin", time: now(), name });
+      return () => {
+        collector.records.push({ event, phase: "end", time: now(), name });
+      };
+    },
+    error: (event, err, name) => {
+      const message = err instanceof Error ? err.message : String(err);
+      collector.records.push({ event, phase: "error", time: now(), name, error: message });
+    },
+  };
+}