From a7df95a613566f57239595c3e3f81cc7a60d30d8 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 1 Feb 2024 17:52:44 +0800 Subject: [PATCH] Optimize renderer security --- .../Playground/Output/Preview/Render.tsx | 39 +++++-------------- .../Playground/Output/Preview/iframe.html | 9 ----- .../Playground/Output/Preview/index.tsx | 7 +--- 3 files changed, 12 insertions(+), 43 deletions(-) diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx index 62464d2..8f803cb 100644 --- a/src/components/Playground/Output/Preview/Render.tsx +++ b/src/components/Playground/Output/Preview/Render.tsx @@ -4,7 +4,6 @@ import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw' interface RenderProps { iframeKey: string compiledCode: string - onError?: (errorMsg: string) => void } interface IMessage { @@ -30,38 +29,19 @@ const getIframeUrl = (iframeRaw: string) => { const iframeUrl = getIframeUrl(iframeRaw) -const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => { +const Render = ({ iframeKey, compiledCode }: RenderProps) => { const iframeRef = useRef(null) const [loaded, setLoaded] = useState(false) - const handleMessage = ({ data }: { data: IMessage }) => { - const { type, msg } = data - switch (type) { - case 'LOADED': - setLoaded(true) - break - case 'ERROR': - onError?.(msg) - break - case 'DONE': - onError?.('') - } - } - - useEffect(() => { - window.addEventListener('message', handleMessage) - - return () => { - window.removeEventListener('message', handleMessage) - } - }, []) - useEffect(() => { if (loaded) { - iframeRef.current?.contentWindow?.postMessage({ - type: 'UPDATE', - data: { compiledCode } - } as IMessage) + iframeRef.current?.contentWindow?.postMessage( + { + type: 'UPDATE', + data: { compiledCode } + } as IMessage, + '*' + ) } }, [compiledCode, loaded]) @@ -71,7 +51,8 @@ const Render = ({ iframeKey, compiledCode, onError }: RenderProps) => { key={iframeKey} ref={iframeRef} src={iframeUrl} - sandbox="allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-same-origin" + onLoad={() => setLoaded(true)} + sandbox="allow-downloads allow-forms allow-modals allow-scripts" /> ) } diff --git a/src/components/Playground/Output/Preview/iframe.html b/src/components/Playground/Output/Preview/iframe.html index b485bf9..23aea0b 100644 --- a/src/components/Playground/Output/Preview/iframe.html +++ b/src/components/Playground/Output/Preview/iframe.html @@ -8,14 +8,6 @@ diff --git a/src/components/Playground/Output/Preview/index.tsx b/src/components/Playground/Output/Preview/index.tsx index d960c35..686a760 100644 --- a/src/components/Playground/Output/Preview/index.tsx +++ b/src/components/Playground/Output/Preview/index.tsx @@ -23,10 +23,6 @@ const Preview = ({ const [errorMsg, setErrorMsg] = useState('') const [compiledCode, setCompiledCode] = useState('') - const handleOnError = (errorMsg: string) => { - setErrorMsg(errorMsg) - } - useEffect(() => { if (!Object.keys(files).length || !importMap || !entryPoint.length) { return @@ -36,6 +32,7 @@ const Preview = ({ setCompiledCode( `${preExpansionCode}\n${result.outputFiles[0].text}\n${postExpansionCode}` ) + setErrorMsg('') }) .catch((e: Error) => { setErrorMsg(`编译失败：${e.message}`) @@ -44,7 +41,7 @@ const Preview = ({ return (
- + {errorMsg &&
{errorMsg}
}
)