# How to include web push with Content Security Policy rules?

If you use a Content Security Policy (CSP) that involves "worker-src"/"connect-src"/"script-src" rules (or if you plan to set up one), some configuration is required for web push to work on your website.

## Service Worker <a href="#h_5001e69c1f" id="h_5001e69c1f"></a>

Batch requires a Service Worker to be installed to handle push notifications.

The minimal CSP directive is:

```
worker-src 'self' https://via.batch.com
```

Why:

* 'self' matches your website's origin, as this is where the Service Worker is hosted
* via.batch.com is where the SDK is hosted, which will be loaded from the snippet we ask you to host on your website when setting up the Service Worker

## JavaScript tag <a href="#h_0d4f1b10bc" id="h_0d4f1b10bc"></a>

Here are the minimum directives that you need to add to your CSP to authorize the Batch JavaScript tag:

1. ```
   connect-src https://via.batch.com https://ws.batch.com
   ```

   \
   **Why:** connect-src needs two domains as the SDK will use the Fetch API to download a file hosted on via.batch.com and then communicate with our backend services, which are on ws.batch.com.\
   ​
2. ```
   script-src https://via.batch.com 
   ```

   \
   **Why:** script-src needs to be via.batch.com as this is where the SDK and its modules are hosted.

If you configure Batch using a script tag, you may also need to allow those:

```
script-src 'unsafe-inline'
```

We **recommend that you use a nonce instead**, as unsafe inline mostly defeats the CSP's purpose. You can find more info [on the MDN CSP documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script).

{% hint style="danger" %}
As all websites are different, you will need to configure your CSP further in order to adapt the above recommendations to your environment. We recommend that you first use the “report only” mode for testing purposes and remove it once you're confident that your CSP works in all browsers.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.batch.com/developer/technical-guides/how-to-guides/web/how-to-include-web-push-with-content-security-policy-rules.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.