CSP Iframe Test - Main Page

\n \n

This page: No CSP restrictions

Embedded iframe: sandbox.html with restrictive CSP (default-src 'none')

Nested iframe: Points to sauce.html which tries to load external resources

\n\n

Demo Options

🔒 Double-Iframe Demo (srcdoc with inherited CSP)

\n \n

Sandbox iframe (with CSP: default-src 'none')

\n \n

\n\n

Open DevTools Network tab to see which requests are blocked by CSP.

Open DevTools Console to see CSP violation reports.

\n\n`,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n // Double-iframe demo - HOST PAGE that embeds guard.html with sandbox attribute\n if (path === \"/double-iframe.html\") {\n return new Response(\n `\n\n\n Double-Iframe CSP Demo - Host Page\n \n\n\n

🔒 Double-Iframe CSP Demo - Host Page

← Back to main demo

\n \n

Architecture:

This page (Host): No CSP, embeds guard.html with sandbox=\"allow-scripts\"
guard.html: Served with ultra-strict CSP header: default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'
Inner srcdoc iframe: Inherits the HTTP CSP from guard.html, attempts network requests

\n\n

Key insight: The inner srcdoc iframe inherits the CSP from the HTTP headers of its parent (guard.html), \n even though srcdoc content doesn't have its own HTTP response. This provides a way to enforce CSP on dynamically generated content.

\n\n

<!-- HOST PAGE -->\n<iframe src=\"https://different-sub-origin.mydomain.com/guard.html\" sandbox=\"allow-scripts\"></iframe>\n\n<!-- guard.html (Served with CSP: default-src 'none'; script-src 'unsafe-inline') -->\n<html>\n<body>\n    <iframe sandbox=\"allow-scripts\" srcdoc=\"...\">\n        <!-- Content inherits the HTTP Header CSP from guard.html -->\n    </iframe>\n</body>\n</html>

\n\n

Guard iframe (sandboxed, with strict CSP header)

\n \n

\n\n

Open DevTools Console to see CSP violation errors.

Open DevTools Network tab to verify requests are being blocked (you should see failed/blocked requests).

\n\n`,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n // Guard page - served with EXTREMELY strict CSP, embeds srcdoc iframe\n if (path === \"/guard.html\") {\n // The srcdoc content - properly escaped for HTML attribute\n // This will try various network requests that should ALL be blocked by the inherited CSP\n const srcdocContent = `\n\n\n\n \n\n\n

🚫 Inner srcdoc iframe (inherits CSP from guard.html)

All network requests below should be BLOCKED by inherited CSP

\n\n

1. Image Request (img tag)

\n $\"test\"$ ✓ LOADED (CSP failed!)'\"\n onerror=\"this.nextElementSibling.innerHTML='✗ BLOCKED by CSP'\" />\n

\n\n

2. Image Request (different domain)

\n $\"test\"\n$ ✓ LOADED (CSP failed!)'\"\n onerror=\"this.nextElementSibling.innerHTML='✗ BLOCKED by CSP'\" />\n

\n\n

3. Fetch API Request

Testing...

\n \n

\n\n

4. XMLHttpRequest

Testing...

\n \n

\n\n

5. WebSocket Connection

Testing...

\n \n

\n\n

6. EventSource (Server-Sent Events)

Testing...

\n \n

\n\n

7. Beacon API

Testing...

\n \n

\n\n

8. Dynamic Script Injection

Testing...

\n \n

\n\n

9. CSS @import via Style Element

Testing...

\n \n

\n\n

10. Image via CSS background-image

Check above: if no image visible = BLOCKED by CSP

\n\n

11. Font Loading via @font-face

Testing...

\n \n Font test text\n \n

\n\n

12. Object/Embed Tag

\n\n`.trim();\n\n // Escape the srcdoc content for use in HTML attribute\n const escapedSrcdoc = srcdocContent\n .replace(/&/g, '&')\n .replace(/\"/g, '"')\n .replace(//g, '>');\n\n return new Response(\n `\n\n\n Guard Page (Strict CSP)\n \n\n\n

🛡️ Guard Page (Strict CSP via HTTP Header)

\n \n

This page's CSP header:

\n Content-Security-Policy: default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'\n

The inner srcdoc iframe below inherits this CSP and cannot make any network requests.

\n\n \n\n`,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n // EXTREMELY strict CSP - blocks ALL network requests\n // Only allows inline scripts/styles - NO network access at all\n \"Content-Security-Policy\":\n \"default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'\",\n },\n },\n );\n }\n\n // Sandbox page - served with restrictive CSP header\n if (path === \"/sandbox.html\") {\n return new Response(\n `\n\n\n Sandbox Page\n \n\n\n

Sandbox Page (CSP: default-src 'none')

\n \n

This page has a restrictive CSP policy: default-src 'none'; frame-src 'self'; style-src 'unsafe-inline'

The nested iframe below tries to load resources that should be blocked.

\n\n

Nested iframe (sauce.html):

\n \n\n`,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n // Restrictive CSP - blocks most things except frames from self and inline styles\n \"Content-Security-Policy\":\n \"default-src 'none'; frame-src 'self'; style-src 'unsafe-inline'; report-uri /csp-report\",\n },\n },\n );\n }\n\n // Sauce page - tries to load various external resources\n if (path === \"/sauce.html\") {\n return new Response(\n `\n\n\n Sauce Page - External Resources\n \n \n \n \n\n\n

Sauce Page - Testing Resource Loading

This page attempts to load various external resources:

\n\n

1. External Image (via img tag)

\n $\"External$ \n

\n\n

2. External Image (via CSS background)

\n (CSS background)\n

\n\n

3. External Script

\n \n Script not loaded\n \n

\n\n

4. Inline Script Test

\n Inline script not executed\n \n

\n\n

5. Fetch Request

\n Fetch not attempted yet\n \n

\n\n

6. Font Loading

\n \n This text uses an external font\n

\n\n

7. WebSocket Connection

\n WebSocket not attempted yet\n \n

\n\n`,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n // CSP violation report endpoint\n if (path === \"/csp-report\") {\n const body = await req.text();\n console.log(\"CSP Violation Report:\", body);\n return new Response(\"Report received\", { status: 204 });\n }\n\n // 404 for other paths\n return new Response(\"Not Found\", { status: 404 });\n}\n","deleted","label",[102],"permalink","https://www.val.town/x/paulkinlan/sandbox-test/code/main.ts","extension","actionData","errors"]