Refused to frame 'https://www.youtube.com/embed/xxxxx because it violates Content Security Policy directive

Question

I am trying to embed a youtube video in my page and see an error like this in the console:

Refused to frame 'https://www.youtube.com/embed/<~videoId~>?showinfo=0'
because it violates the following Content Security Policy directive: 
"default-src 'self'". Note that 'frame-src' was not explicitly set, so 
'default-src' is used as a fallback.

This seems clear enough, so after a bit of reading I found two ways of setting an appropriate content security policy.

1. by setting a response header (which I did in my web.config file):

   <httpProtocol>
     <customHeaders>
       <add name="Content-Security-Policy" value="frame-src https://www.youtube.com/" />
     </customHeaders>
   </httpProtocol>
   

2. with a meta tag in the page header:

   <meta http-equiv="Content-Security-Policy" content="frame-src https://www.youtube.com">
   

Neither of these methods worked; Chrome keeps on giving the same result in the console (even though I have done what I thought the message meant and set the requested content security policy). The iframe remains blocked and empty.

There are lots of questions and answers about content security policies but I can't find any with this combination of circumstances.

My site is running on https and my iframe and embedded video looks like this:

<div id="videoContainer">
    <iframe src="https://www.youtube.com/embed/<~videoId~>?showinfo=0"
            frameborder="0"
            allowfullscreen>
    </iframe>
</div>

The problem only shows up for Chrome and FFirefox; Internet Explorer 11 is fine without a content security policy.

Thanks in advance for any advice.

Answer 1

I found the answer to this myself. I was trying to embed a video on the login page of an Identity Server 3 installation and this made a bigger difference than I thought it would.

the Chrome network tab contained a csp report from Identity Server, from which clue a quick search revealed the answer here in the Identity Server documentation: https://identityserver.github.io/Documentation/docsv2/advanced/csp.html

Adding a cspOptions entry to the identity server options fixed the issue entirelt without the need for me to add any of my own custom headers:

var options = new IdentityServerOptions
{
    SigningCertificate = Certificate.Load(),
    Factory = factory,
    RequireSsl = true,
    CspOptions = new CspOptions() {FrameSrc = "https://www.youtube.com"},
              ...
              ...
 }