Content Security Policy for Mux | Mux

Content Security Policy for Mux

Configure your Content Security Policy (CSP) so that Mux Video and Mux Data work in your web application. Use this guide when your site sets CSP headers and blocks Mux scripts, media, or beacons.

Understanding CSP with Mux

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.

Basic CSP configuration

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:

This CSP directive allows your application to:

The 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.

Granular CSP configuration

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:

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.

Upload and media handling

If your application uploads media files to Mux via Direct Uploads, you'll need additional CSP directives to handle binary data and file uploads:

The 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

Product-specific requirements

Different Mux features have specific CSP requirements. Here's what you need for each:

Mux Video Playback

For video playback functionality, you must include:

This is required because:

Video Thumbnails and Storyboards

If you're displaying video thumbnails or timeline hover previews, include:

The connect-src directive is needed for dynamic thumbnail loading in timeline hover previews, while img-src covers standard image embedding.

Mux Data Integration

For Mux Data analytics, you must allow:

This 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.

Hosted Mux Data Integrations

If you're loading pre-built Mux Data integrations from our hosted domain (rather than installing via NPM), add:

This is not required if you bundle the Mux Data SDK directly into your application code.

Complete Example

Here's a complete CSP that supports all Mux features including uploads:

Test 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.