Security and self-hosting

Configure framing, messaging, and command access separately. Use the same exact host origins across all three layers.

Allow host origins

VITE_PUBLIC_EMBED_ORIGINS=https://product.example,https://staging.example

Use origins only—scheme, hostname, and optional port—with no path. The renderer always accepts its own origin for same-site integrations.

Allow framing

Serve the embed route with a matching frame-ancestors policy:

Content-Security-Policy: frame-ancestors 'self' https://product.example

Keep the full workbench unframeable and scope this policy to /embed and /embed/*. The host page may also need:

Content-Security-Policy: frame-src https://garphield.com

Grant commands

The default embed surface covers project loading, themes, edge filters, binding visibility, and story navigation. Set an origin-specific command list when a host also needs registry commands:

VITE_PUBLIC_EMBED_CAPABILITIES={"https://product.example":["setDocument","setTheme","setEdgeFilter","setBindingEnabled","storyboard.next","storyboard.prev","storyboard.goto","selection.select","camera.frame"]}

A configured list replaces the default for that origin. Keep the grant as small as the integration allows.

Development

http://localhost:3000 and http://localhost:4321 are different origins. Use the development host’s exact origin in the renderer allowlist and command grant, and pass the renderer’s absolute URL to createGarphield().

The driver and renderer both use exact postMessage origins. Requests with an unknown method, invalid version, untrusted origin, or missing capability are refused.