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

# Configure Content Security Policy for the Subtext Capture Snippet

> Allow the Subtext capture snippet's script and network requests through your app's Content Security Policy.

If your app sends a `Content-Security-Policy`, it blocks the capture snippet's script from loading and the SDK's network calls from reaching Fullstory until your policy allows them. You need to allow both Fullstory hosts across three directives — `script-src`, `connect-src`, and `img-src`. Update the policy before you [install the snippet](/docs/install/overview) so capture works from the first page load.

<Warning>
  Update the policy before you install the snippet. If you leave a restrictive policy in place, capture silently fails — the script never loads and no errors surface to your users.
</Warning>

## Where CSP lives

Look for the policy in these places:

* Framework config — `next.config.js` (`headers()`), `vercel.json`, `netlify.toml` `[[headers]]` blocks.
* Middleware — Express/Fastify `helmet`, Next.js `middleware.ts`, custom response-header middleware.
* HTML meta tag — `<meta http-equiv="Content-Security-Policy" content="...">` in the HTML entry point.
* Hosting platform — Vercel/Netlify/Cloudflare dashboard or Workers script.

## Required directives

### `script-src`

Add both Fullstory hosts. The snippet runs an inline bootstrap, so you also need `'unsafe-inline'` — or a nonce.

```
script-src 'self' https://edge.fullstory.com https://rs.fullstory.com 'unsafe-inline';
```

If you already use nonces, prefer that approach:

```
script-src 'self' https://edge.fullstory.com https://rs.fullstory.com 'nonce-<RANDOM>';
```

Then add the nonce to the snippet's `<script>` tag.

### `connect-src`

Add both Fullstory hosts so the SDK can reach edge and ingestion.

```
connect-src 'self' https://edge.fullstory.com https://rs.fullstory.com;
```

### `img-src`

Add the Fullstory ingestion host so image-based capture requests aren't blocked.

```
img-src 'self' https://rs.fullstory.com;
```

## Other directives

`frame-src` does not require any Fullstory additions. Most apps do not need other directive changes beyond the `script-src`, `connect-src`, and `img-src` above.

## Example: full Next.js header

```js theme={null}
// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: [
              "default-src 'self'",
              "script-src 'self' https://edge.fullstory.com https://rs.fullstory.com 'unsafe-inline'",
              "connect-src 'self' https://edge.fullstory.com https://rs.fullstory.com",
              "style-src 'self' 'unsafe-inline'",
              "img-src 'self' data: https://rs.fullstory.com",
            ].join('; '),
          },
        ],
      },
    ]
  },
}
```

## Verifying

After you deploy the CSP change, open the browser devtools network tab and confirm:

* `fs.js` loads from `edge.fullstory.com` with status 200.
* Outbound POSTs to `rs.fullstory.com` succeed.
* The console shows no CSP violation reports referencing Fullstory hosts.