🌟 Hello World with iframe

This same-origin page contains an iframe to an external site.

\n\n

Embedded External Site:

\n The iframe below attempts to load https://paul.kinlan.me\n

\n \n

\n\n

📝 Note:

\n This page has no CSP policy, so the external iframe below should load successfully.\n When this page is embedded in an iframe on a parent page with CSP frame-src 'self', \n this page itself will load (same-origin), and this external iframe will also load (no CSP on this document).\n

\n\n",[],[183,190],{"_104":200,"_96":201,"_156":202,"_158":184,"_159":141,"_160":203,"_162":118,"_106":204,"_101":32,"_164":195,"_166":205,"_167":22,"_168":-5,"_169":206,"_99":207},"364f71de-b118-11f0-895c-0224a6c84d84","hello-with-nested-srcdoc.html","364f7292-b118-11f0-895c-0224a6c84d84",26,["D",1761337799687],"\n\n\n \n \n Hello World with Nested srcdoc\n \n \n\n\n

🌟 Hello World with Nested srcdoc

This same-origin page contains a srcdoc iframe with an external iframe inside it.

\n\n

srcdoc iframe with External Site:

\n The srcdoc iframe below contains an iframe that attempts to load https://paul.kinlan.me\n

\n \n

\n\n

📝 Note:

\n This page is loaded in a same-origin iframe. The srcdoc iframe above inherits the top-level CSP policy, \n so the external iframe within the srcdoc should be blocked.\n

\n\n",[],[183,201],{"_104":209,"_96":210,"_156":211,"_158":184,"_159":141,"_160":212,"_162":118,"_106":213,"_101":32,"_164":195,"_166":214,"_167":22,"_168":-5,"_169":215,"_99":216},"1fbcbac2-b117-11f0-af94-0224a6c84d84","hello.html","1fbcbc2a-b117-11f0-af94-0224a6c84d84",9,["D",1761337332320],"\n\n\n \n \n Hello World\n \n\n\n

👋 Hello World!

This is a simple same-origin page with no iframes.

Current URL: /hello

This page loads successfully in same-origin iframes when CSP allows 'self'.

\n\n",[],[183,210],{"_104":218,"_96":219,"_156":220,"_158":184,"_159":141,"_160":221,"_162":118,"_106":222,"_101":212,"_164":195,"_166":223,"_167":22,"_168":-5,"_169":224,"_99":225},"b1ecc59e-b118-11f0-adbc-0224a6c84d84","index.html","05727fc6-b117-11f0-8e4b-0224a6c84d84",36,["D",1761338007074],"\n\n\n \n \n CSP iframe Demo\n \n \n\n\n

CSP iframe Demo

\n \n

\n This demo tests different Content Security Policy (CSP) frame-src configurations:\n

\n\n

Test 1: frame-src 'none'

Blocks all iframes. Attempts to embed https://paul.kinlan.me

\n \n Run Test 1\n \n

\n\n

Test 2: frame-src 'self'

Allows same-origin iframes only. Tests both same-origin and external embeds.

\n \n Run Test 2\n \n

\n\n

Test 3: frame-src 'self' (Nested)

Same as Test 2, but embeds a same-origin page that itself contains an iframe to an external site.

\n \n Run Test 3\n \n

\n\n

💡 What to expect:

• Test 1: External iframe should be blocked (CSP violation)
• Test 2: Same-origin iframe works, external iframe blocked
• Test 3: Same-origin iframe works, but its nested external iframe is blocked
• Test 3 (srcdoc): srcdoc iframe works, but its nested external iframe is blocked
• Test 3 (Nested srcdoc): Same-origin iframe works, srcdoc works, but triple-nested external iframe is blocked

\n\n",[],[183,219],{"_104":227,"_96":228,"_156":229,"_158":184,"_159":141,"_160":230,"_162":118,"_106":231,"_101":32,"_164":195,"_166":232,"_167":22,"_168":-5,"_169":233,"_99":234},"0c0122ac-b117-11f0-b10f-0224a6c84d84","test1.html","0c012360-b117-11f0-b10f-0224a6c84d84",6,["D",1761337299213],"\n\n\n \n \n Test 1: CSP frame-src 'none'\n \n \n\n\n

\n ← Back to Home\n

\n \n

Test 1: CSP frame-src 'none'

\n \n

CSP Header:

\n Content-Security-Policy: frame-src 'none'\n

\n\n

Expected Result:

The iframe below should be blocked and you should see a CSP violation error in the browser console.

\n\n

iframe to https://paul.kinlan.me:

