Content Security Policy

The exact directives the widget needs under a strict CSP.

4 min readUpdated 14 Aug 2026

A blocked script is the most common reason the button never appears. If your site sends a Content-Security-Policy header, it has to allow our origin.

Required directives

Content-Security-Policy

script-src  'self' https://siteaccessible.com;
connect-src 'self' https://siteaccessible.com;
style-src   'self' 'unsafe-inline';
font-src    'self' https://siteaccessible.com data:;
img-src     'self' data:;

Directive	Why
script-src	Loads the widget bundle.
connect-src	Sends the aggregate usage beacon. Omit it and the widget still works; you simply get no analytics.
style-src 'unsafe-inline'	The widget injects its own stylesheet. Use a nonce instead if you prefer — see below.
font-src ... data:	The dyslexia-friendly typefaces are embedded as data URIs.

Using a nonce instead of unsafe-inline

Pass your per-request nonce on the script tag and the widget will stamp it onto every style element it creates.

index.html

<script
  src="https://siteaccessible.com/w/YOUR_SITE_KEY.js"
  nonce="{{cspNonce}}"
  defer
></script>