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;
font-src 'self' https://siteaccessible.com;
img-src 'self' data:;| Directive | Why |
|---|---|
| script-src | Loads the widget loader and bundle. |
| connect-src | Reports each page load (usage metering and install verification) and, when analytics is on, aggregate panel opens and adjustments. Omit it and the widget still works, but loads are not counted, the install never shows as verified, and the Dictionary cannot look words up. |
| font-src | The dyslexia-friendly typefaces are font files on our origin, downloaded only when a visitor switches that adjustment on. |
| img-src data: | The large cursor is drawn from an inline SVG image. |
| trusted-types siteaccessible | Only if your policy enforces Trusted Types (require-trusted-types-for 'script'): add siteaccessible to your trusted-types list. The widget's policy accepts nothing but its own engine and language-file addresses. Without it the widget does not start and says so in the console. |
No 'unsafe-inline' needed
The widget styles itself with constructable stylesheets, which a style-src policy does not block, and keeps its interface in a shadow root so your CSS and ours never meet. Browsers without constructable stylesheets get a <style> element instead, carrying your nonce — pass it on the script tag:
index.html
<script
src="https://siteaccessible.com/w/YOUR_SITE_KEY.js"
nonce="{{cspNonce}}"
defer
></script>