CORS verstehen

In diesem Thema erfahren Sie mehr über CORS und die Beschränkungen, die im Web in Bezug auf die herkunftsübergreifende Referenzierung von Inhalten wie Videos, Bildern und Skripts gelten.

Überblick

Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, mit dem eine Webseite Anforderungen an eine andere Domäne als die stellen kann, von der aus die Seite bereitgestellt wurde. Normalerweise würden domänenübergreifende Anfragen von Webbrowsern ansonsten verboten. CORS definiert eine Art und Weise, wie Domänen interagieren können, um zu bestimmen, ob Ursprungsübergreifende Anforderungen zugelassen werden sollen oder nicht.

CORS und Brightcove

Es gibt drei Fälle, in denen CORS mit Brightcove-Diensten / -Produkten verwendet werden muss:

  1. Bildunterschriften für Videos:: Die Datei, die Untertitel für ein Video enthält, kann in einer Nicht-Brightcove-Domäne gespeichert werden. Da das Video selbst von einer Brightcove-Domäne bereitgestellt wird, führt dies zu domänenübergreifenden Problemen.
  2. Brightcove Player und HLS:: Das Brightcove Player's Das HLS-Plugin verwendet AJAX-Anforderungen, um das Manifest des HLS-Videos und einzelne Segmente abzurufen. Da diese HLS-Ressourcen in jeder über das Internet zugänglichen Domäne gespeichert werden können, werden diese Ressourcen wahrscheinlich von einem anderen Server (normalerweise einer CDN-Domäne) als von der Brightcove-Domäne bereitgestellt, die den Player bedient hat. Dies führt erneut zu domänenübergreifenden Problemen.
  3. Video Still- und Miniaturbilder: Zum Aufnehmen von Videostill- und Miniaturbildern in Studio muss die Videowiedergabe mit CORS-Headern bedient werden (die bei den meisten Brightcoves aktiviert sein sollten Haus-CDNs standardmäßig); Wenn Sie ein benutzerdefiniertes CDN haben oder eines, das wir noch nicht aktualisiert haben, funktioniert die Bildaufnahme nicht

Lösungen

Die Lösung, die Brightcove derzeit verwendet, umfasst die Konfiguration eines Access-Control-Allow-Origin Header in der Konfigurationsdatei des CDN-Ursprungsservers. Es ist wichtig zu beachten, dass die folgenden Header-Informationen als Beispiel und nicht als Drop-In-Code-Snippet angeboten werden, da verschiedene CDN-Partner unterschiedliche Serverlösungen verwenden, um ihre Inhalte bereitzustellen.

Brightcove hatte Erfolg mit der folgenden Header-Direktive für die Eigenschaften des internen CDN-Servers:

<FilesMatch ".(vtt|xml)$">
              Header set Access-Control-Allow-Headers: X-Requested-With
              Header add Access-Control-Allow-Origin: https://admin.brightcove.com
          </FilesMatch>

Im Folgenden werden die Richtlinien kurz erläutert:

  • <FilesMatch ".(vtt|xml)$">:: Diese Bedingung setzt die Access-Control-Allow-Origin Header nur für vtt- oder xml-Dateien. Tests haben bestätigt, dass dieser Header nicht mit Bildern oder anderen von http bereitgestellten Inhalten gesendet wird.
  • Header set Access-Control-Allow-Headers: X-Requested-With:: Dieser Header wird für die benötigt Access-Control-Allow-Origin Header zu arbeiten, da die Anfrage, die der Spieler macht, eine XmlHttpRequest ist.
  • Header add Access-Control-Allow-Origin: https://admin.brightcove.com: Dies ist der Zugriffssteuerungsheader selbst, um Inhalte aus der angegebenen Domäne zuzulassen.

Aktivieren von CORS unter Apache

Sie können in der Konfiguration von Apache-Servern einen Header festlegen, um CORS zu aktivieren. Stellen Sie Folgendes in das entsprechende Feld .conf Datei:

