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

# HelpAlive Content Security Policy: sources and nonce

> The two sources to add to your Content Security Policy for HelpAlive, and how to use a nonce with a strict policy.

To run HelpAlive under a Content Security Policy, you add `https://cdn.helpalive.com` to `script-src`, and `https://api.helpalive.com` and `https://chat.helpalive.com` to `connect-src`. This page is for developers whose app sends a `Content-Security-Policy` header. It lists the sources HelpAlive needs, and how to keep a strict, nonce-based policy. Most apps don't send one and can skip this page.

## Content Security Policy at a glance

* `script-src` needs `https://cdn.helpalive.com`, which loads our script and the agent and assist code it adds.
* `connect-src` needs `https://api.helpalive.com` for activity and `https://chat.helpalive.com` for the agent.
* You add these sources to your policy without removing anything.
* You don't need a `style-src` change or `'unsafe-inline'`.
* With a nonce-based policy, you put the page's nonce on the HelpAlive tag, and HelpAlive puts it on every script it adds.

## Prerequisites

* The HelpAlive tag is in your pages. See [Install the script](/installation).
* You can change the policy your server or framework sends.

## What to add

Add these sources to the policy you already have, without removing anything:

```text theme={null}
script-src https://cdn.helpalive.com;
connect-src https://api.helpalive.com https://chat.helpalive.com;
```

| Directive | Source | Why |
| - | - | - |
| `script-src` | `https://cdn.helpalive.com` | Loads our script, and the agent and assist code it adds when needed. |
| `connect-src` | `https://api.helpalive.com` | Sends activity from your pages. |
| `connect-src` | `https://chat.helpalive.com` | Carries the agent: its settings, chats and assists. |

Without `chat.helpalive.com`, the script loads and activity arrives, but the agent never appears.

You don't need a `style-src` change or `'unsafe-inline'`.

## How to use a nonce

If your `script-src` uses a nonce, put the page's nonce on the HelpAlive tag, the same way your other scripts get theirs:

```html theme={null}
<script src="https://cdn.helpalive.com/sdk/helpalive.js" data-api-key="YOUR_PROJECT_KEY" nonce="YOUR_PAGE_NONCE" async></script>
```

<Steps>
  <Step title="Render the nonce into the tag">
    Your server makes a fresh nonce for each response and puts it in the policy header. Print the same value into the tag's `nonce` attribute.
  </Step>

  <Step title="Leave the rest to HelpAlive">
    HelpAlive reads the nonce from its own tag and puts it on every script it adds. With `'strict-dynamic'` in your policy, those scripts are allowed anyway.
  </Step>
</Steps>

Use the standard `nonce` attribute. There is no HelpAlive-specific nonce attribute.

### With Google Tag Manager

If you load HelpAlive through [Google Tag Manager](/sdk/google-tag-manager), your policy must already allow Tag Manager's Custom HTML tags. Add our sources as well.

## Check it works

<Steps>
  <Step title="Open your app with the browser console open">
    Sign in, so that `identify()` runs and the agent can load.
  </Step>

  <Step title="Look for policy errors">
    A blocked request shows as a console error that names `Content Security Policy` and one of our hosts. No such error means that the policy lets HelpAlive through.
  </Step>

  <Step title="Confirm on the setup page">
    Load a page of your app, then come back to **Settings → Setup & API Key**. Step **Add HelpAlive to your app** no longer says "Not on your pages yet." Once you sign in, it gets a check. Once the agent is on, the chat button appears in your app.
  </Step>
</Steps>

## Why does the script never load?

The script never loads when `script-src` lacks `https://cdn.helpalive.com`, or when your policy uses a nonce and the tag has none. The console names the blocked script.

## Why does activity arrive, but the agent never appears?

Activity arrives without the agent when `connect-src` lacks `https://chat.helpalive.com`. This means the agent's settings can't load, so its button never shows.

## What does report-only mode do?

Report-only mode means that a `Content-Security-Policy-Report-Only` header blocks nothing. It only reports. Fix what it reports before you switch it to enforcing.

## Next

<CardGroup cols={3}>
  <Card title="Install the script" icon="code" href="/installation">
    The tag, identify() and reset().
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/sdk/troubleshooting">
    The failures that show no error.
  </Card>

  <Card title="Security overview" icon="lock" href="/trust/security">
    Keys, verified users and sessions.
  </Card>
</CardGroup>


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