feat: remove allow-same-origin for better security. (#69)

Author: knightedcodemonkey

playwright/rendering-modes.spec.ts

@@ -326,6 +326,38 @@ test('editing-transient missing reference runtime errors are suppressed', async
   await expect(page.getByRole('status', { name: 'App status' })).not.toHaveText('Error')
 })
 
+test('preview iframe sandbox isolates parent origin access', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  const iframe = page.locator('#preview-host iframe')
+  const sandbox = await iframe.getAttribute('sandbox')
+
+  expect(typeof sandbox).toBe('string')
+  expect(sandbox?.includes('allow-same-origin')).toBeFalsy()
+
+  await setComponentEditorSource(
+    page,
+    [
+      'const canReadParentStorage = (() => {',
+      '  try {',
+      '    return Boolean(window.parent.localStorage)',
+      '  } catch {',
+      '    return false',
+      '  }',
+      '})()',
+      '',
+      'export const App = () => (',
+      "  <button type='button'>",
+      "    {canReadParentStorage ? 'parent-readable' : 'parent-blocked'}",
+      '  </button>',
+      ')',
+    ].join('\n'),
+  )
+
+  await expect(page.getByRole('status', { name: 'App status' })).toHaveText('Rendered')
+  await expect(getPreviewFrame(page).getByRole('button')).toContainText('parent-blocked')
+})
+
 test('post-render runtime exceptions from iframe are reported in preview panel', async ({
   page,
 }) => {

src/app.js

@@ -226,6 +226,14 @@ const showAppToast = message => {
 const previewBackground = createPreviewBackgroundController({
   previewBgColorInput,
   getPreviewHost: () => previewHost,
+  onBackgroundColorChange: color => {
+    if (
+      renderRuntime &&
+      typeof renderRuntime.updatePreviewBackgroundColor === 'function'
+    ) {
+      renderRuntime.updatePreviewBackgroundColor(color)
+    }
+  },
   getDefaultPreviewBackgroundColor: () => {
     if (document.documentElement.dataset.theme === 'light') {
       return '#ffffff'

src/modules/preview-background.js

@@ -39,6 +39,7 @@ export const createPreviewBackgroundController = ({
   previewBgColorInput,
   getPreviewHost,
   getDefaultPreviewBackgroundColor,
+  onBackgroundColorChange,
 }) => {
   let previewBackgroundColor = null
   let previewBackgroundCustomized = false
@@ -66,26 +67,21 @@ export const createPreviewBackgroundController = ({
       return
     }
 
-    const iframe = previewHost.querySelector('iframe')
-    const iframeDocument = iframe?.contentDocument ?? null
-
     if (typeof color === 'string' && color.length > 0) {
       previewHost.style.backgroundColor = color
       previewHost.style.setProperty('--preview-iframe-background-color', color)
 
-      if (iframeDocument) {
-        iframeDocument.documentElement.style.backgroundColor = color
-        iframeDocument.body.style.backgroundColor = color
+      if (typeof onBackgroundColorChange === 'function') {
+        onBackgroundColorChange(color)
       }
       return
     }
 
     previewHost.style.removeProperty('background-color')
     previewHost.style.removeProperty('--preview-iframe-background-color')
 
-    if (iframeDocument) {
-      iframeDocument.documentElement.style.removeProperty('background-color')
-      iframeDocument.body.style.removeProperty('background-color')
+    if (typeof onBackgroundColorChange === 'function') {
+      onBackgroundColorChange('')
     }
   }