Cómo usar CORS con Nginx

Que es CORS

CORS, también conocido como uso compartido de recursos de origen cruzado, es una técnica utilizada en los navegadores web modernos que controla el acceso a los recursos alojados en un servidor web. CORS usa encabezados adicionales como origin, access-control-origin y muchos más para determinar si el recurso solicitado tiene permiso para ser enviado al navegador. El propósito principal de CORS es evitar que una aplicación web que se ejecuta en un navegador web acceda a recursos alojados en un origen diferente cuando no hay permiso, lo que significa que la aplicación web no puede descargar recursos, como imágenes, scripts, CSS como cualquier contenido, etc., cuando no estén alojados en el mismo origen (por lo general, todos deben estar en el mismo dominio) que la aplicación web, a menos que el servidor esté configurado para permitir este comportamiento. Al tener esta implementación en un navegador web, los usuarios pueden proteger sus datos de terceros no autorizados. Un pirata informático puede modificar en secreto una página web mientras se encuentra en medio de la conexión para interrumpir el negocio del usuario u obtener acceso a datos valiosos. Sin embargo, CORS también tiene ventajas, como que permite a los desarrolladores cargar recursos desde un origen diferente debido a la rentabilidad o simplemente a la conveniencia. En ese caso, tienen que modificar su servidor web para permitir tales solicitudes. Este artículo demuestra cómo hacerlo en un servidor web Nginx con facilidad. En ese caso, tienen que modificar su servidor web para permitir tales solicitudes. Este artículo demuestra cómo hacerlo en un servidor web Nginx con facilidad. En ese caso, tienen que modificar su servidor web para permitir tales solicitudes. Este artículo demuestra cómo hacerlo en un servidor web Nginx con facilidad.

Qué desencadena una solicitud CORS

No todas las solicitudes desencadenan una solicitud CORS, ya que normalmente los recursos se alojan en el mismo origen que la aplicación web. Si es diferente, se activa CORS. CORS tiene dos tipos de solicitudes, una solicitud simple y una solicitud de vuelo previa de CORS.

Solicitud simple funciona como una solicitud regular, el navegador web envía una solicitud al servidor para descargar un recurso en particular cuando el usuario lo inició, luego el servidor web verifica el origen de la solicitud, la compara con las reglas en el servidor web, si es emparejado, se suministra el recurso. Este tipo de solicitud usa encabezados OIRIGN y ACCESS-CONTROL-ALLOW-ORIGIN para determinar si el recurso debe ser proporcionado o no. La solicitud simple solo se activa si se utilizan métodos de solicitud como GET, HEAD, POST y se utilizan encabezados como Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width. Incluso entonces, no todos los tipos de contenido desencadenan una simple solicitud. Aquí solo los tipos de codificación de formularios desencadenan una solicitud simple.

El tipo de solicitud previa al vuelo es bastante diferente, ya que no hay acceso directo a los recursos en la primera ronda. Cuando las condiciones mencionadas anteriormente se alteran de alguna manera, ya sea mediante el uso de un encabezado de solicitud diferente o un tipo de contenido diferente, se activa una solicitud Previada. En las solicitudes de vuelo previo, el navegador web primero se asegura de que puede acceder al recurso comunicándose con el navegador web, luego, cuando el navegador web responde con una respuesta aceptable (HTTP 200), envía otra solicitud para descargar el recurso. Utiliza el método de solicitud HTTP OPTION para iniciar la primera solicitud, luego usa GET, POST como tipos de solicitud para descargar los recursos.

Cómo configurar Nginx para admitir solicitudes CORS

Esta sección muestra cómo configurar un servidor web nginx para permitir el intercambio de recursos de origen cruzado. Esto solo se puede hacer si el desarrollador tiene acceso al servidor web, ya que implica modificar el archivo de configuración de Nginx.

