support custom csp and nested sandboxes

components/layout.js

@@ -2,18 +2,9 @@ export class Layout extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
-    this.header = document.createElement('m-header')
+    this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
     this.editing = false
-    this.header.editing = this.editing
+    this.header = document.createElement('m-header')
-    this.header.addEventListener('click-edit', () => {
-      this.editing = !this.editing
-      this.header.editing = this.editing
-    })
-    this.shadowRoot.appendChild(this.header)
-    this.load()
-    addEventListener('hashchange', () => {
-      this.load()
-    })
   }
 
   connectedCallback() {
@@ -30,12 +21,23 @@ export class Layout extends HTMLElement {
       }
     `
     this.shadowRoot.appendChild(style)
+    this.header.editing = this.editing
+    this.header.addEventListener('click-edit', () => {
+      this.editing = !this.editing
+      this.header.editing = this.editing
+    })
+    this.shadowRoot.appendChild(this.header)
+    this.load()
+    addEventListener('hashchange', () => {
+      this.load()
+    })
   }
 
   load() {
     const path = this.path
     const prevPage = this.page
     this.page = document.createElement('m-page')
+    this.page.csp = this.csp
     this.page.path = path
     if (prevPage !== undefined) {
       prevPage.remove()

components/page.js

@@ -35,6 +35,7 @@ export class Page extends HTMLElement {
   constructor() {
     super()
     const shadow = this.attachShadow({mode: 'open'})
+    this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
     this.textArea = document.createElement('textarea')
     this.textArea.addEventListener('input', e => {
       this.body = e.target.value
@@ -80,16 +81,18 @@ export class Page extends HTMLElement {
     const wrap = document.createElement('div')
     this.shadowRoot.appendChild(wrap)
     const tmp = document.createElement('iframe')
+    if (this.csp !== undefined) {
       tmp.sandbox = "allow-same-origin allow-scripts"
       const url = new URL(
         '/-/frame', location.href
       )
-    url.searchParams.set(
+      url.searchParams.set('csp', this.csp)
-      'csp',
-      "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
-    )
       url.searchParams.set('html', frameHtml)
       tmp.src = url.href
+    } else {
+      tmp.sandbox = "allow-scripts"
+      tmp.srcdoc = frameHtml
+    }
     wrap.insertAdjacentHTML(
       'beforeend', tmp.outerHTML
     )
@@ -97,7 +100,7 @@ export class Page extends HTMLElement {
     this.frame = frames[frames.length - 1]
     this.textArea.addEventListener('blur', e => {
       const msg = ['srcdoc', e.target.value]
-this.frame.contentWindow.postMessage(msg)
+this.frame.contentWindow.postMessage(msg, '*')
     })
   }