@izumisy/vitepress-plugin-react-preview 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/package.json +12 -2
- package/src/PreviewBlock.vue +12 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# @izumisy/vitepress-plugin-react-preview
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@izumisy/vitepress-plugin-react-preview)
|
|
4
|
+
|
|
3
5
|
VitePress plugin for rendering live React component previews inside your VitePress documentation site.
|
|
4
6
|
|
|
5
7
|
Transforms `` ```tsx preview `` fenced blocks in Markdown into interactive previews rendered via iframes, with full style isolation and dark mode support.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@izumisy/vitepress-plugin-react-preview",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "VitePress plugin for rendering React component previews via iframe",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -14,8 +14,18 @@
|
|
|
14
14
|
"dist/**",
|
|
15
15
|
"src/PreviewBlock.vue"
|
|
16
16
|
],
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "https://github.com/IzumiSy/md-react-preview",
|
|
20
|
+
"directory": "packages/vitepress-plugin-react-preview"
|
|
21
|
+
},
|
|
22
|
+
"author": "IzumiSy",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"publishConfig": {
|
|
25
|
+
"access": "public"
|
|
26
|
+
},
|
|
17
27
|
"dependencies": {
|
|
18
|
-
"@izumisy/vite-plugin-react-preview": "0.1.
|
|
28
|
+
"@izumisy/vite-plugin-react-preview": "0.1.1"
|
|
19
29
|
},
|
|
20
30
|
"devDependencies": {
|
|
21
31
|
"@types/markdown-it": "^14.1.2",
|
package/src/PreviewBlock.vue
CHANGED
|
@@ -51,14 +51,17 @@ let themeObserver: MutationObserver | null = null;
|
|
|
51
51
|
function syncThemeToIframe() {
|
|
52
52
|
const iframe = iframeRef.value;
|
|
53
53
|
if (iframe?.contentWindow) {
|
|
54
|
+
// Security: specify origin instead of "*" to restrict postMessage recipients
|
|
54
55
|
iframe.contentWindow.postMessage(
|
|
55
56
|
{ type: "mrp-theme", theme: currentTheme.value },
|
|
56
|
-
|
|
57
|
+
window.location.origin
|
|
57
58
|
);
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
61
|
|
|
61
62
|
function onMessage(e: MessageEvent) {
|
|
63
|
+
// Security: validate postMessage origin to prevent cross-origin message spoofing
|
|
64
|
+
if (e.origin !== window.location.origin) return;
|
|
62
65
|
if (
|
|
63
66
|
e.data?.type === "mrp-resize" &&
|
|
64
67
|
e.data?.blockId === props.blockId
|
|
@@ -112,6 +115,14 @@ onBeforeUnmount(() => {
|
|
|
112
115
|
</template>
|
|
113
116
|
<template v-else>
|
|
114
117
|
<div class="mrp-preview-render">
|
|
118
|
+
<!--
|
|
119
|
+
Security note: no sandbox attribute is set on this iframe.
|
|
120
|
+
Preview blocks are authored by trusted developers (markdown authors),
|
|
121
|
+
and adding sandbox="allow-scripts" alone would break ES module loading
|
|
122
|
+
(CORS) and postMessage origin checks. Adding both allow-scripts and
|
|
123
|
+
allow-same-origin together provides no real security benefit for
|
|
124
|
+
same-origin iframes.
|
|
125
|
+
-->
|
|
115
126
|
<iframe
|
|
116
127
|
ref="iframeRef"
|
|
117
128
|
:src="previewUrl"
|