feat: added esm module import and iframe sandboxing

henryhale · henryhale · commit af3351810b8c · 2025-01-09T15:27:43.000+03:00
- feat: added `type='module'` on preview script - feat: added `sandbox='allow-scripts'` on iframe to prevent user scripts from accessing the parent window - refactor: use Blob and [URL.createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static) for managing performant previews
diff --git a/source/components/AppPreview.vue b/source/components/AppPreview.vue
@@ -7,19 +7,19 @@ const store = useAppStore()
 const iframe = ref()
 
 const content = computed(() => {
-	return `<html><head><style type="text/css">${store.code.css}</style></head><body>${store.code.html}<script type="text/javascript">(function() { try { ${store.code.js} } catch(err) { console.error(err); } })();</` + `script></body></html>`
+	return `<html><head><style type="text/css">${store.code.css}</style></head><body>${store.code.html}<script type="module">${store.code.js}</` + `script></body></html>`
 })
 
-let tid;
+let tid, objectURL;
 function refreshPreview(x) {
 	if (!iframe.value) return
 	if (tid) clearTimeout(tid);
 	tid = setTimeout(() => {
-		const doc = iframe.value.contentWindow.document;
-		doc.open();
-		doc.writeln(content.value);
-		doc.close();
-	}, 200);
+		if (objectURL) URL.revokeObjectURL(objectURL)
+		const blob = new Blob([content.value], { type: 'text/html' })
+		objectURL = URL.createObjectURL(blob)
+		iframe.value.src = objectURL
+	}, 300);
 }
 
 watchEffect(() => {
@@ -28,5 +28,5 @@ watchEffect(() => {
 </script>
 
 <template>
-	<iframe ref="iframe" src="about:blank" frameborder="0" title="preview" class="h-full w-full"></iframe>
+	<iframe ref="iframe" src="about:blank" frameborder="0" title="preview" sandbox="allow-scripts" class="h-full w-full"></iframe>
 </template>
