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.

Images in search results

Search results can show a thumbnail from the indexed page. Those images are served from your own site or from https://rafflekbmedia.raffle.ai, so if your img-src is restrictive, add the hosts your content uses:

img-src 'self' data: https://rafflekbmedia.raffle.ai;

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" defer data-uid="tool_id"
        src="https://cdn.raffle.ai/search/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" defer nonce="YOUR_NONCE" data-uid="tool_id"
        src="https://cdn.raffle.ai/search/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.

A CSP applies to the document that sent it. If Raffle is installed inside an <iframe> you control, the policy of that document is the one that matters.

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