How can we help you?

Securing the Velaro Chat Widget with Content Security Policy (CSP)

The Velaro chat widget is fully compatible with strict Content Security Policy (CSP) using a per-request nonce and the CSP Level 3 'strict-dynamic' source expression. This is the modern, recommended way to lock down inline scripts on your website without maintaining a brittle allowlist of third-party domains.

No Velaro-side configuration is required. You control everything from your own response headers and HTML.

How It Works

When your page sends a CSP header containing script-src 'nonce-' 'strict-dynamic', browsers do two things:

  1. Only ``

    Replace with the value you generated in step 1. Replace SITE_ID with your Velaro Site ID.

    4. Test

    Open browser DevTools → Console. You should see no CSP violations related to the Velaro widget loading.

    What You Do NOT Need to Do

    • You do not need to nonce any other Velaro script tags. The widget bundle is loaded dynamically by the loader — strict-dynamic covers it.
    • You do not need to allowlist cdn.velaro.com in script-src. With strict-dynamic, source allowlists are ignored.
    • You do not need to ask Velaro to enable a flag. There is no Velaro-side configuration. The widget works the same regardless of whether your CSP includes a nonce.

    Legacy Inline Widget — Important Caveat

    If you embed the legacy inline widget (Velaro chat embedded directly into the page DOM instead of via the modern loader), two optional features use eval() and will be blocked by strict CSP:

    • Custom Template Script field (configured in Velaro Admin → Chat Templates)
    • Invite Timer Expressions (configured per chat invite)

    If you use these features and want strict CSP, you have two choices:

    1. Add 'unsafe-eval' to your script-src. This weakens CSP but keeps the features working.
    2. Migrate to the modern widget loader, which does not use those code paths.

    The modern Velaro widget — the default for all new sites — does not use eval() and is fully compatible with strict CSP.

    Verifying Your Setup

    Use the CSP Evaluator from Google to score your CSP header. A passing score with 'strict-dynamic' looks like:

    `` script-src 'nonce-...' 'strict-dynamic' ✓ Strong CSP object-src 'none' ✓ base-uri 'self' ✓ ``

    Browser Support

    Browser'strict-dynamic' Support
    Chrome / Edge52+
    Firefox52+
    Safari15.4+
    Older browsersFalls back to source allowlist via https:

    Coverage is effectively universal for modern browser traffic.

    Troubleshooting

    The widget doesn't load and the console shows Refused to load the script ... Content Security Policy directive.

    The nonce on the loader tag does not match the nonce in your CSP header. Check that both values are identical. The nonce should be generated server-side and injected into both the header and the script tag in the same response.

    The widget loads but features stop working partway through.

    Some legacy widget features use eval(). Either add 'unsafe-eval' or move to the modern widget. See the legacy widget caveat above.

    My CSP report endpoint is flooded with violations from the Velaro domain.

    If strict-dynamic is in your CSP, source allowlists are ignored — but report-only CSPs without strict-dynamic will flag every script the widget injects. Make sure your enforcing CSP header includes 'strict-dynamic', not just your report-only one.

    Questions

    Contact your Velaro account representative or open a support ticket if you need help validating your CSP configuration.

Share: Email

Was this article helpful?