Skip to main content
Puntego runs cleanly under a strict Content Security Policy. The boot script and runtime are nonce-aware: you pass your per-request nonce once, and Puntego reuses it for every script and style element it injects. No 'unsafe-inline' and no 'unsafe-eval' are required for the guide to load, chat, point, and run Verified Actions. This page gives you a baseline policy that covers the core experience, then the exact additions to make when you enable Verified Actions or voice. Treat the samples as a starting point and confirm them against your own application’s directives — most sites already serve a CSP, and the values below are meant to be merged into it rather than to replace it.

​
Minimal baseline policy

This is the smallest policy that loads the guide, lets it chat, and lets it point and highlight on your page. Replace {NONCE} with your per-request nonce value (the same one you put on the boot script). A real header is a single line; it is wrapped here for readability.

​
What each origin is for

Test before you ship. The injected stylesheet carries your nonce, so a nonce-based style-src admits it without 'unsafe-inline'. We do not promise a nonce-only style-src is sufficient for every setup — your other app directives and any third-party styles still apply — so verify the policy in a staging environment and watch the browser console for CSP violations before rolling it to production.

​
Add Verified Actions (Turnstile)

Verified Actions protect writes with a Cloudflare Turnstile challenge. Turnstile loads a script and renders its challenge in a frame, so add its origin to two directives:

​
Add voice

Voice is optional per workspace. When it is enabled, the runtime opens realtime connections to the speech providers, so extend connect-src:
A strict-CSP site must also grant microphone access through a Permissions-Policy header, or the browser blocks capture before Puntego ever asks:
If voice provider credentials are not configured for your workspace, Puntego falls back to an internal mock voice and these origins are not contacted — but it is safe to leave them in place.

​
Complete policy (all features)

With Verified Actions and voice both enabled, the merged policy looks like this:

​
Install snippet

Use the standard snippet when you do not serve a nonce-based CSP. Keep crossorigin="anonymous" in both forms.

​
Standard

​
Strict CSP (with nonce)

Pass the same nonce value to both nonce and data-nonce:
Copy the canonical snippet from Dashboard → Install so your app ID stays aligned with the deployed worker and embed assets.

​
How nonce propagation works

You only set the nonce once. The boot script reads it from either nonce or data-nonce, then the runtime reuses that value for everything it adds to the page:
  • The boot script reads your nonce from nonce or data-nonce.
  • The runtime stamps the same nonce on every follow-on script it loads (the runtime chunk and, when voice is active, the voice chunk).
  • The runtime stamps the same nonce on the single stylesheet it injects for the guide’s shadow root.
Because Puntego propagates the nonce instead of inlining unguarded scripts or styles, your script-src and style-src can stay nonce-based with no 'unsafe-inline'.

​
Next steps

  • Install Puntego — the full script tag, configuration attributes, and domain allowlist.
  • Framework guides — read a per-request nonce from next/headers and pass it through the @puntego/react provider, plus single-page-app routing and a no-code Google Tag Manager template.
  • Verified Actions — what the Turnstile origins protect and how approved actions are configured.
  • Security — how Puntego isolates the guide, redacts PII, and keeps telemetry clean.