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

# CSP Rules

## Configuring Your Content Security Policy for Membrane's JavaScript SDK

When using **Membrane's JavaScript SDK** in your application, you'll need to configure your **Content Security Policy (CSP)** to allow communication with our services. This article outlines the necessary CSP rules to add for proper functionality.

***

### Required CSP Rules

Add the following domain to your Content Security Policy under these directives:

* **connect-src**
* **child-src**
* **form-action**

The domain to whitelist is:

`api.getmembrane.com`

***

### Example CSP Configuration

Here's an example of how your CSP rules might look after adding these directives:

```plaintext theme={null}
Content-Security-Policy:
  connect-src 'self' api.getmembrane.com;
  child-src 'self' api.getmembrane.com;
  form-action 'self' api.getmembrane.com;
  // ... other existing rules ...
```

***

### Why These Rules Are Needed

* **connect-src**: Allows the SDK to make API calls to Membrane's servers.
* **child-src**: Permits the loading of necessary resources from Membrane.
* **form-action**: Required for submitting sensitive data to our API in certain cases.

***

### Additional Considerations

There are no region-specific domains or additional rules required for the JavaScript SDK. However, it's always a good practice to verify these settings with your application security team to ensure they align with your organization's security policies.

***

### Further Resources

For more information about our SDK, you can refer to the following documentation:

* [SDK Documentation](https://console.getmembrane.com/ref/sdk/index.html)
* [React Integration Documentation](https://console.getmembrane.com/ref/react/index.html)

If you encounter any issues or have further questions about CSP configuration for Membrane, please don't hesitate to contact our support team.

<Columns cols={2}>
  <Card title="Authentication" href="/docs/how-membrane-works/authentication" target="_blank">
    How to authenticate with Membrane and generate tokens.
  </Card>

  <Card title="Connection UI" href="/docs/ways-to-use-membrane/embedded-ui/connection-ui" target="_blank">
    UI components and patterns for building connection experiences.
  </Card>

  <Card title="React UI Components" href="/docs/ways-to-use-membrane/sdk/react/ui-components" target="_blank">
    Use React components to build your integration UI.
  </Card>
</Columns>
