[SOLVED] How do I show video content when Content Security Policy is in place?

How do I show video content when Content Security Policy is in place?

I am hoping that there is an easy answer to this one.

I am embedding a video from Vimeo on a page using the "fancybox" tools. Fancybox essentially creates an iFrame and embeds the Vimeo player. It works great in all browsers - until I turn Content Security Policy on. Then ID works (since it doesn't implement CSP) but Chrome and Firefox just hang with the "loading" image shown.

I've tried this CSP:

<add header="Content-Security-Policy" value="default-src 'self'; media-src 'self' http://player.vimeo.com; frame-src 'self' http://player.vimeo.com; " />
<add header="X-Content-Security-Policy" value="default-src 'self'; media-src 'self' http://player.vimeo.com; frame-src 'self' http://player.vimeo.com; " />
<add header="X-WebKit-CSP" value="default-src 'self'; media-src 'self' http://player.vimeo.com; frame-src 'self' http://player.vimeo.com; " />

The thinking, of course, is that I am permitting both media and my iframe to come from vimeo. But it doesn't work. Does anyone know why?

UPDATE: I removed CSP for just the page showing video and looked at the content with Google's developer tools. I turns out that Vimeo brings in a ton of other stuff from other Vimeo sub-domains, vimeocdn.com, conviva.com, lphbs.com, and even Amazon's aws. So - if you use Vimeo (and YouTube?) you either have a very long list of external sites or you just don't use CSP? Any insight would be appreciated!

Solution

Yes, the best option is to add the long list of hosts, but don't remove CSP!

Based on your policy, removing CSP would mean the following:

You're allowing inline script as well as dangerous calls to eval - essentially opening up another opportunity for reflected/stored XSS
Frames can be injected from anywhere
Images, styles, applets, etc can be loaded from anywhere.

Often times you'll need to allow inline script/evals, but a content security policy is still very valid.

You can also use the report-only form of the header in conjunction with report-uri in order to collect a list of the possible places you would need to whitelist.