Utilice el siguiente fragmento de código simple para permitir solicitudes CORS. Esto debe copiarse en el archivo predeterminado del servicio nginx en Ubuntu o en cualquier otra plataforma.

location {

if ($request_method = ‘OPTIONS’) {
        add_header ‘Access-Control-Allow-Origin’ ‘https://localhost
        add_header ‘
Access-Control-Allow-Methods‘ ‘POST, OPTIONS
        add_header ‘
Access-Control-Max-Age‘ 1728000
        add_header ‘
Content-Type‘ ‘text/plain charset=utf-8
        return 204
   }
if ($request_method= ‘
POST‘) {
        add_header ‘
Access-Control-Allow-Origin‘ ‘https://localhost
        add_header ‘Access-Control-Allow-Methods’ ‘POST’
   }

}

El fragmento de código básico es el anterior. Contiene directivas como request_method, add_header para identificar el tipo de solicitud y establecer el encabezado de la respuesta para que el navegador lea respectivamente. El encabezado Access-control-allow-origin define a qué origen tiene acceso el recurso, por ejemplo, si una aplicación web alojada en github quiere acceder a una imagen alojada en myOwnServer.com, entonces la URL de github debe usarse como el valor de Access-control-allow-origin en myOwnServer.com, luego, cada vez que la aplicación web alojada en github envía solicitudes a myOwnServer.com para descargar el archivo de imagen, todos estos solicitados reciben permiso. El encabezado Access-control-allow-method define qué tipos de solicitud admite la aplicación web que envía las solicitudes, luego el resto de los encabezados son para su edad máxima para almacenar en caché las solicitudes,

Como se describió anteriormente, una vez que se completó la solicitud de OPCIÓN, el navegador envía otra solicitud para descargar los recursos si la primera solicitud fue exitosa, sus encabezados se establecen en el primer método de solicitud si son corchetes.

Además de las directivas antes mencionadas, hay otras directivas importantes en Nginx que se pueden usar en las solicitudes CORS. Una de las directivas más importantes es access-control-allow-headers, lo que hace es establecer el encabezado de respuesta con nombres de encabezados permitidos para que el navegador los verifique. Una aplicación web puede tener sus propios encabezados para varios propósitos, y si dichos encabezados están presentes en las solicitudes posteriores después de la solicitud OPTIONS inicial, el servidor web debe permitir todos estos encabezados antes de que se comparta el recurso solicitado.

Es importante que este fragmento de código esté en el lugar correcto en el archivo predeterminado de Nginx, porque Nginx ejecuta diferentes bloques de ubicación dependiendo de la URL coincidente, si dicho bloque de ubicación no contiene este fragmento de código, entonces no se ejecuta en absoluto, y por lo tanto es importante usar esto en todos los bloques de ubicación para el lado seguro. Algunos de los bloques de ubicación importantes son los bloques Imágenes, PHP ( .php $), CSS, etc.

Una vez guardado el fragmento de código mencionado anteriormente, guarde el archivo Nginx y vuelva a cargar el servicio Nginx para que los cambios surtan efecto.

Conclusión

CORS, se conoce como uso compartido de recursos de origen cruzado y es una técnica para controlar el acceso a los recursos. Estos recursos pueden ser cualquier archivo desde una imagen hasta un archivo javascript. El propósito principal de CORS es reforzar la seguridad de las aplicaciones web para evitar ataques de intermediarios. Sin embargo, CORS también puede tener beneficios. En ese caso, el CORS debe estar encendido, ya que no está permitido de forma predeterminada. El tipo de solicitud CORS básico es el tipo de solicitud simple, usa solo las directivas ORIGIN y ACCESS-CONTROL-ALLOW-ORIGIN, y con esa ayuda, Nginx puede otorgar permiso para que el navegador web acceda al recurso solicitado según el origen. De cualquier manera, CORS es bastante útil y debe usarse con cuidado.

Leave a Comment

Your email address will not be published.

Hazlo Linux