# Whitelist Fibr in Your Content Security Policy (CSP)

If your website uses a Content Security Policy, you'll need to whitelist Fibr's domains before the script can run. Without this, your browser will block Fibr from loading, and experiments or personalization won't work.

Not sure if you have a CSP? Check with your development team, or look for a `Content-Security-Policy` header in your browser's developer tools under the Network tab.

***

#### What is a Content Security Policy?

A CSP is a security feature that tells browsers which external resources your site is allowed to load. It protects against cross-site scripting (XSS) and other code injection attacks by blocking unauthorized scripts.

If Fibr isn't whitelisted in your CSP, the browser will block our script from executing, even if you've installed it correctly.

***

#### **Domains to Whitelist**

Add the following Fibr domains to your Content Security Policy:

| Directive     | Domain to Add          |
| ------------- | ---------------------- |
| `script-src`  | `https://*.getfibr.co` |
| `connect-src` | `https://*.getfibr.co` |
| `img-src`     | `https://*.getfibr.co` |
| `style-src`   | `https://*.getfibr.co` |

**Example CSP header with Fibr included:**

```
Content-Security-Policy: 
  default-src 'self'; 
  script-src 'self' https://*.getfibr.co; 
  connect-src 'self' https://*.getfibr.co; 
  img-src 'self' https://*.getfibr.co data:; 
  style-src 'self' https://*.getfibr.co 'unsafe-inline';
```

Adjust this based on your existing CSP configuration. The key addition is `https://*.getfibr.co` in the relevant directives.

***

#### **How to Update Your CSP**

**Option 1: HTTP Header (Recommended)**

Add or modify the `Content-Security-Policy` header in your server configuration. The exact method depends on your setup:

* **Nginx:** Add to your server block in `nginx.conf`
* **Apache:** Add to `.htaccess` or your virtual host config
* **Cloudflare:** Use Transform Rules to add headers
* **Vercel/Netlify:** Add to your `vercel.json` or `netlify.toml`

**Option 2: Meta Tag**

If you can't modify HTTP headers, add a meta tag to your HTML `<head>`:

html

````html
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://*.getfibr.co; connect-src 'self' https://*.getfibr.co;">
```

Note: Meta tag CSPs have some limitations compared to HTTP headers. Header-based CSP is preferred when possible.

---

### Verifying Your CSP Configuration

After updating your CSP:

1. Open your website in Chrome or Firefox
2. Open Developer Tools (F12 or right-click → Inspect)
3. Go to the Console tab
4. Refresh the page

If Fibr is still blocked, you'll see an error like:
```
Refused to load the script 'https://cdn.getfibr.co/...' because it violates the following Content Security Policy directive...
````

If you see no CSP errors and Fibr validates successfully in your dashboard, you're all set.

***

#### **Common Issues**

* **CSP errors persist after adding Fibr domains:** Make sure you've added `https://*.getfibr.co` (with the wildcard) rather than a specific subdomain. Fibr uses multiple subdomains for different resources.
* **Multiple CSP headers conflict:** If you have CSP defined in both an HTTP header and a meta tag, browsers apply the most restrictive combination. Consolidate your CSP into a single source.
* **Third-party plugins override your CSP:** Some WordPress plugins or CDN services inject their own CSP headers. Check if another tool is overriding your configuration.

Need help? Contact us at <support@fibr.ai> with your current CSP configuration and we'll help you troubleshoot.
