How do I allow embedding videos in our Content Security Policy (CSP)?
Your site may have a Content Security Policy (CSP). That is an added layer of security that can mitigate some forms of attacks on your site, such as XSS (cross site scripting).
You can find out if you do by requesting a page you want to embed a video on and looking at its returned headers. This can be done (relatively) easily using your browser. For example if you are using Chrome, press F12, you should see an extra panel appear.
If you click on the Network tab within that, you can see the requests made. And then if you click on the name of your site, like www.example.com, you can see the Response Headers for that page. Look for one called Content-Security-Policy.
In the image below we have an example from looking at the New York Times website (www.nytimes.com). You can see they do have a Content Security Policy:
Since we use an iframe for our embed code (like most online video platforms), if your site does have a Content Security Policy, you will need to add our domain within its frame-src. Since frame-src is the part of the policy that specifies which sources can be used for iframe elements. If you don’t include our domain, a browser will see that our domain is not in frame-src and so will block our iframes from loading. And so your embedded videos will not show.
You will need to make sure the domain we use for our iframes is in your policy’s frame-src. For example:
Content-Security-Policy: frame-src 'self' https://embed.vidbeo.com;The contents of your policy will vary of course. It will likely include many other values.
Now our domain will be allowed to be used by iframe elements. And so videos embedded on your site will then load.
Find out more about that frame-src value:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src
Updated: September 25, 2023