Add blob: support to default CSP frame-src policy (#1336)

Copilot · richard-to · web-flow · commit 34b0fc202ab3 · 2026-01-29T22:07:06.000-08:00
Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: richard-to &lt;539889+richard-to@users.noreply.github.com&gt;
diff --git a/mesop/examples/testing/blob_iframe.py b/mesop/examples/testing/blob_iframe.py
@@ -0,0 +1,25 @@
+import mesop as me
+
+
+@me.page(path="/testing/blob_iframe", title="Blob iframe test")
+def page():
+  me.text("Testing blob iframe support")
+  # This will create an iframe with a blob URL using inline JavaScript
+  me.html(
+    """
+    <div id="blob-iframe-container">
+      <script>
+        // Create a blob URL and set it as iframe src
+        const content = '<html><body><h1>Blob iframe content</h1></body></html>';
+        const blob = new Blob([content], {type: 'text/html'});
+        const blobUrl = URL.createObjectURL(blob);
+        const iframe = document.createElement('iframe');
+        iframe.src = blobUrl;
+        iframe.id = 'test-blob-iframe';
+        // Revoke the blob URL after the iframe loads to prevent memory leak
+        iframe.onload = () => URL.revokeObjectURL(blobUrl);
+        document.getElementById('blob-iframe-container').appendChild(iframe);
+      </script>
+    </div>
+    """
+  )
diff --git a/mesop/server/static_file_serving.py b/mesop/server/static_file_serving.py
@@ -253,8 +253,8 @@ def add_security_headers(response: Response):
       {
         "default-src": "'self'",
         "font-src": "'self' fonts.gstatic.com data:",
-        # Mesop app developers should be able to iframe other sites.
-        "frame-src": "*",
+        # Mesop app developers should be able to iframe other sites from various origins.
+        "frame-src": "* blob:",
         # Mesop app developers should be able to load images and media from various origins.
         "img-src": "'self' data: https: http: blob:",
         "media-src": "'self' data: https: blob:",
diff --git a/mesop/tests/e2e/csp_frame_src_test.ts b/mesop/tests/e2e/csp_frame_src_test.ts
@@ -0,0 +1,32 @@
+import {expect} from '@playwright/test';
+import {testInProdOnly} from './e2e_helpers';
+
+testInProdOnly('CSP frame-src includes blob', async ({page}) => {
+  // Listen for CSP violations before navigating
+  const cspErrors: string[] = [];
+  page.on('console', (msg) => {
+    if (
+      msg.type() === 'error' &&
+      msg.text().includes('Content Security Policy')
+    ) {
+      cspErrors.push(msg.text());
+    }
+  });
+
+  // Get the CSP header from the response
+  const response = await page.goto('/testing/blob_iframe');
+  const headers = response?.headers();
+  const cspHeader = headers?.['content-security-policy'];
+
+  // Verify CSP header is present
+  expect(cspHeader).toBeDefined();
+
+  // Verify frame-src directive includes blob:
+  expect(cspHeader).toContain('frame-src');
+  expect(cspHeader).toMatch(/frame-src[^;]*blob:/);
+
+  await page.waitForLoadState('networkidle');
+
+  // No CSP violations should be present
+  expect(cspErrors).toHaveLength(0);
+});
diff --git a/mesop/tests/e2e/snapshots/web_security_test.ts_csp-allowed-font-srcs.txt b/mesop/tests/e2e/snapshots/web_security_test.ts_csp-allowed-font-srcs.txt
@@ -1,6 +1,6 @@
 default-src 'self'
 font-src 'self' fonts.gstatic.com data: fontsrc1 fontsrc2
-frame-src *
+frame-src * blob:
 img-src 'self' data: https: http: blob:
 media-src 'self' data: https: blob:
 style-src 'self' 'unsafe-inline' fonts.googleapis.com
diff --git a/mesop/tests/e2e/snapshots/web_security_test.ts_csp-allowed-iframe-parents.txt b/mesop/tests/e2e/snapshots/web_security_test.ts_csp-allowed-iframe-parents.txt
@@ -1,6 +1,6 @@
 default-src 'self'
 font-src 'self' fonts.gstatic.com data:
-frame-src *
+frame-src * blob:
 img-src 'self' data: https: http: blob:
 media-src 'self' data: https: blob:
 style-src 'self' 'unsafe-inline' fonts.googleapis.com
diff --git a/mesop/tests/e2e/snapshots/web_security_test.ts_csp-escaping.txt b/mesop/tests/e2e/snapshots/web_security_test.ts_csp-escaping.txt
@@ -1,6 +1,6 @@
 default-src 'self'
 font-src 'self' fonts.gstatic.com data:
-frame-src *
+frame-src * blob:
 img-src 'self' data: https: http: blob:
 media-src 'self' data: https: blob:
 style-src 'self' 'unsafe-inline' fonts.googleapis.com http://google.com/stylesheets%2C1%3B2
diff --git a/mesop/tests/e2e/snapshots/web_security_test.ts_csp-trusted-types.txt b/mesop/tests/e2e/snapshots/web_security_test.ts_csp-trusted-types.txt
@@ -1,6 +1,6 @@
 default-src 'self'
 font-src 'self' fonts.gstatic.com data:
-frame-src *
+frame-src * blob:
 img-src 'self' data: https: http: blob:
 media-src 'self' data: https: blob:
 style-src 'self' 'unsafe-inline' fonts.googleapis.com
diff --git a/mesop/tests/e2e/snapshots/web_security_test.ts_csp.txt b/mesop/tests/e2e/snapshots/web_security_test.ts_csp.txt
@@ -1,6 +1,6 @@
 default-src 'self'
 font-src 'self' fonts.gstatic.com data:
-frame-src *
+frame-src * blob:
 img-src 'self' data: https: http: blob:
 media-src 'self' data: https: blob:
 style-src 'self' 'unsafe-inline' fonts.googleapis.com
