La política del mismo origen es una función de seguridad del navegador que restringe la forma en que los documentos y las secuencias de comandos de un origen pueden interactuar con los recursos de otro origen.
Un navegador puede cargar y mostrar recursos de varios sitios a la vez. Es posible que tengas varias pestañas abiertas al mismo tiempo, o bien que un sitio pueda incorporar varios iframes de diferentes sitios. Si no hay restricciones en las interacciones entre estos recursos y un atacante vulnera una secuencia de comandos, esta podría exponer todo en el navegador del usuario.
La política del mismo origen evita que esto suceda bloqueando el acceso de lectura a los recursos cargados desde un origen diferente. "Pero espera", tú dices: "Cargamos imágenes y secuencias de comandos de otros orígenes todo el tiempo". Los navegadores permiten que algunas etiquetas incorporen recursos de un origen diferente. Esta política es principalmente un artefacto histórico y puede exponer tu sitio a vulnerabilidades como la captura de clic mediante iframes. Puedes restringir la lectura de origen cruzado de estas etiquetas mediante una Política de Seguridad del Contenido.
¿Qué se considera de mismo origen?
Un origen se define por el esquema (también conocido como protocolo, por ejemplo, HTTP o HTTPS), el puerto (si se especifica) y el host. Cuando las tres son iguales para dos URL, se consideran del mismo origen. Por ejemplo, http://www.example.com/foo tiene el mismo origen que http://www.example.com/bar, pero no https://www.example.com/bar porque el esquema es diferente.
¿Qué se permite y qué se bloquea?
Por lo general, se permite la incorporación de un recurso de origen cruzado, mientras que la lectura de un recurso de origen cruzado está bloqueada.
| Iframes |
Por lo general, se permite la incorporación de orígenes cruzados (según la directiva X-Frame-Options), pero no se permite la lectura de origen cruzado (como usar JavaScript para acceder a un documento en un iframe).
|
| CSS |
El CSS de origen cruzado se puede incorporar con un elemento <link> o @import en un archivo CSS. Es posible que se requiera el encabezado Content-Type correcto.
|
| formularios |
Las URLs de origen cruzado se pueden usar como el valor del atributo action de los elementos del formulario. Una aplicación web puede escribir datos de formularios en un destino de origen cruzado.
|
| imágenes | Se permite la incorporación de imágenes de origen cruzado. Sin embargo, está bloqueada la lectura de datos de imágenes de origen cruzado (como la recuperación de datos binarios de una imagen de origen cruzado mediante JavaScript). |
| multimedia |
El video y el audio de origen cruzado se pueden incorporar con elementos <video> y <audio>.
|
| secuencia de comandos | Las secuencias de comandos de origen cruzado se pueden incorporar. Sin embargo, es posible que se bloquee el acceso a ciertas APIs (como las solicitudes de recuperación de origen cruzado). |
PENDIENTE: DevSite: evaluación de Think and Check
Cómo evitar el clickjacking
Un ataque llamado "captura de clic" incorpora un sitio en un iframe y superpone botones transparentes que se vinculan a un destino diferente. Se engaña a los usuarios para que piensen que acceden a tu aplicación mientras envían datos a los atacantes.
Para impedir que otros sitios incorporen tu sitio en un iframe, agrega una política de seguridad de contenido con directiva frame-ancestors a los encabezados HTTP.
Como alternativa, puedes agregar X-Frame-Options a los encabezados HTTP. Consulta MDN para ver la lista de opciones.
Conclusión
Espero que te alimente un poco el hecho de que los navegadores trabajen duro para vigilar la seguridad en la Web. Aunque los navegadores intentan ser seguros mediante el bloqueo del acceso a los recursos, a veces querrás acceder a los recursos de origen cruzado en tus aplicaciones. En la siguiente guía, aprenderás sobre el uso compartido de recursos entre dominios (CORS) y cómo indicarle al navegador que se permite la carga de recursos entre dominios desde fuentes confiables.