> ## Documentation Index
> Fetch the complete documentation index at: https://developer.cashbackhive.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Content Security Policy

> Configure Content Security Policy for the Cashback Hive SDK: the script-src, connect-src and img-src directives it needs and what each one is for.

If your site sends a `Content-Security-Policy` header, you need to allow the Cashback Hive host in two directives. If you don't use a CSP, nothing here applies.

## Required directives

```
script-src  'self' https://sdk.cashbackhive.com;
connect-src 'self' https://sdk.cashbackhive.com;
```

| Directive | Why |
| - | - |
| `script-src` | Loads `https://sdk.cashbackhive.com/sdk.js`. |
| `connect-src` | The SDK calls the API with `fetch`: `GET /v1/offers`, `GET /v1/offers/:slug`, `GET /v1/member`, `GET /v1/member/activity`, and `POST /v1/events`. All are on `https://sdk.cashbackhive.com`. |

The SDK doesn't use `eval`, inline scripts, inline styles, iframes, web workers or WebSockets, so no `'unsafe-inline'`, `'unsafe-eval'`, `frame-src` or `worker-src` entries are needed.

## Optional directives

| Directive | When you need it |
| - | - |
| `img-src https://d2hsyurrcewa92.cloudfront.net` | If you render `offer.logoUrl`. Brand logos are served from this CloudFront distribution. Logo hosts may change; prefer `img-src https:` if your policy allows it. |

## Things CSP doesn't govern

These are worth knowing about when reviewing the integration, even though no directive is required:

* **Sign-in popup.** `auth.signIn()` opens `https://sdk.cashbackhive.com/v1/auth` in a new window with `window.open`. CSP doesn't restrict popups. If popups are blocked, the SDK falls back to a full-page redirect, which `navigate-to` would govern in browsers that implement it (none do at the time of writing).
* **Tracked clicks.** `openOffer()` opens `https://shop.cashbackhive.com/click/…` in a new tab. Same as above.
* **`postMessage`.** The sign-in window sends the token back with `postMessage`. The SDK checks the message origin itself; CSP isn't involved.
* **`localStorage`.** The member token is stored under `cbh:<key>:token`. Not CSP-governed.

## Example: Next.js

A minimal policy in `next.config.ts`:

```ts theme={null}
const csp = [
  "default-src 'self'",
  "script-src 'self' https://sdk.cashbackhive.com",
  "connect-src 'self' https://sdk.cashbackhive.com",
  "img-src 'self' data: https://d2hsyurrcewa92.cloudfront.net",
  "style-src 'self' 'unsafe-inline'",
].join("; ");

export default {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [{ key: "Content-Security-Policy", value: csp }],
      },
    ];
  },
};
```

> [!NOTE]
>
> Next.js itself needs `'unsafe-inline'` or a nonce for `script-src` in development and for some runtime scripts. See the [Next.js CSP guide](https://nextjs.org/docs/app/guides/content-security-policy) for a nonce-based setup. Adding a nonce to the SDK `<Script>` tag works normally.

## Testing a policy safely

Deploy with `Content-Security-Policy-Report-Only` first. Violations are reported to the console (and to a `report-to` endpoint if you set one) without blocking anything, so you can confirm the SDK works before enforcing.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.