Refused to frame 'https://www.youtube.com/embed/xxxxx, weil es gegen die Direktive für Inhaltssicherheitsrichtlinie verstößt

Question

Ich versuche, ein Youtube-Video in meine Seite einzubetten, und sehe einen Fehler wie diesen in der Konsole:

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. 

Das scheint klar genug zu sein, also habe ich nach ein wenig Lesen zwei Möglichkeiten gefunden, eine angemessene Sicherheitsrichtlinie für Inhalte festzulegen.

1. durch eine Antwort-Header-Einstellung (die ich in meiner Datei web.config tat):

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

2. mit einem Meta-Tag im Seitenkopf:

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

Keine dieser Methoden funktionierte; Chrome gibt weiterhin das gleiche Ergebnis in der Konsole aus (obwohl ich getan habe, was ich dachte, was die Nachricht bedeutet, und die angeforderte Inhaltssicherheitsrichtlinie festlegen). Der Iframe bleibt blockiert und leer.

Es gibt viele Fragen und Antworten zu Inhaltssicherheitsrichtlinien, aber ich kann keine mit dieser Kombination von Umständen finden.

Meine Website ist auf https und meine iframe und eingebettete Video läuft dies wie folgt aussieht:

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

Das Problem nur zeigt sich für Chrom und FFirefox; Internet Explorer 11 ist ohne Inhaltssicherheitsrichtlinie in Ordnung.

Vielen Dank im Voraus für eine Beratung.

Answer 1

Ich habe die Antwort selbst gefunden. Ich habe versucht, ein Video auf der Anmeldeseite einer Identity Server 3-Installation einzubetten, und dies machte einen größeren Unterschied als ich dachte.

die Chrome Registerkarte Netzwerk enthielt einen csp Bericht von Identity Server, von dem Hinweis eine schnelle Suche, die Antwort hier im Identity Server-Dokumentation offenbart: https://identityserver.github.io/Documentation/docsv2/advanced/csp.html

einen cspOptions Eintritt zu den Identitätsserver Optionen festen Hinzufügen der Ausgabe Ganz ohne die Notwendigkeit für mich, irgendwelche meiner eigenen benutzerdefinierten Header hinzuzufügen:

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