Learn how to configure Content Security Policy (CSP) to work with Mux Video and Data services.
Content Security Policy (CSP) is a security feature that helps protect your web application from cross-site scripting (XSS) attacks and other code injection attacks. CSP works by restricting the resources (such as scripts, stylesheets, images, and network connections) that a web page can load.
When integrating Mux Video and Mux Data into your application, you'll need to configure your CSP to allow connections to Mux services. This guide will help you set up the appropriate CSP directives to ensure your Mux integration works securely.
CSP Basics
If you're new to Content Security Policy, we recommend reading Google's CSP guide for a comprehensive introduction to CSP concepts and implementation.
For most applications, the simplest approach is to use a basic CSP that allows all Mux services. This configuration ensures compatibility with all current and future Mux features:
Content-Security-Policy: default-src 'self' *.mux.com *.litix.io storage.googleapis.comThis CSP directive allows your application to:
'self')*.mux.com)*.litix.io)storage.googleapis.com) -- this is needed for Direct UploadsThe wildcard approach for mux.com and litix.io is recommended because Mux utilizes multiple CDNs and subdomains to provide optimal performance globally. These hostnames may change without notice as we optimize our infrastructure.
If your security requirements call for a more restrictive CSP, you can use specific directives instead of the broad default-src approach. Here's a granular configuration that covers all Mux functionality:
Content-Security-Policy:
connect-src 'self' https://*.mux.com https://*.litix.io https://storage.googleapis.com;
media-src 'self' blob: https://*.mux.com;
img-src 'self' https://image.mux.com https://*.litix.io;
script-src 'self' https://src.litix.io;
worker-src 'self' blob:Merge with existing policies
The above configuration must be merged with your existing CSP directives. Each directive should combine values from both your current policy and the Mux requirements.
If your application uploads media files to Mux via Direct Uploads, you'll need additional CSP directives to handle binary data and file uploads:
Content-Security-Policy:
connect-src 'self' https://*.mux.com https://*.litix.io https://storage.googleapis.com;
media-src 'self' blob: https://*.mux.com;
img-src 'self' https://image.mux.com https://*.litix.io;
script-src 'self' https://src.litix.io;
worker-src 'self' blob:;
form-action 'self' https://*.mux.com https://storage.googleapis.comThe key additions for upload functionality are:
| Directive | Purpose |
|---|---|
https://storage.googleapis.com in connect-src | Allows uploads to Google Cloud Storage endpoints used by Mux |
form-action directive | Permits form submissions and PUT/POST requests to upload endpoints |
blob: in media-src and worker-src | Enables handling of binary file data during upload processing |
Different Mux features have specific CSP requirements. Here's what you need for each:
For video playback functionality, you must include:
connect-src https://*.mux.com;
media-src blob: https://*.mux.com;
worker-src blob:This is required because:
https://stream.mux.com and other *.mux.com subdomainsIf you're displaying video thumbnails or timeline hover previews, include:
img-src https://image.mux.com;
connect-src https://image.mux.comThe connect-src directive is needed for dynamic thumbnail loading in timeline hover previews, while img-src covers standard image embedding.
For Mux Data analytics, you must allow:
connect-src https://*.litix.io;
img-src https://*.litix.ioThis covers:
Environment-specific restriction
For tighter security, you can replace https://*.litix.io with https://img.litix.io and https://<env_key>.litix.io where <env_key> is your Mux environment key. However, the wildcard approach is recommended for maximum compatibility.
If you're loading pre-built Mux Data integrations from our hosted domain (rather than installing via NPM), add:
script-src https://src.litix.ioThis is not required if you bundle the Mux Data SDK directly into your application code.
Here's a complete CSP that supports all Mux features including uploads:
Content-Security-Policy:
default-src 'self';
connect-src 'self' https://*.mux.com https://*.litix.io https://storage.googleapis.com;
media-src 'self' blob: https://*.mux.com;
img-src 'self' https://image.mux.com https://*.litix.io;
script-src 'self' https://src.litix.io;
worker-src 'self' blob:;
form-action 'self' https://*.mux.com https://storage.googleapis.comTest thoroughly
After implementing your CSP, test all Mux functionality in your application including video playback, uploads, thumbnails, and analytics to ensure everything works as expected.