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

# Security Headers (CSP & COOP)

> Required security header configurations for Reach (SDK embedding + attribution snippet), including CSP directives and COOP policies

This page shows the security headers you need based on how you're integrating Reach. **Choose your integration method below** - each section shows exactly what you need to add.

## Method 1: SDK + iFrame (Recommended)

When using the Reach SDK with an iframe:

* You load the SDK script from `https://cdn.embedreach.com`
* The SDK automatically creates an iframe from the same CDN

**Add this to your CSP:**

```
Content-Security-Policy:
  script-src 'self' https://cdn.embedreach.com;
  frame-src 'self' https://cdn.embedreach.com;
```

## Method 2: React Components (via npm package)

When using Reach React components from npm:

* Components render directly in your page (no iframe)
* No external script loading needed
* API calls go to `https://api.embedreach.com`

**Add this to your CSP:**

```
Content-Security-Policy:
  connect-src 'self' https://api.embedreach.com https://app.posthog.com https://app.launchdarkly.com;
```

## Method 3: Attribution Snippet Only

When using only the attribution snippet on public pages:

* Loads from `https://public.embedreach.com`
* Makes API calls to `https://api.embedreach.com`

**Add this to your CSP:**

```
Content-Security-Policy:
  script-src 'self' https://public.embedreach.com;
  connect-src 'self' https://api.embedreach.com;
```

## Quick Reference

| Integration Method      | CSP Directives Needed                                                                                 |
| ----------------------- | ----------------------------------------------------------------------------------------------------- |
| **SDK + iFrame**        | `script-src 'self' https://cdn.embedreach.com;` + `frame-src 'self' https://cdn.embedreach.com;`      |
| **React Components**    | `connect-src 'self' https://api.embedreach.com https://app.posthog.com https://app.launchdarkly.com;` |
| **Attribution Snippet** | `script-src 'self' https://public.embedreach.com;` + `connect-src 'self' https://api.embedreach.com;` |

## Common Issues & Solutions

### CSP Violations

* **Error:** "Refused to load the script from '[https://cdn.embedreach.com](https://cdn.embedreach.com)' because it violates the following Content Security Policy directive"
* **Fix:** Add `https://cdn.embedreach.com` to your `script-src` directive

### OAuth Popups Blocked

If you're using COOP headers and OAuth flows fail:

**Add to your COOP policy:**

```
Cross-Origin-Opener-Policy: same-origin-allow-popups
```

This maintains security while allowing OAuth popups to work properly.

## Verification Steps

1. **Open browser DevTools → Network tab**
2. **Load your page with Reach embedded**
3. **Verify these network requests succeed:**
   * `sdk.es.js` from `https://cdn.embedreach.com` (SDK method)
   * API calls to `https://api.embedreach.com` (all methods)
4. **Check Console tab** - no CSP violation errors should appear

## Need Help?

If you're still seeing issues after following these steps, contact us at `support@embedreach.com` with:

* Your current CSP header value
* Screenshots of browser console errors
* Which integration method you're using