Header set Access-Control-Allow-Origin "*"

Im obigen Beispiel fungieren die Sternchen als Platzhalter und ermöglichen den Zugriff auf alle Domänen. Der Platzhalter kann auch durch ersetzt werden einer spezifische Domain. Dies funktioniert bei Brightcove-Playern im Allgemeinen nicht, da sich Assets in vielen Fällen auf mehreren Domänen befinden. Sie können andere Lösungen implementieren, um den Zugriff auf eine bestimmte Whitelist akzeptabler Domänen zu beschränken.

VON CDN

Wenn Sie ein Kunde mit einem BYO-CDN sind und domänenübergreifende Probleme haben, sollten Sie sich an Ihr CDN wenden, um Hilfe bei der Konfiguration von CORS für Ihr Konto zu erhalten. Hier sind die Einstellungen, die wir empfehlen:

  • Access-Control-Allow-Header: X-Angefordert-Mit
  • Zugriffskontrolle-Zulassen-Ursprung: *
  • dateiformate: m3u8 m3u ts xml dfxp vtt mpd m4f mp4 jpg png

Token-Autorisierungsanforderungen

In dem Fall, in dem eine Token-Autorisierung erforderlich ist, müssen Änderungen an der obigen Lösung vorgenommen werden. Im Falle einer Token-Autorisierung verbietet das CORS-Sicherheitsmodell ausdrücklich die Verwendung von * Zeichen als Wert für die Access-Control-Allow-Origin Antwortheader. Darüber hinaus ist der Access-Control-Allow-Credentials Antwortheader erforderlich und muss auf „true“ festgelegt sein.

Eine aktualisierte Header-Direktive für die Token-Autorisierung lautet:

<FilesMatch ".(m3u8 | m3u | ts)$">
        # with AJAX withCredentials=true (cookies sent, SSL allowed...)
        SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
        Header set Access-Control-Allow-Origin "%{ORIGIN}e"
        Header set Access-Control-Allow-Credentials "true"
        RewriteEngine On
        RewriteCond %{REQUEST_METHOD} OPTIONS
        RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{https:ORIGIN}]
  </FilesMatch>

Die folgenden Punkte beschreiben die Unterschiede zur früheren Lösung:

  • Die Direktive fragt die eingehende Anforderung auf das Vorhandensein eines Origin-Headers ab, und wenn dieser Header vorhanden ist (normalerweise ist es), legt seinen Wert auf eine Variable mit dem Namen ORIGIN: SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
  • Das Access-Control-Allow-Origin Der Wert des Antwortheaders wird auf den Wert von gesetzt ORIGIN soeben erstellte Variable: Header set Access-Control-Allow-Origin "%{ORIGIN}e"
  • Der Access-Control-Allow-Credentials Header muss auf Folgendes eingestellt sein true: Header set Access-Control-Allow-Credentials "true"

HLS und CORS

In einigen Umgebungen (z. B. Amazon S3) können Sie eine CORS-Konfiguration für HLS angeben. Im Folgenden wird CORS so konfiguriert, dass die HLS-Wiedergabe möglich ist.

<CORSConfiguration>
      <CORSRule>
      <AllowedOrigin>*</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
</CORSConfiguration>

Weitere Informationen zu Amazon S3 finden Sie unter Aktivieren der gemeinsamen Nutzung von Ressourcen zwischen verschiedenen Ursprüngen.

Obwohl der Client-Browser tangential zu CORS ist, muss er alle Sitzungscookies akzeptieren, damit die Bereitstellung von Token Authorized HLS-Inhalten ordnungsgemäß funktioniert. Während einige Client-Browser wie Google Chrome und Mozilla Firefox standardmäßig Sitzungscookies akzeptieren, tun andere Browser wie Internet Explorer dies nicht. Daher muss diese Option vom Benutzer aktiviert werden.