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

# NetSapiens CSP Configuration

> Allowlist the Telzino Connect App in the NetSapiens v44+ Portal Content Security Policy

NetSapiens Portal v44 and above ship with Content Security Policy (CSP) enabled by default. Because the Connect App is injected into the User Portal through the **Extra JS** mechanism and is hosted at `https://connect.telzino.com`, the portal will block its scripts, styles, and network calls until you explicitly allow that origin in the relevant CSP directives.

This page lists exactly which `PORTAL_CSP_*` UI Configs need to be updated and which values to enter.

<Info>
  These settings are managed by the **NetSapiens portal administrator** in the **UI Configs** section of the NetSapiens admin tools. They are not configured from the Telzino Dashboard or Connect App.
</Info>

## Origin to allowlist

The Connect App is served from a single origin, which is what you will add to each CSP directive below:

```
https://connect.telzino.com
```

If you have already added other Telzino-hosted resources (for example, the embed widget at `embed.telzino.com`), you may consolidate with a wildcard such as `https://*.telzino.com`. CSP directives accept multiple sources separated by a single space.

## Applicable CSP directives

The following directives must be updated for the Connect App to load and operate inside the NetSapiens Portal. Other `PORTAL_CSP_*` configs not listed here do not need changes for Connect.

| UI Config                      | Required value                | Why it is needed                                                                                                                                  |
| ------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `PORTAL_CSP_SCRIPT_ADDITIONS`  | `https://connect.telzino.com` | Loads the Connect App JavaScript bundle injected via Extra JS.                                                                                    |
| `PORTAL_CSP_STYLE_ADDITIONS`   | `https://connect.telzino.com` | Loads the Connect App stylesheets.                                                                                                                |
| `PORTAL_CSP_CONNECT_ADDITIONS` | `https://connect.telzino.com` | Allows `fetch`, `XMLHttpRequest`, and WebSocket calls the app makes to Telzino services (agents, call logs, usage).                               |
| `PORTAL_CSP_IMG_ADDITIONS`     | `https://connect.telzino.com` | Loads icons, avatars, and other images rendered by the Connect App.                                                                               |
| `PORTAL_CSP_FONT_ADDITIONS`    | `https://connect.telzino.com` | Loads web fonts used by the Connect App UI.                                                                                                       |
| `PORTAL_CSP_MEDIA_ADDITIONS`   | `https://connect.telzino.com` | Plays call recordings and audio assets surfaced in the Connect App.                                                                               |
| `PORTAL_CSP_FRAME_SRC`         | `https://connect.telzino.com` | Allows the Connect App to be loaded in a frame inside the NetSapiens Portal. The default for this config is `none`, so it must be set explicitly. |

`PORTAL_CSP_FRAME_ANCESTORS` is **not** required — it controls which external sites can embed the NetSapiens Portal itself, and is unrelated to loading Connect.

## Configuration steps

<Steps>
  <Step title="Open UI Configs in the NetSapiens admin portal">
    Sign in to your NetSapiens admin tools and navigate to **UI Configs** (the location of this section may vary by NetSapiens version).
  </Step>

  <Step title="Locate each PORTAL_CSP_* config listed above">
    Search by name for `PORTAL_CSP_SCRIPT_ADDITIONS`, then repeat for each of the seven configs listed in the table above.
  </Step>

  <Step title="Add the Connect App origin">
    For each config, set the value to `https://connect.telzino.com`. If the config already has other entries, append the Telzino origin with a single space between each source — for example:

    ```
    https://trusted-cdn.com https://connect.telzino.com
    ```
  </Step>

  <Step title="Save and reload the portal">
    Save each UI Config change, then hard-refresh the NetSapiens User Portal (Ctrl/Cmd+Shift+R) so the new CSP headers are applied.
  </Step>

  <Step title="Verify the Connect App loads">
    Open the **AI Agents** module in the User Portal. The Connect App should render normally with no CSP errors. To confirm, open your browser's developer tools and check the **Console** tab — there should be no messages of the form `Refused to load ... because it violates the following Content Security Policy directive`.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="The app still does not load after updating CSP">
    Confirm the Extra JS entry pointing to `https://connect.telzino.com` is present in your portal configuration, then hard-refresh to bypass cached CSP headers. CSP changes are applied per page load, so any existing portal tabs must be reloaded.
  </Accordion>

  <Accordion title="Console shows 'Refused to connect' or 'Refused to load' errors">
    Read the violated directive name in the console message (for example, `connect-src`, `script-src`, `img-src`) and ensure the corresponding `PORTAL_CSP_*_ADDITIONS` config includes `https://connect.telzino.com`. The directive-to-config mapping follows the table above.
  </Accordion>

  <Accordion title="Multiple Telzino features need allowlisting">
    Use a space-separated list within the same UI Config value, for example: `https://connect.telzino.com https://embed.telzino.com`. Or use a wildcard such as `https://*.telzino.com` to cover every Telzino-hosted origin in one entry.
  </Accordion>
</AccordionGroup>