Skip to main content
Version: 1.x.x

Content Security Policy (CSP) for PubSub

In @videosdk.live/react-sdk v1.x.x, PubSub runs inside a Web Worker created from a Blob URL. If your application's Content Security Policy (CSP) does not allow blob: workers, you can use either of the following options.

Option 1 - Allow blob: workers​

Add blob: to your worker-src directive:

Content-Security-Policy: worker-src 'self' blob:;

If your CSP has no worker-src, workers follow child-src, and then script-src. In that case add blob: to the directive that applies.

No changes to your application code are required.

Option 2 - Serve the worker from your application​

You can pass a pre-built PubSub worker URL to MeetingProvider using pubsubWorkerUrl. This prevents the SDK from creating the worker from a Blob URL.

Download the worker file that matches your SDK version:

  • Before v1.2.0: use the 1.0.1 file.

    https://sdk.videosdk.live/pubsub/1.0.1/pubsub-worker.js
  • v1.2.0 and later: use the 1.2.1 file.

    https://sdk.videosdk.live/pubsub/1.2.1/pubsub-worker.js

Place it in your application's static assets directory. For example:

  • Next.js / CRA / Vite: public/pubsub-worker.js

Then pass the worker's path to MeetingProvider:

<MeetingProvider
config={{
meetingId,
name,
pubsubWorkerUrl: "/pubsub-worker.js",
}}
>
{/* ... */}
</MeetingProvider>

The worker will be served from your application's origin:

https://your-app.com/pubsub-worker.js

Your CSP can remain strict:

Content-Security-Policy: worker-src 'self';

If your bundler requires importing static assets, import the worker and pass the resolved URL. For example, in Vite:

import pubsubWorkerUrl from "./assets/pubsub-worker.js?url";

<MeetingProvider
config={{
meetingId,
name,
pubsubWorkerUrl,
}}
>
{/* ... */}
</MeetingProvider>
warning

Use the sdk.videosdk.live address only to download the file. Do not set it as pubsubWorkerUrl. Add the downloaded file to your own app, and point pubsubWorkerUrl to your copy, for example /pubsub-worker.js.

Serving the worker file​

  • Serve the file with status 200 and a JavaScript content type. If your server rewrites unknown paths to index.html, the worker request returns HTML and the worker does not start.
  • If your app is served under a sub-path, use the full path to the file (for example /app/pubsub-worker.js).

Allow the PubSub connection​

Whichever option you choose, your CSP connect-src must allow the PubSub server:

Content-Security-Policy: connect-src 'self' wss://*.pubsub.videosdk.live;

Add wss://*.pubsub.videosdk.live to your existing connect-src list. If it is missing, PubSub cannot connect and the SDK raises error 4088.

If your server also adds a Content-Security-Policy header to the worker file itself, that header needs the same connect-src. For example, default-src 'self' on that file blocks PubSub.

Which option should you use?​

OptionBest forCSP
Allow blob:Quickest setupworker-src 'self' blob:
Serve from your appStrict CSP and same-origin hostingworker-src 'self'

Got a Question? Ask us on discord