Uso de Azure CDN con CORS

¿Qué es CORS?

CORS (uso compartido de recursos entre orígenes) es una característica de HTTP que permite que una aplicación web que se ejecute en un dominio tenga acceso a recursos de otro dominio. Para reducir la posibilidad de ataques de scripts de sitios, todos los exploradores web modernos implementan una restricción de seguridad que se conoce como directiva del mismo origen. Esta restricción impide que una página web llame a las API de un dominio distinto. CORS aporta un modo seguro de permitir que un origen (el dominio de origen) llame a las API de otro origen.

Funcionamiento

Hay dos tipos de solicitudes de CORS, solicitudes sencillas y solicitudes complejas.

Para solicitudes sencillas:

  1. El explorador envía la solicitud de CORS con un encabezado Origin adicional de solicitud HTTP. El valor de este encabezado de solicitud es el origen que atendía la página principal, que se define como la combinación de protocolo,dominio y puerto. Cuando una página de HTTPS://www.contoso.com intenta acceder a los datos de un usuario en el origen fabrikam.com, se enviaría el siguiente encabezado de solicitud a fabrikam.com:

    Origin: https://www.contoso.com

  2. El servidor podría responder con cualquiera de los siguientes encabezados:

    • Un encabezado Access-Control-Allow-Origin en la respuesta, que indica cuál de los sitios de origen se permite. Por ejemplo:

      Access-Control-Allow-Origin: https://www.contoso.com

    • Un código de error HTTP como el 403, si el servidor no permite la solicitud entre orígenes después de comprobar el encabezado Origin (Origen)

    • Un encabezado Access-Control-Allow-Origin con un carácter comodín que permite todos los dominios:

      Access-Control-Allow-Origin: *

Para solicitudes complejas:

Una solicitud compleja es una solicitud de CORS en la que es necesario que el explorador envíe una solicitud preparatoria (es decir, un sondeo preliminar) antes de enviar la solicitud de CORS real. La solicitud preparatoria solicita el permiso de servidor si la solicitud de CORS original puede continuar y es una solicitud OPTIONS a la misma dirección URL.

Sugerencia

Para obtener más detalles sobre los flujos de CORS y los errores comunes, consulte la guía de CORS para las API de REST.

Escenarios de origen único o carácter comodín

En Azure CDN, CORS funciona automáticamente sin ninguna configuración adicional, cuando el encabezado Access-Control-Allow-Origin esté establecido en un carácter comodín (*) o en un solo origen. La red CDN almacena en caché la primera respuesta, y las solicitudes subsiguientes usan el mismo encabezado.

Si ya se han enviado solicitudes a la red CDN antes de establecer CORS en el origen, tendrá que purgar el contenido del punto de conexión para volver a cargarlo con el encabezado Access-Control-Allow-Origin.

Escenarios de varios orígenes

Si necesita permitir una lista específica de orígenes admitidos para CORS, el proceso puede resultar un poco más complicado. Encontramos el primer problema cuando la red CDN copia en caché el encabezado Access-Control-Allow-Origin el primer origen de CORS. Cuando un origen de CORS distinto realiza una solicitud posteriormente, la red CDN envía el encabezado Access-Control-Allow-Origin almacenado en caché, que no coincide. Existen diversas formas de corregir este problema.

Perfiles estándar de Azure CDN

En la red CDN estándar de Azure de Microsoft, puede crear una regla en el motor de reglas estándar para comprobar el encabezado Origin de la solicitud. Si se trata de un origen válido, la regla establece el encabezado Access-Control-Allow-Origin con el valor deseado. En este caso, el encabezado Access-Control-Allow-Origin del servidor de origen del archivo se pasa por alto; el motor de reglas de la red CDN administra totalmente los orígenes de CORS admitidos.

Ejemplo de reglas con el motor de reglas estándar

Sugerencia

Puede agregar acciones adicionales a su rol para modificar encabezados de respuesta adicionales, como Access-Control-Allow-Methods.

Azure CDN Premium de Edgio

Con el motor de reglas de Edgio Premium, tiene que crear una regla para comprobar el encabezado Origen de la solicitud. Si es un origen válido, la regla establece el encabezado Access-Control-Allow-Origin con el origen proporcionado en la solicitud. Si el origen especificado en el encabezado Origin no se permite, la regla debe omitir el encabezado Access-Control-Allow-Origin, lo que ocasiona que el explorador rechace la solicitud.

Hay dos formas de resolver este problema con el motor de reglas Premium. En ambos casos, el encabezado Access-Control-Allow-Origin del servidor de origen del archivo se pasa por alto; el motor de reglas de la red CDN administra totalmente los orígenes de CORS admitidos.

Una expresión regular con todos los orígenes válidos

En este caso, se crea una expresión regular en la que se incluyen todos los orígenes que quiere permitir:

https?:\/\/(www\.contoso\.com|contoso\.com|www\.microsoft\.com|microsoft.com\.com)$

Sugerencia

Azure CDN Premium de Edgio utiliza las Expresiones regulares compatibles con Perl como su motor de expresiones regulares. Puede usar una herramienta como Regular Expressions 101 para validar la expresión regular. Tenga en cuenta que el carácter "/" es válido en expresiones regulares y no hace falta darle formato de escape; sin embargo, darle dicho formato se considera el procedimiento recomendado y algunos validadores de expresiones regulares lo esperan.

Si la expresión regular coincide, la regla reemplaza el encabezado Access-Control-Allow-Origin (si lo hay) del origen por el origen que envió la solicitud. También puede agregar encabezados de CORS adicionales, como Access-Control-Allow-Methods.

Ejemplo de reglas con expresiones regulares

Regla de encabezado de solicitud para cada origen

En lugar de usar expresiones regulares, puede crear una regla aparte para cada origen que quiera permitir con la condición de coincidenciacarácter comodín del encabezado de solicitud. Al igual que con el método de expresión regular, el motor de reglas es el único que establece los encabezados de CORS.

Ejemplo de reglas sin expresiones regulares

Sugerencia

En el ejemplo, el uso del carácter comodín * indica al motor de reglas que se admiten tanto HTTP como HTTPS.