Content security policy for Sirv Media Viewer

If your app or website has a Content Security Policy (CSP), this article explains how to ensure your Sirv content is served as expected.

What is a Content Security Policy?

CSP is a security protocol that controls what resources can be loaded and executed on a website. The guidance on this page assumes that you are already aware of CSPs and either already have one or are adding one to your website. If you'd like to learn more about CSP and how it works, here is a helpful guide to CSP by Mozilla.

CSP rules for Sirv content

Certain rules should be added to your CSP, to ensure normal operation of your Sirv images, video streams and other assets. These rules will allow for interaction with Sirv Media Viewer galleries, zooms, 360 spins, video playback and user interaction stats for those assets.

Below is a set of example rules based on helmet-csp, which is a Content Security Policy middleware for the Express app. The example assumes that your server has been configured to respond with a Content-Security-Policy header.

CSP rules:

const csp = require("helmet-csp");

module.exports = csp({
  directives: {
    // These directives are necessary for Sirv embeds.
    
    childSrc: ['blob:'],

    connectSrc: [
      'blob:', // Used by Sirv Media Viewer
      'https://video.sirv.com', // Used for Sirv Video Player streams (HLS)
      'https://stats.sirv.com', // Spin stats POST beacons
      'https://your-account.sirv.com', // Your Sirv account domain, or your custom domain
    ],

    defaultSrc: [
      `'self'`,
      'https://scripts.sirv.com', // Sirv Media Viewer
    ],

    fontSrc: [
      'data:', // Used by Sirv Media Viewer
    ],

    frameSrc: [
      'https://your-account.sirv.com', // Your Sirv account domain, or your custom domain
    ],

    imgSrc: [
      `'self'`,
      'data:', // Used by Sirv Media Viewer
      'https://your-account.sirv.com', // Your Sirv account domain, or your custom domain
    ],

    mediaSrc: [
      `'self'`,
      'data:', // Used by Sirv Media Viewer
      'blob:', // Used by Sirv Video Player
      'https://video.sirv.com', // Used by Sirv Video Player
    ],

    scriptSrc: [
      `'self'`,
      `'unsafe-eval'`, // Used by Sirv Media Viewer
      'https://scripts.sirv.com', // Sirv Media Viewer
      'https://video.sirv.com', // Used for Sirv Video Player streams (HLS)
    ],

    styleSrc: [
      `'self'`,
      `'unsafe-inline'`, // Used by Sirv Media Viewer
      'https://scripts.sirv.com', // Sirv Media Viewer
    ],
  }
});

Change any references to https://your-account.sirv.com to your own sirv.com domain or your custom domain if that's where you're referencing your video.

Get help with CSP

Configuring a Content Security Policy is different from one site to the next. The example above is provided to guide you in the right direction. If you’ve followed the example and your Sirv content isn't loading, drop a message to the Sirv customer success team and they'll try to assist.