\n \n

\n If CSP is working correctly, this iframe should not load and you'll see an error in the console.\n

\n\n

🔍 Check the Console

Open your browser's developer console (F12) to see the CSP violation error.

\n\n",[],[183,228],{"_104":236,"_96":237,"_156":238,"_158":184,"_159":141,"_160":239,"_162":118,"_106":240,"_101":32,"_164":195,"_166":241,"_167":22,"_168":-5,"_169":242,"_99":243},"13b53790-b117-11f0-a9e4-0224a6c84d84","test2.html","13b5390c-b117-11f0-a9e4-0224a6c84d84",7,["D",1761337312135],"\n\n\n \n \n Test 2: CSP frame-src 'self'\n \n \n\n\n

\n ← Back to Home\n

\n \n

Test 2: CSP frame-src 'self'

\n \n

CSP Header:

\n Content-Security-Policy: frame-src 'self'\n

\n\n

Expected Results:

• Same-origin iframe: Should load successfully
• External iframe: Should be blocked with CSP violation

\n\n

✅ Same-Origin iframe (/hello):

\n \n

\n This should load successfully since it's from the same origin.\n

\n\n

❌ External iframe:

\n \n

\n This should be blocked by CSP and show an error in the console.\n

\n\n

🔍 Check the Console

Open your browser's developer console (F12) to see any CSP violation errors for the external iframe.

\n\n",[],[183,237],{"_104":245,"_96":246,"_156":247,"_158":184,"_159":141,"_160":248,"_162":118,"_106":249,"_101":32,"_164":195,"_166":250,"_167":22,"_168":-5,"_169":251,"_99":252},"2d48e476-b118-11f0-9437-0224a6c84d84","test3-nested-srcdoc.html","2d48e584-b118-11f0-9437-0224a6c84d84",25,["D",1761337784547],"\n\n\n \n \n Test 3 (Nested srcdoc): CSP frame-src 'self' (Triple Nested)\n \n \n\n\n

\n ← Back to Home\n

\n \n

Test 3 (Nested srcdoc): CSP frame-src 'self' (Triple Nested)

\n \n

CSP Header:

\n Content-Security-Policy: frame-src 'self'\n

\n\n

Expected Results:

• Same-origin iframe with nested srcdoc: Same-origin loads, srcdoc content loads
• External iframe within srcdoc: Should be blocked with CSP violation (triple nested)
• Direct external iframe: Should be blocked with CSP violation

\n\n

🔍 Triple Nesting Structure:

Level 1: Main page (CSP: frame-src 'self')

Level 2: Same-origin iframe (/hello-with-nested-srcdoc)

Level 3: srcdoc iframe within Level 2

