CSP Compliance

Overview

Content Security Policy (CSP) is a security feature that helps prevent cross-site scripting (XSS) attacks by limiting the resources that can be loaded by a web page. When using a video player, it is important to ensure that the player is configured to work with a CSP-compliant environment, taking into account that the configuration should let the Video Player load other scripts that are crucial for its operation.

To provide a compliance mechanism for the implementation of your CSP, we are interested in adding a nonce. A nonce is a global HTML attribute that is set in the CSP header and has to be automatically generated by the server that renders the HTML in the browser. This nonce is then used in the script-src directive of the CSP header to allow scripts to load using that nonce. You can find more about the nonce attribute (opens in a new tab) in the MDN documentation. You can also find more about good practices to generate it in the same MDN documentation (opens in a new tab), but they recommend generating a base64 randomBytes string.

CSP Policy

The CSP Policy has the following configuration:

script-src - 'strict-dynamic' 'wasm-unsafe-eval' 'nonce-<your-nonce>'
style-src - 'nonce-<your-nonce>' https://*.googleapis.com

These configurations are necessary to guarantee compliance by safeguarding the most critial attack vectors. Adding 'strict-dynamic' to the script means that if a script is loaded with a nonce it can load any scripts without requiring the nonce. The nonce is only required once. At the same time, the 'style-src' directive also has a nonce to only allow loading the styles that have a nonce, or that come from the googleapis domain. This nonce is automatically added by our product to our CSS-in-JS styles, but you would have to do the same. This is done by querying the <meta name="csp-nonce" content="<your-nonce>" /> element, obtaining the content and using it on our library. Without the meta element with the nonce, our styles will not work.

<html>
  <head>
    <meta name="csp-nonce" content="<your-nonce>" />
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'strict-dynamic' 'wasm-unsafe-eval' 'nonce-<your-nonce>'; style-src 'nonce-<your-nonce>' https://*.googleapis.com;"
    />
    <script
      nonce="<your-nonce>"
      src="https://genius-live-player-production.betstream.betgenius.com/widgetLoader?customerId=YOUR_CUSTOMER_ID&fixtureId=YOUR_FIXTURE_ID"
    ></script>
  </head>
  <body>
    <div id="geniusLive"></div>
  </body>
</html>

You can find more about the strict-dynamic directive (opens in a new tab) in the MDN documentation.

You can find more about the wasm-unsafe-eval directive (opens in a new tab) in the MDN documentation.

Configuration

To setup the CSP Policy in the header you have to:

Generate a nonce on the backend that serves your HTML. It has to be unique per viewer to ensure that it complies with CSP policies.
Create a meta tag with the nonce as content in the head of the HTML template
Add the nonce to the CSP header
Add the nonce to the script element that loads the Video Player

Note: If you serve a static site, adding the nonce must be done with a middleware between the user that requests a page and whatever serves the HTML. It should inject the nonce into the HTML template's CSP header and script element that loads the Video Player.

And you are done! The page should work as you expect and the Video Player should load without any issues.

Comunication Iframe Video Player Introduction