Fix and comment security concerns

packages/md-react-preview/app/src/preview-block.tsx

@@ -113,11 +113,17 @@ export function PreviewBlock({
   const initialColorScheme = useRef(colorScheme);
   useEffect(() => {
     if (colorScheme === initialColorScheme.current) return;
-    iframeRef.current?.contentWindow?.postMessage({ type: "mrp-theme", theme: colorScheme }, "*");
+    // Security: specify origin instead of "*" to restrict postMessage recipients
+    iframeRef.current?.contentWindow?.postMessage(
+      { type: "mrp-theme", theme: colorScheme },
+      window.location.origin,
+    );
   }, [colorScheme]);
 
   useEffect(() => {
     function onMessage(e: MessageEvent) {
+      // Security: validate postMessage origin to prevent cross-origin message spoofing
+      if (e.origin !== window.location.origin) return;
       if (e.data?.type === "mrp-resize" && e.data?.blockId === blockId) {
         setIframeHeight(e.data.height);
       }
@@ -198,6 +204,14 @@ export function PreviewBlock({
           >
             <ExternalLinkIcon />
           </a>
+          {/*
+            Security note: no sandbox attribute is set on this iframe.
+            Preview blocks are authored by trusted developers (markdown authors),
+            and adding sandbox="allow-scripts" alone would break ES module loading
+            (CORS) and postMessage origin checks. Adding both allow-scripts and
+            allow-same-origin together provides no real security benefit for
+            same-origin iframes.
+          */}
           <iframe
             ref={iframeRef}
             src={previewUrl}

packages/md-react-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@izumisy/md-react-preview",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "md-react-preview — component previewer powered by MDX",
   "bin": {
     "mrp": "./dist/cli.mjs"

packages/md-react-preview/src/preview-transform.ts

@@ -33,7 +33,16 @@ export function extractPreviewBlocks(source: string): PreviewBlock[] {
 }
 
 export function escapeJsString(s: string): string {
-  return s.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n");
+  return (
+    s
+      .replace(/\\/g, "\\\\")
+      .replace(/"/g, '\\"')
+      .replace(/\n/g, "\\n")
+      // Security: escape characters that could break out of JS string literals
+      .replace(/\r/g, "\\r")
+      .replace(/\u2028/g, "\\u2028")
+      .replace(/\u2029/g, "\\u2029")
+  );
 }
 
 /**

packages/vite-plugin-react-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@izumisy/vite-plugin-react-preview",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Vite plugin for rendering React component previews in iframe",
   "type": "module",
   "exports": {

packages/vite-plugin-react-preview/src/preview-plugin.ts

@@ -125,7 +125,9 @@ function applyTheme(theme) {
 if (themeParam === "dark" || themeParam === "light") {
   applyTheme(themeParam);
 }
+// Security: validate postMessage origin to prevent cross-origin message spoofing
 window.addEventListener("message", function(e) {
+  if (e.origin !== location.origin) return;
   if (e.data && e.data.type === "mrp-theme" && (e.data.theme === "dark" || e.data.theme === "light")) {
     applyTheme(e.data.theme);
   }
@@ -146,9 +148,10 @@ registry[blockId]().then(function(mod) {
   createRoot(root).render(createElement(mod.default));
 
   new ResizeObserver(function() {
+    // Security: specify origin instead of "*" to restrict postMessage recipients
     window.parent.postMessage(
       { type: "mrp-resize", blockId: blockId, height: root.scrollHeight },
-      "*"
+      location.origin
     );
   }).observe(root);
 });

packages/vitepress-plugin-react-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@izumisy/vitepress-plugin-react-preview",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "VitePress plugin for rendering React component previews via iframe",
   "type": "module",
   "exports": {

packages/vitepress-plugin-react-preview/src/PreviewBlock.vue

@@ -51,14 +51,17 @@ let themeObserver: MutationObserver | null = null;
 function syncThemeToIframe() {
   const iframe = iframeRef.value;
   if (iframe?.contentWindow) {
+    // Security: specify origin instead of "*" to restrict postMessage recipients
     iframe.contentWindow.postMessage(
       { type: "mrp-theme", theme: currentTheme.value },
-      "*"
+      window.location.origin
     );
   }
 }
 
 function onMessage(e: MessageEvent) {
+  // Security: validate postMessage origin to prevent cross-origin message spoofing
+  if (e.origin !== window.location.origin) return;
   if (
     e.data?.type === "mrp-resize" &&
     e.data?.blockId === props.blockId
@@ -112,6 +115,14 @@ onBeforeUnmount(() => {
     </template>
     <template v-else>
       <div class="mrp-preview-render">
+        <!--
+          Security note: no sandbox attribute is set on this iframe.
+          Preview blocks are authored by trusted developers (markdown authors),
+          and adding sandbox="allow-scripts" alone would break ES module loading
+          (CORS) and postMessage origin checks. Adding both allow-scripts and
+          allow-same-origin together provides no real security benefit for
+          same-origin iframes.
+        -->
         <iframe
           ref="iframeRef"
           :src="previewUrl"