feat: remove allow-same-origin for better security.

Author: knightedcodemonkey

docs/preview-sandbox-benchmark.md

@@ -0,0 +1,105 @@
+# Preview Sandbox Benchmark
+
+This benchmark captures preview-runtime timing before and after sandbox changes.
+
+## Metrics
+
+- First render latency
+- Median auto-render latency across 20 edits
+- p95 auto-render latency across 20 edits
+- Runtime diagnostic arrival latency after a known runtime error
+
+## Setup
+
+1. Start the app with `npm run dev`.
+2. Open the app in a fresh browser tab.
+3. Open DevTools console and run:
+
+```js
+window.__KNIGHTED_PREVIEW_TELEMETRY__ = []
+```
+
+4. Confirm auto-render is enabled.
+
+## Manual run
+
+1. Wait for the initial render to complete.
+2. Make 20 quick edits in the component editor (append a character, then remove it).
+3. Trigger one known runtime error (for example, throw inside `App`).
+4. In the console, run:
+
+```js
+const events = Array.isArray(window.__KNIGHTED_PREVIEW_TELEMETRY__)
+  ? window.__KNIGHTED_PREVIEW_TELEMETRY__
+  : []
+
+const byName = name => events.filter(event => event?.name === name)
+
+const renderStarts = byName('render-start')
+const renderCompletes = byName('render-complete')
+const iframeReady = byName('iframe-ready')
+const rendered = byName('rendered')
+const runtimeErrors = byName('runtime-error')
+
+const pairDurations = (starts, ends) => {
+  const count = Math.min(starts.length, ends.length)
+  const durations = []
+
+  for (let index = 0; index < count; index += 1) {
+    const start = starts[index]?.at
+    const end = ends[index]?.at
+    if (typeof start === 'number' && typeof end === 'number' && end >= start) {
+      durations.push(end - start)
+    }
+  }
+
+  return durations
+}
+
+const quantile = (values, ratio) => {
+  if (!Array.isArray(values) || values.length === 0) {
+    return null
+  }
+
+  const sorted = [...values].sort((a, b) => a - b)
+  const index = Math.min(
+    sorted.length - 1,
+    Math.max(0, Math.ceil(sorted.length * ratio) - 1),
+  )
+
+  return sorted[index]
+}
+
+const renderDurations = pairDurations(renderStarts, renderCompletes)
+const firstRenderLatency = renderDurations[0] ?? null
+const autoRenderDurations = renderDurations.slice(1, 21)
+
+const diagnosticsLatency = (() => {
+  const firstRuntimeError = runtimeErrors[0]
+  const firstRendered = rendered[0]
+  if (
+    !firstRuntimeError ||
+    typeof firstRuntimeError.at !== 'number' ||
+    !firstRendered ||
+    typeof firstRendered.at !== 'number'
+  ) {
+    return null
+  }
+
+  return firstRuntimeError.at - firstRendered.at
+})()
+
+console.table({
+  firstRenderLatency,
+  autoRenderMedian: quantile(autoRenderDurations, 0.5),
+  autoRenderP95: quantile(autoRenderDurations, 0.95),
+  diagnosticsLatency,
+  iframeReadyEvents: iframeReady.length,
+  runtimeErrorEvents: runtimeErrors.length,
+})
+```
+
+## Notes
+
+- Rerun if CDN failures occur because runtime imports are network-backed.
+- Compare baseline and updated runs using the same browser and machine state.

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('')
     }
   }