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

# Content-Security-Policy

> The origins your CSP must allow for a TagadaPay checkout and for the pixels of a coded funnel

# Content-Security-Policy

If your site sends a Content-Security-Policy (a `Content-Security-Policy` header or `<meta http-equiv>` tag), the browser refuses every script, request, frame or image from an origin the policy does not list. A Headless SDK checkout needs two sets of origins:

1. **The checkout itself** — TagadaPay, Basis Theory (card tokenization) and Stripe (express checkout). Always the same.
2. **The pixels of your [coded funnel](/developer-tools/headless-sdk/coded-funnels)** — Meta, TikTok, Snapchat, Google Tag Manager, Microsoft Clarity: only those you bound on the canvas are needed. They are listed per provider [below](#pixels).

`npx tagada funnel csp` prints both.

A site without a CSP has nothing to do.

***

## From the command line

```bash theme={null}
npx tagada funnel csp --pixels=facebook,tiktok
```

```
connect-src https://*.tagada.io https://*.tagada.dev https://*.tagadapay.com https://js.basistheory.com https://*.basistheory.com https://api.stripe.com https://r.stripe.com https://www.facebook.com https://analytics.tiktok.com
script-src https://*.tagada.io https://*.tagada.dev https://*.tagadapay.com https://js.basistheory.com https://js.stripe.com https://*.js.stripe.com https://connect.facebook.net https://analytics.tiktok.com
frame-src https://*.tagada.io https://*.tagada.dev https://*.tagadapay.com https://*.basistheory.com https://js.stripe.com https://*.js.stripe.com https://hooks.stripe.com
img-src https://*.tagada.io https://*.tagadapay.com data: https://www.facebook.com https://analytics.tiktok.com
```

Each line is a directive: the checkout origins first, then those of the pixels.

| Flag | What it does |
| - | - |
| `--pixels=facebook,tiktok` | Only the pixels named: `facebook` (Meta), `tiktok`, `snapchat`, `gtm` (Google Tag Manager), `clarity`. Without the flag, all five. `--pixels=` alone keeps the checkout origins only. An unknown name stops the command with an error. |
| `--format=header` | One line, `;`-separated, ready to paste into a header value. |

The command needs no API key. It requires `@tagadapay/node-sdk` 3.26.0 or later; earlier versions print the checkout origins only.

## From code

`@tagadapay/node-sdk` (and `@tagadapay/node-sdk/edge`, for edge runtimes) exports the checkout origins as `CSP_ORIGINS`, and `withTagadaCsp(policy)` merges them into your own directives without duplicates. They do not include the pixels: add the rows of the [table below](#pixels) yourself.

```typescript theme={null}
// next.config.ts
import { withTagadaCsp } from '@tagadapay/node-sdk';

const directives = withTagadaCsp({
  'default-src': ["'self'"],
  'script-src': ["'self'"],
  'connect-src': ["'self'"],
});

const csp = Object.entries(directives)
  .map(([directive, values]) => `${directive} ${values.join(' ')}`)
  .join('; ');

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

<Note>
  If you load the SDK with the CDN script tag, also allow `https://cdn.jsdelivr.net` in `script-src`: the SDK and its pixel file, `tagada-pixels.min.js`, are served from there.
</Note>

***

## Pixels

Add the rows of every provider you bound on the canvas:

| Provider | `script-src` | `connect-src` | `img-src` | `frame-src` |
| - | - | - | - | - |
| Meta | `https://connect.facebook.net` | `https://www.facebook.com` | `https://www.facebook.com` | — |
| TikTok | `https://analytics.tiktok.com` | `https://analytics.tiktok.com` | `https://analytics.tiktok.com` | — |
| Snapchat | `https://sc-static.net` | `https://tr.snapchat.com` | `https://tr.snapchat.com` | — |
| Google Tag Manager / GA4 / Google Ads | `https://www.googletagmanager.com` | `https://*.google-analytics.com` `https://*.analytics.google.com` `https://stats.g.doubleclick.net` | `https://www.googletagmanager.com` `https://*.google-analytics.com` `https://googleads.g.doubleclick.net` `https://www.google.com` | `https://www.googletagmanager.com` |
| Microsoft Clarity | `https://www.clarity.ms` | `https://*.clarity.ms` `https://c.bing.com` | `https://c.clarity.ms` | — |

Google Tag Manager loads whatever tags your container holds: if one of them calls another vendor, that vendor's origins are needed too.

***

## When something is still blocked

A pixel the CSP blocks is reported by the SDK and shows up in [SDK health](/developer-tools/headless-sdk/sdk-health) as **Pixel blocked by your CSP**, with the provider and the domain it failed on. On the page itself, the browser console names the refused URL and the directive that refused it, and `await tagada.track.health()` lists the blocked pixels.


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