Comprensión de CORS

En este tema, aprenderá acerca de CORS y las restricciones integradas en la Web con respecto a la referencia de origen cruzado de activos como vídeos, imágenes y scripts.

Resumen

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

CORS y Brightcove

Hay tres instancias en las que CORS debe utilizarse con los servicios/productos de Brightcove:

Subtítulos para vídeos: El archivo que contiene subtítulos de un vídeo se puede almacenar en un dominio que no sea de BrightCove. Dado que el vídeo en sí se servirá desde un dominio de Brightcove, esto causará problemas entre dominios.
Brightcove Player y HLS: El complemento Brightcove Player's HLS utiliza solicitudes AJAX para recuperar el manifiesto del vídeo HLS y segmentos individuales. Dado que estos recursos HLS se pueden almacenar en cualquier dominio accesible a 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ágenesfijas de vídeo e imágenes en miniatura: para capturar imágenes fijas de vídeo y miniaturas en Studio, la representación del vídeo se debe servir con encabezados CORS (que deben estar habilitados en la mayoría de las CDN de Brightcove de forma predeterminada); si tiene un CDN personalizado o una 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 de CDN. Es importante tener en cuenta que, dado que los diferentes socios de CDN utilizan diferentes soluciones de servidor para entregar su contenido, la información de encabezado a continuación se ofrece como ejemplo, y no como un fragmento de código desplegable.

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: http://admin.brightcove.com
          </FilesMatch>

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

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

Habilitación de CORS en Apache

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

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

En el ejemplo anterior, los asteriscos actúan como un comodín y permite el acceso a todos los dominios. El comodín también se puede reemplazar por un dominio específico. Por lo general, esto no funcionará para los jugadores de Brightcove, ya que en muchos casos los activos residen en varios dominios. Puede implementar otras soluciones para limitar el acceso a una lista blanca específica de dominios aceptables.

BYO CDN

Si usted es un cliente con una CDN BYO y tiene problemas entre dominios, debe ponerse en contacto con su CDN para obtener ayuda para configurar CORS para su cuenta. Aquí están los ajustes que recomendamos:

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

Requisitos de autorización de token

En el caso en que se requiere autorización de token, se deben realizar alteraciones en la solución anterior. En el caso de la autorización de token, el modelo de seguridad CORS no permite específicamente el uso del * carácter como valor para el encabezado de Access-Control-Allow-Origin respuesta. Además, el encabezado de Access-Control-Allow-Credentials respuesta es necesario 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:%{HTTP:ORIGIN}]
  </FilesMatch>

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

La directiva consulta la solicitud entrante para la presencia de un encabezado Origin, y si ese encabezado está presente (generalmente lo está), establece su valor en una variable llamada ORIGIN: SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
El valor del encabezado de Access-Control-Allow-Origin respuesta se establece en el valor de la ORIGIN variable recién creada: Header set Access-Control-Allow-Origin "%{ORIGIN}e"
e Se requiere, para denotar 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. A continuación se configura CORS para permitir la reproducción HLS.

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

Para obtener más información específica de Amazon S3, consulte Habilitar el uso compartido de recursos de origen cruzado.

Aunque tangencial a CORS, el navegador del cliente necesita aceptar todas las cookies de sesión para que la entrega de contenido HLS autorizado de Token funcione correctamente. Mientras que 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 esta opción debe estar habilitada por el usuario.