Level 4: External iframe (https://paul.kinlan.me) within Level 3 srcdoc

\n\n

🔄 Same-Origin with Nested srcdoc:

\n \n

\n This same-origin iframe loads and contains a srcdoc iframe, but the external iframe within the srcdoc should be blocked.\n

\n\n

❌ Direct External iframe:

\n \n

\n This should be blocked by CSP and show an error in the console.\n

\n\n

🔍 Understanding Triple-Nested CSP

\n The CSP policy cascades through all iframe levels. Even though the srcdoc is nested within a same-origin iframe, \n it still inherits the original CSP policy from the top-level document, so external iframes at any nesting level are blocked.\n

\n\n",[],[183,246],{"_104":254,"_96":255,"_156":256,"_158":184,"_159":141,"_160":257,"_162":118,"_106":258,"_101":32,"_164":195,"_166":259,"_167":22,"_168":-5,"_169":260,"_99":261},"c4dcd2e4-b117-11f0-bad5-0224a6c84d84","test3-srcdoc.html","c4dcd3c0-b117-11f0-bad5-0224a6c84d84",18,["D",1761337609355],"\n\n\n \n \n Test 3 (srcdoc): CSP frame-src 'self' (Nested)\n \n \n\n\n

\n ← Back to Home\n

\n \n

Test 3 (srcdoc): CSP frame-src 'self' (Nested)

\n \n

CSP Header:

\n Content-Security-Policy: frame-src 'self'\n

\n\n

Expected Results:

• srcdoc iframe with nested external iframe: srcdoc content loads, but nested external iframe is blocked
• Direct external iframe: Should be blocked with CSP violation

\n\n

🔄 srcdoc with Nested iframe:

\n \n

\n This srcdoc iframe loads, but the external iframe inside it should be blocked.\n

\n\n

❌ Direct External iframe:

\n \n

\n This should be blocked by CSP and show an error in the console.\n

\n\n

🔍 Understanding srcdoc with CSP

\n The srcdoc attribute creates an inline document that inherits the parent's CSP policy. \n Unlike same-origin iframes loaded via URL, srcdoc content is considered part of the parent document's origin \n but still inherits CSP restrictions, so external iframes within srcdoc are blocked.\n

\n\n",[],[183,255],{"_104":263,"_96":264,"_156":265,"_158":184,"_159":141,"_160":266,"_162":118,"_106":267,"_101":161,"_164":195,"_166":268,"_167":22,"_168":-5,"_169":269,"_99":270},"795452de-b117-11f0-8dc5-0224a6c84d84","test3.html","1bbc370e-b117-11f0-ae7e-0224a6c84d84",13,["D",1761337482626],"\n\n\n \n \n Test 3: CSP frame-src 'self' (Nested)\n \n \n\n\n

\n ← Back to Home\n

\n \n

Test 3: CSP frame-src 'self' (Nested)

\n \n

CSP Header:

\n Content-Security-Policy: frame-src 'self'\n

\n\n

Expected Results:

• Same-origin iframe with nested external iframe: Same-origin loads, but nested external iframe is blocked
• Direct external iframe: Should be blocked with CSP violation

\n\n

🔄 Same-Origin with Nested iframe:

\n \n

\n This same-origin iframe loads, but the external iframe inside it should be blocked.\n

\n\n

❌ Direct External iframe:

\n \n

\n This should be blocked by CSP and show an error in the console.\n

\n\n

🔍 Understanding CSP Scope

\n CSP policies apply only to the document that sets them. When a same-origin iframe loads, \n it gets its own document context. Since `/hello-with-iframe` doesn't set any CSP headers,\n the external iframe within it should load successfully.\n

\n\n",[],[183,264],[183],{"_104":273,"_96":274,"_156":275,"_158":-5,"_159":141,"_160":276,"_162":118,"_106":277,"_101":278,"_164":195,"_166":279,"_167":22,"_168":-5,"_169":280,"_99":281},"71400e34-b118-11f0-90b9-0224a6c84d84","README.md","f6ebd9ca-b116-11f0-8ab2-0224a6c84d84",32,["D",1761337898571],4,"# CSP iframe Demo\n\nA simple demonstration of Content Security Policy (CSP) `frame-src` directive behavior with different configurations.\n\n## Test Pages\n\n1. **Test 1** (`/test1`) - CSP: `frame-src 'none'`\n - Attempts to embed https://paul.kinlan.me (should be blocked)\n\n2. **Test 2** (`/test2`) - CSP: `frame-src 'self'`\n - Embeds a same-origin page (should work)\n - Attempts to embed https://paul.kinlan.me (should be blocked)\n\n3. **Test 3** (`/test3`) - CSP: `frame-src 'self'`\n - Embeds a same-origin page that contains an iframe to https://paul.kinlan.me\n - Attempts to embed https://paul.kinlan.me directly (should be blocked)\n\n## Structure\n\n- `backend/index.ts` - Main Hono server with CSP headers\n- `frontend/` - Static HTML pages for each test\n- `frontend/hello.html` - Simple hello world page (no iframes)\n- `frontend/hello-with-iframe.html` - Hello world page with iframe to external site\n- `frontend/hello-with-nested-srcdoc.html` - Hello world page with srcdoc containing external iframe",[],[274],{"_104":283,"_96":284,"_156":285,"_158":-5,"_159":141,"_160":194,"_162":118,"_106":286,"_101":32,"_164":287,"_166":73,"_167":22,"_168":-5,"_169":288,"_99":289},"6fb41378-b116-11f0-b18c-0224a6c84d84","main.ts","6fb41422-b116-11f0-b18c-0224a6c84d84",["D",1761337036987],"script",[],[284],"files",[153,171,181,188,199,208,217,226,235,244,253,262,272,282],"counts",{"_294":32,"_295":194,"_296":32,"_297":298},"pulls","branches","forks","envVars",{"_299":32,"_300":32},"count","emptyCount","contents",[],{"_104":218,"_96":219,"_156":220,"_158":184,"_159":141,"_160":221,"_162":118,"_106":304,"_101":212,"_164":195,"_166":223,"_167":22,"_168":-5,"_99":305},["D",1761338007074],[183,219],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_94":95,"_96":97,"_98":44,"_99":100,"_102":314,"_195":319,"_322":323,"_367":368,"_380":-7,"_381":32,"_382":22},{"_104":105,"_96":97,"_106":315,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":118,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":316,"_135":317,"_138":318,"_150":22},["D",1761337036972],{"_94":95,"_133":134},{"_94":95,"_137":134,"_14":114},{"_101":140,"_96":44,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":97,"_149":95},{"_104":218,"_96":219,"_156":220,"_158":184,"_159":141,"_160":221,"_162":118,"_106":320,"_101":212,"_164":195,"_166":223,"_167":22,"_168":-5,"_99":321},["D",1761338007074],[183,219],"history",[324,326,331,335,339,344,349,353,358,363],{"_104":218,"_159":141,"_156":220,"_96":219,"_166":223,"_164":195,"_101":212,"_158":184,"_106":325,"_160":221,"_168":-5},["D",1761338007074],{"_104":327,"_159":141,"_156":220,"_96":219,"_166":328,"_164":195,"_101":175,"_158":184,"_106":329,"_160":330,"_168":-5},"a4494cdc-b118-11f0-a607-0224a6c84d84","\n\n\n \n \n CSP iframe Demo\n \n \n\n\n

CSP iframe Demo

\n \n

\n This demo tests different Content Security Policy (CSP) frame-src configurations:\n

\n\n

Test 1: frame-src 'none'

Blocks all iframes. Attempts to embed https://paul.kinlan.me

\n \n Run Test 1\n \n

\n\n

Test 2: frame-src 'self'

Allows same-origin iframes only. Tests both same-origin and external embeds.

\n \n Run Test 2\n \n

\n\n

Test 3: frame-src 'self' (Nested)

Same as Test 2, but embeds a same-origin page that itself contains an iframe to an external site.

\n \n Run Test 3\n \n

\n\n

Test 3 (srcdoc): frame-src 'self' (Nested with srcdoc)

Same as Test 3, but uses srcdoc attribute instead of loading a separate HTML file.

\n \n Run Test 3 (srcdoc)\n \n

\n\n

Test 3 (Nested srcdoc): frame-src 'self' (Triple Nested)

Triple-nested scenario: same-origin iframe → srcdoc iframe → external iframe. Tests CSP inheritance through multiple levels.

\n \n Run Test 3 (Nested srcdoc)\n \n

\n\n

💡 What to expect:

• Test 1: External iframe should be blocked (CSP violation)
• Test 2: Same-origin iframe works, external iframe blocked
• Test 3: Same-origin iframe works, but its nested external iframe is blocked

\n\n",["D",1761337984174],35,{"_104":332,"_159":141,"_156":220,"_96":219,"_166":223,"_164":195,"_101":239,"_158":184,"_106":333,"_160":334,"_168":-5},"614321ce-b118-11f0-aa58-0224a6c84d84",["D",1761337871747],30,{"_104":336,"_159":141,"_156":220,"_96":219,"_166":328,"_164":195,"_101":230,"_158":184,"_106":337,"_160":338,"_168":-5},"582023da-b118-11f0-a900-0224a6c84d84",["D",1761337856409],29,{"_104":340,"_159":141,"_156":220,"_96":219,"_166":341,"_164":195,"_101":185,"_158":184,"_106":342,"_160":343,"_168":-5},"f3674180-b117-11f0-aa47-0224a6c84d84","\n\n\n \n \n CSP iframe Demo\n \n \n\n\n

CSP iframe Demo

\n \n

\n This demo tests different Content Security Policy (CSP) frame-src configurations:\n

\n\n

Test 1: frame-src 'none'

Blocks all iframes. Attempts to embed https://paul.kinlan.me

\n \n Run Test 1\n \n

\n\n

Test 2: frame-src 'self'

Allows same-origin iframes only. Tests both same-origin and external embeds.

\n \n Run Test 2\n \n

\n\n

Test 3: frame-src 'self' (Nested)

Same as Test 2, but embeds a same-origin page that itself contains an iframe to an external site.

\n \n Run Test 3\n \n

\n\n

💡 What to expect:

• Test 1: External iframe should be blocked (CSP violation)
• Test 2: Same-origin iframe works, external iframe blocked
• Test 3: Same-origin iframe works, but its nested external iframe is blocked
• Test 3 (srcdoc): srcdoc iframe works, but its nested external iframe is blocked

\n\n",["D",1761337687432],24,{"_104":345,"_159":141,"_156":220,"_96":219,"_166":346,"_164":195,"_101":278,"_158":184,"_106":347,"_160":348,"_168":-5},"eac0f0ee-b117-11f0-997c-0224a6c84d84","\n\n\n \n \n CSP iframe Demo\n \n \n\n\n

CSP iframe Demo

\n \n

\n This demo tests different Content Security Policy (CSP) frame-src configurations:\n

\n\n

Test 1: frame-src 'none'

Blocks all iframes. Attempts to embed https://paul.kinlan.me

\n \n Run Test 1\n \n

\n\n

Test 2: frame-src 'self'

Allows same-origin iframes only. Tests both same-origin and external embeds.

\n \n Run Test 2\n \n

\n\n

Test 3: frame-src 'self' (Nested)

Same as Test 2, but embeds a same-origin page that itself contains an iframe to an external site.

\n \n Run Test 3\n \n

\n\n

Test 3 (srcdoc): frame-src 'self' (Nested with srcdoc)

Same as Test 3, but uses srcdoc attribute instead of loading a separate HTML file.

\n \n Run Test 3 (srcdoc)\n \n

\n\n

💡 What to expect:

• Test 1: External iframe should be blocked (CSP violation)
• Test 2: Same-origin iframe works, external iframe blocked
• Test 3: Same-origin iframe works, but its nested external iframe is blocked

\n\n",["D",1761337672906],23,{"_104":350,"_159":141,"_156":220,"_96":219,"_166":341,"_164":195,"_101":161,"_158":184,"_106":351,"_160":352,"_168":-5},"d2ef3278-b117-11f0-aedf-0224a6c84d84",["D",1761337632961],21,{"_104":354,"_159":141,"_156":220,"_96":219,"_166":346,"_164":195,"_101":355,"_158":184,"_106":356,"_160":357,"_168":-5},"ce931af0-b117-11f0-bad5-0224a6c84d84",2,["D",1761337625646],20,{"_104":359,"_159":141,"_156":220,"_96":219,"_166":360,"_164":195,"_101":194,"_158":184,"_106":361,"_160":362,"_168":-5},"807766fa-b117-11f0-9286-0224a6c84d84","\n\n\n \n \n CSP iframe Demo\n \n \n\n\n

CSP iframe Demo

\n \n

\n This demo tests different Content Security Policy (CSP) frame-src configurations:\n

\n\n

Test 1: frame-src 'none'

Blocks all iframes. Attempts to embed https://paul.kinlan.me

\n \n Run Test 1\n \n

\n\n

Test 2: frame-src 'self'

Allows same-origin iframes only. Tests both same-origin and external embeds.

\n \n Run Test 2\n \n

\n\n

Test 3: frame-src 'self' (Nested)

Same as Test 2, but embeds a same-origin page that itself contains an iframe to an external site.

\n \n Run Test 3\n \n

\n\n

💡 What to expect:

• Test 1: External iframe should be blocked (CSP violation)
• Test 2: Same-origin iframe works, external iframe blocked
• Test 3: Same-origin iframe works, and its nested external iframe also works (no CSP inheritance)

\n\n",["D",1761337494603],15,{"_104":364,"_159":141,"_156":220,"_96":219,"_166":365,"_164":195,"_101":32,"_158":184,"_106":366,"_160":185,"_168":-5},"05727efe-b117-11f0-8e4b-0224a6c84d84","\n\n\n \n \n CSP iframe Demo\n \n \n\n\n

CSP iframe Demo

\n \n

\n This demo tests different Content Security Policy (CSP) frame-src configurations:\n

\n\n

Test 1: frame-src 'none'

Blocks all iframes. Attempts to embed https://paul.kinlan.me

\n \n Run Test 1\n \n

\n\n

Test 2: frame-src 'self'

Allows same-origin iframes only. Tests both same-origin and external embeds.

\n \n Run Test 2\n \n

\n\n

Test 3: frame-src 'self' (Nested)

Same as Test 2, but embeds a same-origin page that itself contains an iframe to an external site.

\n \n Run Test 3\n \n

\n\n

💡 What to expect:

• Test 1: External iframe should be blocked (CSP violation)
• Test 2: Same-origin iframe works, external iframe blocked
• Test 3: Same-origin iframe works, but its nested external iframe is blocked

\n\n",["D",1761337288196],"versions",[369,371,372,373,374,375,376,377,378,379],{"_195":324,"_370":326},"previous",{"_195":326,"_370":331},{"_195":331,"_370":335},{"_195":335,"_370":339},{"_195":339,"_370":344},{"_195":344,"_370":349},{"_195":349,"_370":353},{"_195":353,"_370":358},{"_195":358,"_370":363},{"_195":363,"_370":-5},"versionNumber","page","hasNext","actionData","errors"]

paulkinlan

iframe-csp

History for index.html