En este codelab, verás cómo funciona el mismo origen cuando se recuperan recursos.
Configuración: Recupera la página del mismo origen
La demostración se aloja en https://same-origin-policy-fetch.glitch.me.
Esta página web simple usa fetch para cargar recursos de https://same-origin-policy-fetch.glitch.me/fetch.html. Como index.html y fetch.html comparten el mismo origen, deberías ver 200 en la vista previa en vivo.
1. Recuperar la página desde un origen diferente
Intenta cambiar la URL de recuperación a https://www.google.com.
¿Qué ves en la vista previa en vivo?
El navegador debería haber bloqueado la solicitud de recuperación porque solicitaste un recurso de un origen diferente. Esto significa que un atacante no puede leer recursos de origen cruzado, incluso si tomó el control del navegador de un usuario.
2. Recuperar un recurso de origen cruzado
Intenta cambiar la URL de recuperación a https://api.thecatapi.com/v1/images/search.
¿Qué ves en la vista previa en vivo?
La URL de recuperación es un origen diferente, pero deberías ver el código de estado 200. ¿Por qué? Las aplicaciones web modernas suelen solicitar recursos de origen cruzado para cargar secuencias de comandos de terceros o consultar un endpoint de API. Para adaptarse a estos casos de uso, existe un mecanismo llamado CORS (uso compartido de recursos entre dominios) que le indica al navegador que se permite la carga de un recurso de origen cruzado. Consulta Compartir recursos de origen cruzado de forma segura para obtener más información sobre CORS.