From 14d4d2c5bb4c52562dbd392bd28136a7a719ea99 Mon Sep 17 00:00:00 2001
From: IzumiSy <beetle-noise@gmx.com>
Date: Fri, 3 Apr 2026 15:35:10 +0900
Subject: [PATCH 1/2] Fix and comment security concerns

---
 .../md-react-preview/app/src/preview-block.tsx   | 16 +++++++++++++++-
 .../md-react-preview/src/preview-transform.ts    | 11 ++++++++++-
 .../src/preview-plugin.ts                        |  5 ++++-
 .../src/PreviewBlock.vue                         | 13 ++++++++++++-
 4 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/packages/md-react-preview/app/src/preview-block.tsx b/packages/md-react-preview/app/src/preview-block.tsx
index 872d693..dc31bae 100644
--- a/packages/md-react-preview/app/src/preview-block.tsx
+++ b/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}
diff --git a/packages/md-react-preview/src/preview-transform.ts b/packages/md-react-preview/src/preview-transform.ts
index 6cc537d..f4ae49a 100644
--- a/packages/md-react-preview/src/preview-transform.ts
+++ b/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")
+  );
 }
 
 /**
diff --git a/packages/vite-plugin-react-preview/src/preview-plugin.ts b/packages/vite-plugin-react-preview/src/preview-plugin.ts
index 8eb87a9..f9c5ad3 100644
--- a/packages/vite-plugin-react-preview/src/preview-plugin.ts
+++ b/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);
 });
diff --git a/packages/vitepress-plugin-react-preview/src/PreviewBlock.vue b/packages/vitepress-plugin-react-preview/src/PreviewBlock.vue
index 3bccdd3..96d2e2a 100644
--- a/packages/vitepress-plugin-react-preview/src/PreviewBlock.vue
+++ b/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"

From b2fc0048788f618dea2dd9ac6807e1954c731be9 Mon Sep 17 00:00:00 2001
From: IzumiSy <beetle-noise@gmx.com>
Date: Fri, 3 Apr 2026 15:40:48 +0900
Subject: [PATCH 2/2] Bump versions

---
 packages/md-react-preview/package.json               | 2 +-
 packages/vite-plugin-react-preview/package.json      | 2 +-
 packages/vitepress-plugin-react-preview/package.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/md-react-preview/package.json b/packages/md-react-preview/package.json
index 8d44821..2265582 100644
--- a/packages/md-react-preview/package.json
+++ b/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"
diff --git a/packages/vite-plugin-react-preview/package.json b/packages/vite-plugin-react-preview/package.json
index 5c21e97..b9680d3 100644
--- a/packages/vite-plugin-react-preview/package.json
+++ b/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": {
diff --git a/packages/vitepress-plugin-react-preview/package.json b/packages/vitepress-plugin-react-preview/package.json
index 91ef4af..3f63156 100644
--- a/packages/vitepress-plugin-react-preview/package.json
+++ b/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": {