Content Security Policy
What to allow in your site's Content Security Policy so the snippet loads and guidance is styled.
If your site sends a Content-Security-Policy header (or meta tag), allow Cueston in these directives. Everything is served from https://app.cueston.com.
| Directive | Add | Why |
|---|---|---|
script-src | https://app.cueston.com and your nonce | The snippet's script, and the bundles it loads only when a page has guidance (/sdk/v1/…). The small inline tag before it needs the nonce too. |
style-src | your nonce | Tours, tooltips, banners and the help hub add <style> elements. They carry your nonce. |
connect-src | https://app.cueston.com | Loading published guidance, and sending views, completions and survey answers. |
img-src | https://res.cloudinary.com | Images your team uploads in Cueston. Add any other hosts your guidance links images from. |
Use a nonce
Put the same nonce on both snippet tags. Cueston reads it from its own <script> tag and puts it on everything it adds to the page: the bundles it loads and every <style> element. You don't need 'unsafe-inline' for scripts or styles.
<script nonce="RANDOM_PER_REQUEST">!function(w){var c=w.Cueston=w.Cueston||{};c.q=c.q||[];["identify","reset","page","track","start","show","dismiss","on","off"].forEach(function(m){c[m]=c[m]||function(){c.q.push([m].concat([].slice.call(arguments)))}})}(window);</script>
<script nonce="RANDOM_PER_REQUEST" src="https://app.cueston.com/sdk/v1/cueston.js" data-key="pk_your_publishable_key" async></script>A policy that only allows what Cueston needs (add your own sources to each directive):
Content-Security-Policy:
script-src 'nonce-RANDOM_PER_REQUEST' https://app.cueston.com;
style-src 'nonce-RANDOM_PER_REQUEST';
connect-src https://app.cueston.com;
img-src https://res.cloudinary.comGenerate a new random nonce for every page response, never a fixed value.
Without a nonce
If your policy uses 'unsafe-inline' for style-src, Cueston's styles work without a nonce. For the inline snippet tag you can allow its hash instead of a nonce, but a hash breaks if you change the tag, so a nonce is easier.
Check it
Open a page with guidance, then the browser console. A blocked request shows as a Content-Security-Policy error naming the directive. Guidance that appears but looks unstyled or out of place means style-src is blocking Cueston's styles: check that both snippet tags carry the page's current nonce.