{"id":13111,"date":"2024-09-07T10:53:17","date_gmt":"2024-09-07T08:53:17","guid":{"rendered":"https:\/\/www.palentino.es\/blog\/?p=13111"},"modified":"2024-09-07T13:11:18","modified_gmt":"2024-09-07T11:11:18","slug":"cuando-se-implemento-cors-y-por-que-es-importante","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/cuando-se-implemento-cors-y-por-que-es-importante\/","title":{"rendered":"\u00bfCu\u00e1ndo se implement\u00f3 CORS y por qu\u00e9 es importante?"},"content":{"rendered":"

En el desarrollo de aplicaciones web modernas, la seguridad es un factor clave, y uno de los mecanismos m\u00e1s importantes para garantizarla es CORS<\/strong> (Cross-Origin Resource Sharing). Esta tecnolog\u00eda juega un papel crucial al permitir que las aplicaciones web se comuniquen de forma segura entre diferentes dominios. Pero, \u00bfcu\u00e1ndo y por qu\u00e9 se implement\u00f3 CORS? Aqu\u00ed te contamos su historia y c\u00f3mo ayuda a proteger las aplicaciones contra ataques comunes como XSS<\/strong> y CSRF<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

\u00bfQu\u00e9 es CORS?<\/strong><\/h3>\n

CORS<\/strong> es un protocolo de seguridad que los navegadores implementan para controlar c\u00f3mo las aplicaciones web pueden realizar solicitudes a otros servidores que no est\u00e1n en el mismo dominio que la aplicaci\u00f3n. Por ejemplo, si una aplicaci\u00f3n en app.ejemplo.com intenta acceder a una API en api.ejemplo.com, sin CORS, el navegador bloquear\u00eda la solicitud por razones de seguridad.<\/p>\n

Antes de CORS, los desarrolladores web ten\u00edan que enfrentarse a la estricta pol\u00edtica de mismo origen<\/strong> (Same-Origin Policy), que imped\u00eda realizar peticiones HTTP a otros dominios. Sin embargo, a medida que las aplicaciones web se volvieron m\u00e1s distribuidas, se necesitaba un mecanismo m\u00e1s flexible para permitir estas solicitudes, siempre de manera segura. Ah\u00ed es donde entra en juego CORS, que establece reglas sobre qu\u00e9 dominios pueden hacer solicitudes y bajo qu\u00e9 condiciones.<\/p>\n

<\/p>\n

\"\"<\/a><\/h3>\n

<\/h3>\n

\u00bfCu\u00e1ndo se implement\u00f3 CORS?<\/strong><\/h3>\n

La especificaci\u00f3n de CORS<\/strong> fue desarrollada por el World Wide Web Consortium (W3C)<\/strong> y comenz\u00f3 a implementarse en los navegadores en 2010. Su creaci\u00f3n respondi\u00f3 a la necesidad de permitir solicitudes entre diferentes or\u00edgenes (dominios) en aplicaciones web cada vez m\u00e1s complejas, sin comprometer la seguridad.<\/p>\n

Antes de CORS, los desarrolladores empleaban m\u00e9todos menos seguros como JSONP<\/strong> para hacer solicitudes entre dominios, lo cual conllevaba limitaciones y riesgos de seguridad. Con CORS, se logr\u00f3 un enfoque est\u00e1ndar y mucho m\u00e1s seguro.<\/p>\n

\u00bfPor qu\u00e9 es importante CORS?<\/strong><\/h3>\n

CORS ayuda a controlar qui\u00e9n puede acceder a los recursos de tu servidor. Sin CORS, cualquier p\u00e1gina web podr\u00eda hacer solicitudes a tu servidor sin restricciones, lo que abrir\u00eda la puerta a ataques graves como Cross-Site Scripting (XSS)<\/strong> y Cross-Site Request Forgery (CSRF)<\/strong>.<\/p>\n

Cross-Site Scripting (XSS) y Cross-Site Request Forgery (CSRF): \u00bfPor qu\u00e9 debes preocuparte?<\/strong><\/h3>\n
    \n
  • Cross-Site Scripting (XSS)<\/strong>:\n
      \n
    • En este ataque, los atacantes inyectan scripts maliciosos en p\u00e1ginas web que otros usuarios visualizan. Si un sitio web permite solicitudes de otros dominios sin control adecuado, un atacante podr\u00eda inyectar c\u00f3digo malicioso que robe informaci\u00f3n sensible o manipule el comportamiento de la p\u00e1gina. CORS ayuda a reducir el riesgo de estos ataques al permitir que el servidor controle qu\u00e9 or\u00edgenes pueden acceder a \u00e9l y bajo qu\u00e9 condiciones.<\/li>\n<\/ul>\n<\/li>\n
    • Cross-Site Request Forgery (CSRF)<\/strong>:\n
        \n
      • Este ataque enga\u00f1a a los usuarios para que realicen acciones no deseadas en aplicaciones web en las que est\u00e1n autenticados. Por ejemplo, si un usuario est\u00e1 autenticado en un banco, un atacante puede intentar enviar solicitudes maliciosas desde un sitio web externo para realizar transferencias de dinero. CORS permite que el servidor valide las solicitudes y asegure que provienen de dominios confiables, lo que reduce significativamente el riesgo de CSRF.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

        \u00bfC\u00f3mo funciona CORS?<\/strong><\/h3>\n

        Cuando una aplicaci\u00f3n web intenta hacer una solicitud a un servidor en otro dominio, el navegador env\u00eda una solicitud especial, llamada preflight request<\/strong>, si la solicitud es “compleja” (por ejemplo, si usa m\u00e9todos HTTP como PUT o DELETE, o si env\u00eda ciertos encabezados como Authorization). Esta solicitud preflight utiliza el m\u00e9todo OPTIONS para preguntar al servidor si permite solicitudes desde el dominio de origen.<\/p>\n

        El servidor responde con ciertos encabezados CORS<\/strong> que indican si la solicitud es permitida. Si la respuesta del servidor indica que est\u00e1 permitido, el navegador procede con la solicitud real. De lo contrario, la solicitud es bloqueada.<\/p>\n

        Ejemplo sencillo de configuraci\u00f3n CORS en PHP<\/strong><\/h3>\n

        Para ilustrarlo, aqu\u00ed tienes un ejemplo de c\u00f3mo configurar CORS en un servidor PHP para permitir solicitudes desde cualquier dominio:<\/p>\n

        <?php<\/span>
        \n\/\/ Permitir solicitudes desde cualquier origen<\/span>
        \nheader(“Access-Control-Allow-Origin: *”);<\/span><\/p>\n

        \/\/ Permitir los m\u00e9todos HTTP que ser\u00e1n aceptados<\/span>
        \nheader(“Access-Control-Allow-Methods: GET, POST, PUT, DELETE”);<\/span><\/p>\n

        \/\/ Permitir ciertos encabezados en las solicitudes<\/span>
        \nheader(“Access-Control-Allow-Headers: Content-Type, Authorization”);<\/span><\/p>\n

        \/\/ Aqu\u00ed ir\u00eda el resto del c\u00f3digo de la API<\/span><\/p>\n

         <\/p>\n

        Con esta configuraci\u00f3n, el servidor est\u00e1 permitiendo que cualquier dominio realice solicitudes a la API utilizando los m\u00e9todos HTTP especificados. Esto facilita la interoperabilidad entre aplicaciones distribuidas.<\/p>\n

        Beneficios de CORS para la seguridad<\/strong><\/h3>\n

        Adem\u00e1s de permitir solicitudes entre dominios de forma controlada, CORS<\/strong> a\u00f1ade una capa de seguridad adicional. Las aplicaciones modernas, especialmente aquellas que manejan datos sensibles, dependen de CORS para evitar que sitios maliciosos puedan hacer solicitudes autom\u00e1ticas a tus servidores.<\/p>\n

        Al configurar correctamente los encabezados CORS, puedes:<\/p>\n

          \n
        • Controlar qui\u00e9n tiene acceso a tus recursos<\/strong>, permitiendo solo solicitudes desde dominios confiables.<\/li>\n
        • Proteger tus usuarios<\/strong> contra ataques como XSS y CSRF, asegurando que las solicitudes no provengan de sitios maliciosos.<\/li>\n<\/ul>\n

          Conclusi\u00f3n<\/strong><\/h3>\n

          Desde su implementaci\u00f3n en 2010, CORS<\/strong> ha sido una herramienta clave para permitir el intercambio de recursos entre dominios de manera segura. No solo habilita la comunicaci\u00f3n entre diferentes or\u00edgenes, algo esencial en el desarrollo de aplicaciones modernas, sino que tambi\u00e9n protege contra ataques como Cross-Site Scripting (XSS)<\/strong> y Cross-Site Request Forgery (CSRF)<\/strong>.<\/p>\n

          Para los desarrolladores, entender c\u00f3mo funciona CORS y c\u00f3mo configurarlo correctamente es fundamental para crear aplicaciones web seguras y eficientes. As\u00ed que, la pr\u00f3xima vez que te enfrentes a un error de CORS, recuerda que est\u00e1 ah\u00ed para protegerte, a ti y a tus usuarios.<\/p>\n","protected":false},"excerpt":{"rendered":"

          En el desarrollo de aplicaciones web modernas, la seguridad es un factor clave, y uno de los mecanismos m\u00e1s importantes para garantizarla es CORS (Cross-Origin Resource Sharing). Esta tecnolog\u00eda juega un papel crucial al permitir que las aplicaciones web se comuniquen de forma segura entre diferentes dominios. Pero, \u00bfcu\u00e1ndo y por qu\u00e9 se implement\u00f3 CORS? Aqu\u00ed te contamos su historia y c\u00f3mo ayuda a proteger las aplicaciones contra ataques comunes como XSS y CSRF. \u00bfQu\u00e9 es CORS? CORS es un protocolo de seguridad que los navegadores implementan para controlar c\u00f3mo las aplicaciones web pueden realizar solicitudes a otros servidores que no est\u00e1n en el mismo dominio que la aplicaci\u00f3n. Por ejemplo, si una aplicaci\u00f3n en app.ejemplo.com intenta acceder a una API en api.ejemplo.com, sin CORS, el navegador bloquear\u00eda la solicitud por razones de seguridad. Antes de CORS, los desarrolladores web ten\u00edan que enfrentarse a la estricta pol\u00edtica de mismo origen (Same-Origin Policy), que imped\u00eda realizar peticiones HTTP a otros dominios. Sin embargo, a medida que las aplicaciones web se volvieron m\u00e1s distribuidas, se necesitaba un mecanismo m\u00e1s flexible para permitir estas solicitudes, siempre de manera segura. Ah\u00ed es donde entra en juego CORS, que establece reglas sobre qu\u00e9 dominios pueden hacer solicitudes y bajo qu\u00e9 condiciones.<\/p>\n","protected":false},"author":1,"featured_media":12506,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1415],"tags":[668],"class_list":["post-13111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria-es","tag-seguridad"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/13111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=13111"}],"version-history":[{"count":5,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/13111\/revisions"}],"predecessor-version":[{"id":13118,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/13111\/revisions\/13118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/12506"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=13111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=13111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=13111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}