Web SDK
Security and CSP
What the SDK does to stay safe on your page, which Content Security Policy rules it needs, and how allowed websites work.
Public key
The key that starts with pk_ can read published screens and send events. It cannot edit anything and is safe in your page. To stop other sites from using it, add your domains to Allowed websites (Pro plan and above, see Allowed domains).
- With a list set, a request whose
Originis not on it gets403 origin_not_allowed. Add every site, each subdomain, andlocalhostwhile you develop. - With no list, any website can use the key.
What the SDK protects
- The screen draws in a shadow root. Your CSS cannot break it and its CSS cannot leak out.
- Screen text is escaped before its markdown becomes HTML.
customVariablesvalues show as plain text, never HTML. - Only
http,https,mailto,teland links starting with a single/are opened or handed toonOpenUrl. Ajavascript:ordata:link is refused and reported toonError. - Custom fonts load only from
httpsURLs. - Analytics requests use
text/plainposts with no cookies and no credentials.
Content Security Policy
If your site sets a CSP, allow:
| Directive | Value | Why |
|---|---|---|
script-src | Where you load the SDK from: your bundle, or the host of the script URL | The SDK code. |
style-src | 'unsafe-inline' | The SDK injects styles into the screen's shadow root and onto the page for overlays. |
connect-src | https://json-ui-kit-api.vercel.app, or your apiUrl | Delivery and events. |
font-src | https://cdn.jsdelivr.net | Fonts picked in the editor load from Fontsource on jsDelivr. |
img-src | Where the screen's images live (Miniwall image storage, or your own URLs) | Images. |