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:;

No changes to your application code are required.

Option 2 - Provide a pubsubWorkerUrl

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.

You can provide the worker URL in any of the following ways.

Way A - Use the VideoSDK CDN

Use the pre-built worker directly from the VideoSDK CDN:

<MeetingProvider
  config={{
    meetingId,
    name,
    // ...other options
    pubsubWorkerUrl:
      "https://sdk.videosdk.live/pubsub/1.0.1/pubsub-worker.js",
  }}
>
  {/* ... */}
</MeetingProvider>

Make sure your CSP allows https://sdk.videosdk.live in worker-src:

Content-Security-Policy: worker-src 'self' https://sdk.videosdk.live;

Way B - Serve the worker from your application

Download the worker:

https://sdk.videosdk.live/pubsub/1.0.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:

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

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

Way C - Host the worker on your own infrastructure

You can download the worker and host it on your own CDN, S3 bucket, or internal file server.

For example:

<MeetingProvider
  config={{
    meetingId,
    name,
    pubsubWorkerUrl:
      "https://cdn.your-company.com/videosdk/pubsub-worker.js",
  }}
>
  {/* ... */}
</MeetingProvider>

Then allow your worker's host in the worker-src directive:

Content-Security-Policy: worker-src 'self' https://cdn.your-company.com;

Which option should you use?

Option	Best for	CSP
Allow blob:	Quickest setup	worker-src 'self' blob:
Serve from your app	Strict CSP and same-origin hosting	worker-src 'self'
Use your own CDN	Production deployments with centralized asset hosting	Allow your CDN in worker-src
VideoSDK CDN	Simplest external hosting	Allow sdk.videosdk.live in worker-src