Entendiendo CORS

En este tema, aprenderá sobre CORS y las restricciones integradas en la Web con respecto a las referencias de orígenes cruzados de activos como videos, imágenes y secuencias de comandos.

Resumen

El intercambio de recursos de origen cruzado (CORS) es un mecanismo que permite que una página web realice solicitudes a otro dominio que no sea aquel desde el que se sirvió la página. Normalmente, los navegadores web prohibirían las solicitudes entre dominios. CORS define una forma en que los dominios pueden interactuar para determinar si permiten o no solicitudes de origen cruzado.

CORS y Brightcove

Hay tres casos en los que CORS se debe utilizar con los servicios / productos de Brightcove:

Subtítulos para videos: El archivo que contiene subtítulos para un video se puede almacenar en un dominio que no sea de Brightcove. Dado que el video en sí se publicará desde un dominio de Brightcove, esto provocará problemas entre dominios.
Brightcove Player y HLS: La Brightcove Player's El complemento HLS utiliza solicitudes AJAX para recuperar el manifiesto del video HLS y los segmentos individuales. Dado que estos recursos de HLS se pueden almacenar en cualquier dominio accesible de Internet, es probable que estos recursos se sirvan desde un servidor diferente (normalmente un dominio CDN) que desde el dominio de Brightcove que sirvió al reproductor. Esto volverá a causar problemas entre dominios.
Imágenes fijas y miniaturas de vídeo: para capturar imágenes fijas y miniaturas de vídeo en Studio, la reproducción de vídeo debe entregarse con encabezados CORS (que deben estar habilitados en la mayoría de los alojar CDN de forma predeterminada); si tiene una CDN personalizada o una que aún no hemos actualizado, la captura de imágenes no funcionará

Soluciones

La solución que Brightcove está utilizando en este momento implica configurar un Access-Control-Allow-Origin encabezado en el archivo de configuración del servidor de origen CDN. Es importante tener en cuenta que, dado que diferentes socios de CDN utilizan diferentes soluciones de servidor para entregar su contenido, la información del encabezado a continuación se ofrece como un ejemplo y no como un fragmento de código.

Brightcove ha tenido éxito con la siguiente directiva de encabezado para las propiedades del servidor CDN interno:

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

A continuación se proporcionan breves explicaciones de la directiva:

<FilesMatch ".(vtt|xml)$">: Este condicional establece el Access-Control-Allow-Origin encabezado solo en archivos vtt o xml. Las pruebas han confirmado que este encabezado no se envía con imágenes u otro contenido enviado por http.
Header set Access-Control-Allow-Headers: X-Requested-With: Este encabezado es necesario para Access-Control-Allow-Origin encabezado para que funcione, ya que la solicitud que realiza el jugador es un XmlHttpRequest.
Header add Access-Control-Allow-Origin: https://admin.brightcove.com: Este es el encabezado de control de acceso en sí mismo para permitir contenido del dominio indicado.

Habilitar CORS en Apache

Puede establecer un encabezado en la configuración de los servidores Apache para habilitar CORS. Coloque lo siguiente en el lugar apropiado .conf expediente:

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

En el ejemplo anterior, los asteriscos actúan como comodines y permiten el acceso a todos los dominios. El comodín también se puede reemplazar por uno dominio específico. Eso generalmente no funcionará para los reproductores de Brightcove, porque en muchos casos los activos residirán en múltiples dominios. Puede implementar otras soluciones para limitar el acceso a una lista blanca específica de dominios aceptables.

BYO CDN

Si es un cliente con un BYO CDN y tiene problemas entre dominios, debe comunicarse con su CDN para obtener ayuda para configurar CORS para su cuenta. Estos son los ajustes que recomendamos:

Access-Control-Allow-Headers: X-Solicitado-Con
Acceso-Control-Permitir-Origen: *
formatos de archivo: m3u8 m3u ts xml dfxp vtt mpd m4f mp4 jpg png

Requisitos de autorización de tokens

En el caso de que se requiera la autorización del token, se deben realizar modificaciones en la solución anterior. En el caso de la autorización de token, el modelo de seguridad de CORS específicamente no permite el uso de la * carácter como un valor para el Access-Control-Allow-Origin encabezado de respuesta. Además, el encabezado de Access-Control-Allow-Credentials respuesta es obligatorio y debe establecerse en true.

Una directiva de encabezado actualizada para la autorización de token es:

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

Los siguientes puntos detallan las diferencias con la solución anterior:

La directiva consulta la solicitud entrante por la presencia de un encabezado de Origin y, si ese encabezado está presente (normalmente lo está), establece su valor en una variable denominada ORIGIN: SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
La Access-Control-Allow-Origin El valor del encabezado de respuesta se establece en el valor de la ORIGIN variable recién creada: Header set Access-Control-Allow-Origin "%{ORIGIN}e"
La e es obligatorio para indicar que se trata de una variable de entorno.
El Access-Control-Allow-Credentials encabezado debe establecerse en true: Header set Access-Control-Allow-Credentials "true"

HLS y CORS

En algunos entornos (como Amazon S3), puede especificar una configuración CORS para HLS. Lo siguiente configura CORS para permitir la reproducción de HLS.

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

Para obtener más información específica de Amazon S3, consulte Habilitación del uso compartido de recursos entre orígenes.

Aunque es tangencial a CORS, el navegador del cliente debe aceptar todas las cookies de sesión para que la entrega de contenido de HLS autorizado por token funcione correctamente. Si bien algunos navegadores cliente, como Google Chrome y Mozilla Firefox, aceptan cookies de sesión de forma predeterminada, otros navegadores, como Internet Explorer, no lo hacen, por lo que el usuario debe habilitar esta opción.