How it works
Scripting, granted. Origin, withheld.
The whole security model of AI Canvas is one sentence, and it is worth understanding rather than trusting. Here it is in full, along with what an AI assistant needs to be told so the app it writes you actually works.
The bargain
Why embedding a stranger’s JavaScript is normally a bad idea.
A script you paste into a normal WordPress page runs as your site. It shares the page’s origin, which means it can read your cookies, reach into your storage, and act with the authority of whoever is logged in — including you, in wp-admin. That is the deal every embed code quietly asks you to accept, and it is why cautious organizations end up with sites that cannot do anything interesting.
A canvas refuses that bargain. It is served into an iframe carrying sandbox="allow-scripts" and nothing else — never allow-same-origin. The browser hands it a scripting engine and denies it an identity. It can compute, animate, count, respond. It cannot see who you are, because as far as the browser is concerned it is nobody.
Layer 1
A sandbox with no origin
Scripting allowed, same-origin withheld. Cookies, storage and session are not merely hidden from the app — they are not reachable by it.
Layer 2
A directory that cannot execute
Canvas files land in a location configured to run nothing. Even a file that was smuggled past the validator would sit there inert.
Layer 3
Headers your server proves
A content-security policy and a nosniff header enforce the sandbox at the transport layer. The Status screen tests your actual server and reports what it actually sent back.
Layer 4
Publishing is a privilege
Only a role trusted with raw HTML can create a canvas. An author who cannot be trusted with a script tag cannot smuggle one in through this door either.
Ask an AI for one
The four sentences that make a generated app actually run.
Assistants default to habits a sandbox will not permit: a CDN import here, a saved preference there. Tell them the constraints up front and the first draft usually works. Paste this above whatever you are asking for.
Write a single self-contained HTML file. All CSS and JavaScript must be inline — no external requests of any kind (no CDNs, no fonts, no analytics, no images from other domains). It will run in an iframe with sandbox="allow-scripts" and NO same-origin, so localStorage, sessionStorage and cookies are unavailable: keep all state in JavaScript variables. Inherit colors from the host page where possible, and make it keyboard accessible.
Then describe the app itself: “…a mortgage calculator with a payment breakdown”, “…a five-question quiz that scores at the end”, “…an interactive diagram of the water cycle”. What comes back is a canvas.
The obvious objections
Frequently asked
If a canvas can’t make network requests, can it save anything?
Not by itself, and that is the point — a calculator that quietly phones home is the thing we are avoiding. When an app genuinely needs to capture something, it hands off to the site’s own form pipeline, which already has consent, double opt-in and rate limiting. The Lead Magnet canvas in the gallery does exactly that.
Will my canvases look wrong if I change the site’s design?
No. Canvases are handed the active design’s colors and type at render time rather than baking in a palette, so switching your look restyles them along with everything else. An app you published a year ago follows a redesign you do tomorrow.
What if my host doesn’t send the security headers?
You will know, because the Status screen probes your own server and turns red, naming the exact header that went missing. It does not assume the headers are being delivered simply because the code asked for them — the claim is only as good as what your host actually returns.
Is this just an iframe? Couldn’t I do that myself?
You could, and the failure mode is a single forgotten word. Adding allow-same-origin alongside allow-scripts quietly returns every power the sandbox was there to remove, and the page looks identical either way. What is on offer here is that the unsafe combination is not reachable, the storage directory cannot execute, the headers are verified live, and none of it depends on remembering.
See one running.
Four canvases ship with this demo, live in the gallery. Open one, then open its source — it really is a single file.