Frameworks

Por qué utilizar CORS

Por razones de seguridad, los navegadores suelen prohibir las llamadas AJAX a recursos que se encuentren fuera del origen actual.

De hecho, esto ha sido motivo, en alguna ocasión, de poder introducir código malicioso, que fuera capaz, incluso entre diferentes pestañas de un navegador, de llamar o de hacer peticiones a recursos de otra.

Por ejemplo, mientras revisas tu cuenta bancaria en una pestaña, podrías tener otro sitio abierto en otra pestaña, y los scripts de este sitio no deberían poder hacer solicitudes AJAX a la API de tu banco, por ejemplo retirar dinero. Debemos evitar que sean capaces de interactuar entre diferentes pestañas.

Qué es CORS

CORS es una especificación del consorcio W3C que está implementada por casi todos los navegadores, de forma que podemos especificar qué dominios están autorizados y cuáles no, y para qué están autorizados.

CORS es una política de seguridad, es decir, una política que establece qué es ser seguro, y que nos va a dar una serie de reglas de control de acceso y de autenticación.

En definitiva, CORS (Cross-Origin Resource Sharing) es un mecanismo que, a través de las cabeceras de los encabezados HTTP, va a permitir a un determinado cliente (User-Agent) a acceder a los recursos de un servidor diferente al del servidor actual.

Este problema nos lo vamos a encontrar, por ejemplo, si desarrollamos nuestra API REST con Spring Boot, que va a estar protegida con CORS, y desarrollamos un cliente, con cualquier tipo de tecnología, ya que a la hora de interactuar entre ambos tendremos que tener en nuestro servidor configurado CORS de manera conveniente.

Ventajas del uso de CORS

CORS ofrece una serie de ventajas, ya que nos permite, a través de una forma estándar y sencilla, delimitar quién puede acceder a nuestra API y qué es lo que puede hacer con ella.

Podemos hacerlo incluso a nivel de métodos HTTP, según el escenario que nos requiriera nuestra aplicación, por ejemplo:

• Se puede hacer que nadie pudiera acceder a nada salvo un conjunto de orígenes, a los cuales le demos permiso por la propia URL.

• Se pueden deshabilitar todos los métodos menos GET, para que cualquiera pueda venir a hacer peticiones GET pero no pueden producir información.

• Podemos dejar GET y POST pero a deshabilitar PUT y DELETE.

Configuración a nivel de método y a nivel de clase

Spring nos permite hacer la configuración a nivel de método y también a nivel global o de clase.

Para hacerla a nivel de método, que podría ser de un método del controlador o del controlador completo, Spring provee la anotación @CrossOrigin, que nos permite indicar que un determinado método, además de estar protegido por CORS, va a permitir el acceso de determinados orígenes, y si no permitimos el acceso a esa petición, nos mostrará un error.

@CrossOrigin(origins = http://localhost:9001
@GetMapping(“/producto”)
public ResponseEntity<?> obtenerTodos() {
        //…
}

También se puede hacer la configuración a nivel global, lo podríamos hacer de diferentes maneras. Incluso podríamos bajar el nivel de abstracción, acercarnos más a Java y crear un filtro dónde hacer la configuración, aunque con un WebMvcConfigurer podríamos también hacer la configuración de CORS.

@Bean
public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                        registry.addMapping(“/producto/**”)
                                .allowedOrigins(“http://localhost:9001”)
                                .allowedMethods(“GET”, “POST”, “PUT”, “DELETE”)
                                .maxAge(3600);
                }

        };
}

Ejemplo práctico

Vamos a utilizar una aplicación cliente muy sencilla, en la que tan solo tenemos una plantilla de HTML en la cual hay una tabla que se va a rellenar con datos de AJAX, que se tienen que cargar con un código hecho en JavaScript y jQuery, en el cual vamos a consumir de una URL haciendo una petición GET.

Si conseguimos los datos pues vamos a montar todo el HTML necesario para inyectar dentro de la tabla, y si hay algún tipo de error, se mostrará por consola.

Si quieres seguir paso a paso todo el proceso de configuración a nivel de método, en el video podrás ver de forma práctica cómo hacerlo.