Comprendre CORS

Dans cette rubrique, vous découvrirez les CORS et les contraintes intégrées au Web en ce qui concerne le référencement d'origine croisée de ressources telles que les vidéos, les images et les scripts.

Aperçu

Le partage de ressources d'origine croisée (CORS) est un mécanisme qui permet à une page Web d'effectuer des requêtes vers un autre domaine que celui à partir duquel la page a été diffusée. Normalement, les requêtes inter-domaines seraient autrement interdites par les navigateurs Web. CORS définit une façon dont les domaines peuvent interagir pour déterminer s'il faut autoriser ou non une demande d'origine croisée.

CORS et Brightcove

Il y a trois cas où CORS doit être utilisé avec les services/produits Brightcove :

Légendes des vidéos: Le fichier contenant les sous-titres d'une vidéo peut être stocké sur un domaine autre que BrightCove. Étant donné que la vidéo elle-même sera diffusée à partir d'un domaine Brightcove, cela entraînera des problèmes interdomaines.
Brightcove Player et HLS: Le plugin Brightcove Player's HLS utilise des requêtes AJAX pour récupérer le manifeste et les segments individuels de la vidéo HLS. Étant donné que ces ressources HLS peuvent être stockées sur n'importe quel domaine accessible à Internet, il est probable que ces ressources seront fournies à partir d'un serveur différent (généralement un domaine CDN) que du domaine Brightcove qui a servi le lecteur. Cela entraînera à nouveau des problèmes interdomaines.
Images fixes et miniatures vidéo : pour capturer des images vidéo fixes et miniatures dans Studio, le rendu vidéo doit être servi avec des en-têtes CORS (qui doivent être activés sur la plupart des images de Brightcove héberger des CDN par défaut) ; si vous possédez un CDN personnalisé ou un CDN que nous n'avons pas encore mis à jour, la capture d'image ne fonctionnera pas

Solutions

La solution utilisée par Brightcove consiste à configurer un Access-Control-Allow-Origin en-tête dans le fichier de configuration du serveur d'origine CDN. Il est important de noter que puisque différents partenaires CDN utilisent des solutions serveur différentes pour diffuser leur contenu, les informations d'en-tête ci-dessous sont proposées à titre d'exemple, et non sous forme d'extrait de code de dépôt.

Brightcove a réussi avec la directive d'en-tête suivante pour les propriétés du serveur CDN interne :

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

Voici de brèves explications de la directive :

<FilesMatch ".(vtt|xml)$">: Ce conditionnel définit l' Access-Control-Allow-Origin en-tête uniquement sur les fichiers vtt ou xml. Les tests ont confirmé que cet en-tête n'est pas envoyé avec des images ou d'autres contenus délivrés par http.
Header set Access-Control-Allow-Headers: X-Requested-With: Cet en-tête est requis pour que l' Access-Control-Allow-Origin en-tête fonctionne, car la requête que le lecteur fait est XMLHttpRequest.
Header add Access-Control-Allow-Origin: https://admin.brightcove.com: Il s'agit de l'en-tête de contrôle d'accès lui-même pour autoriser le contenu du domaine indiqué.

Activation de CORS sur Apache

Vous pouvez définir un en-tête dans la configuration des serveurs Apache pour activer CORS. Placez les éléments suivants dans le .conf fichier approprié :

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

Dans l'exemple ci-dessus, les astérisques agissent comme un joker et permet l'accès à tous les domaines. Le caractère générique peut également être remplacé par un domaine spécifique. Cela ne fonctionnera généralement pas pour les joueurs de Brightcove, car dans de nombreux cas, les actifs résident sur plusieurs domaines. Vous pouvez implémenter d'autres solutions pour limiter l'accès à une liste blanche spécifique des domaines acceptables.

BYO CDN

Si vous êtes client avec un CDN BYO et que vous rencontrez des problèmes interdomaines, contactez votre CDN pour obtenir de l'aide pour configurer CORS pour votre compte. Voici les paramètres que nous recommandons :

Access-Control-Allow-En-têtes : X-Demande-Avec
Access-Control-Allow-Origine : *
formats de fichiers : m3u8 m3u ts xml dfxp vtt mpd m4f mp4 jpg png

Exigences d'autorisation de jeton

Dans le cas où l'autorisation de jeton est requise, des modifications doivent être apportées à la solution ci-dessus. Dans le cas de l'autorisation de jeton, le modèle de sécurité CORS n'autorise expressément l'utilisation du * caractère comme valeur pour l'en-tête de Access-Control-Allow-Origin réponse. En outre, l'en-tête de Access-Control-Allow-Credentials réponse est obligatoire et doit être défini sur true.

Une directive d'en-tête mise à jour pour l'autorisation de jeton est la suivante :

<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>

Les points suivants détaillent les différences par rapport à la solution antérieure :

La directive interroge la demande entrante pour détecter la présence d'un en-tête Origin, et si cet en-tête est présent (c'est généralement le cas), définit sa valeur sur une variable appelée ORIGIN: SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
La valeur d'en-tête de Access-Control-Allow-Origin réponse est définie sur la valeur de la ORIGIN variable qui vient de créer : Header set Access-Control-Allow-Origin "%{ORIGIN}e"
Le e est requis, pour indiquer qu'il s'agit d'une variable d'environnement.
L' Access-Control-Allow-Credentials en-tête doit être défini sur true: Header set Access-Control-Allow-Credentials "true"

HLS et CORS

Dans certains environnements (comme Amazon S3), vous pouvez spécifier une configuration CORS pour HLS. Ce qui suit configure CORS pour autoriser la lecture HLS.

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

Pour plus d'informations spécifiques à Amazon S3, consultez Activation du partage de ressources d'origine croisée.

Bien que tangentiel à CORS, le navigateur client doit accepter tous les cookies de session pour que la diffusion de contenu HLS autorisée par jeton fonctionne correctement. Bien que certains navigateurs clients, tels que Google Chrome et Mozilla Firefox, acceptent les cookies de session par défaut, d'autres navigateurs, comme Internet Explorer, ne le font pas, cette option doit être activée par l'utilisateur.