Skill Level: IT Professional or Web Developer
Content Security Policy (CSP) is a feature of some browsers and web servers that aims to help detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. A misconfigured Content Security Policy will inadvertently block BoxCast embedded videos from playing back on your web site.
The telltale sign that a Content Security Policy is interfering with video playback is to observe the following:
BoxCast video player error message stating: "There Was an Unexpected Player Error. This video type is not supported by your device."
Open your browser's developer tools console, and find a message similar to:
Refused to load media from 'blob:https://my.website.com/d86319b3-1f32-41e1-9b9f-c3d9fd151361' because it violates the following Content Security Policy directive: "default-src *
The CSP is usually set in one of 2 ways:
As a HTTP header (
Content-Security-Policy: <value>) from your webserver, orAs an HTML meta tag (
<meta http-equiv="Content-Security-Policy" content="<value>">)
If you have weighed the risks, you could possibly consider removing Content Security Policy from the web page hosting the BoxCast video. Not all sites utilize an explicit CSP, and instead, rely on browser defaults to provide proper protection.
If you need to keep your CSP, the fix is to properly configure your Content Security Policy. Depending on your initial configuration and security requirements, you may have different CSP values. In order for BoxCast videos to play back, you will need to:
Make sure to include
blob:, as we utilize MSE via hls.js for playback.Make sure to include
*.boxcast.com, as some browsers utilize native media playback from one of several boxcast.com media subdomains.Consider including these values in
default-src,media-src, andworker-src.