Content Security Policy

Allow the Raffle widget in your site’s Content Security Policy. The hosts and directives Raffle needs, and what breaks if one is missing.

If your website sends a Content-Security-Policy header (or a <meta http-equiv="Content-Security-Policy"> tag), the browser will block the Raffle widget unless the policy allows it. Add the four entries below.

What to allow

script-src  https://cdn.raffle.ai;
style-src   https://cdn.raffle.ai;
connect-src https://searchcfg.raffle.ai https://search-backend.raffle.ai;
img-src     data:;

Add them to your existing directives — do not replace them. If your policy has no script-src (or style-src, or connect-src) of its own, the browser falls back to default-src, so add https://cdn.raffle.ai there instead.

Entry	What it is for	If it is missing
`script-src https://cdn.raffle.ai`	The widget script and the application it loads	The widget never loads
`style-src https://cdn.raffle.ai`	The widget’s stylesheet	The widget loads but is invisible — it renders with no styles and collapses to zero width
`connect-src https://searchcfg.raffle.ai`	The widget’s configuration	The widget cannot start
`connect-src https://search-backend.raffle.ai`	Search, chat and analytics requests	The widget opens but returns no results
`img-src data:`	Icons drawn inside the widget	Some icons do not appear

Note

style-src is the one to check first. Earlier versions of the Raffle widget shipped no stylesheet, so a policy written for them often allows https://cdn.raffle.ai for scripts only. The current widget loads a real stylesheet, and without it the widget is present in the page but has no size — so it looks like nothing happened, with only a message in the browser console.

Raffle needs no unsafe-inline, unsafe-eval, font-src, worker-src or frame-src entry of its own.

Installing on a page with a CSP

The install snippet in Script wraps the tag in an inline <script> block, which a strict policy refuses. Use the plain tag instead — it behaves identically:

<script id="raffle-sdk-v2" type="module" data-uid="tool_id"
        src="https://cdn.raffle.ai/search-v2/index.js"></script>

If your policy uses nonces

Put your nonce on the Raffle tag and keep 'strict-dynamic' in your script-src:

script-src 'nonce-YOUR_NONCE' 'strict-dynamic';

<script id="raffle-sdk-v2" type="module" nonce="YOUR_NONCE" data-uid="tool_id"
        src="https://cdn.raffle.ai/search-v2/index.js"></script>

A nonce without 'strict-dynamic' is not enough: the widget loads its application in a second request, which carries no nonce. In that case allow https://cdn.raffle.ai in script-src as well.

style-src and connect-src always need the hosts above, nonce or not.

Checking your policy

Open a page with the widget on it, then the browser console. Blocked resources are reported as “Refused to load…” or "…violates the following Content Security Policy directive", and the message names the directive to fix.

You may also see up to three violation reports that Raffle is aware of and that do not stop the widget working: one inline script (a Firefox animation workaround), one empty inline style, and one eval check made by a validation library that falls back safely when it is refused. Allowing them is not necessary.

The policy that applies

A CSP applies to the document that sent it, so the policy of the page the widget is installed on is the one that matters. The widget must be installed on the top-level page: inside an <iframe>, it doesn’t start.

Still stuck? Send the policy your site sends, plus the console messages, to Raffle Support.