How to include web push with Content Security Policy rules?

Depending on your environment, you may need to configure your website to authorize Batch.

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

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

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.

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.