Content Security Policy
The exact directives the widget needs under a strict CSP.
4 мин чтенияОбновлено
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>