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 que un sitio incorpore 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 el contenido del navegador de un usuario.
La política del mismo origen evita que esto suceda, ya que bloquea el acceso de lectura a los recursos cargados desde un origen diferente. "Pero espera", dices, "cargo imágenes y secuencias de comandos de otros orígenes todo el tiempo". Los navegadores permiten que algunas etiquetas incrusten recursos de un origen diferente. Esta política es, en su mayoría, un artefacto histórico y puede exponer tu sitio a vulnerabilidades, como el secuestro de clics con iframes. Puedes restringir la lectura de origen cruzado de estas etiquetas con una política de seguridad del contenido.
¿Qué se considera el 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 los tres son iguales
para dos URLs, se consideran del mismo origen. Por ejemplo,
http://www.example.com/foo es 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 incorporar un recurso de origen cruzado, mientras que se bloquea la lectura de un recurso de origen cruzado.
| iframes |
Por lo general, se permite la incorporación de origen cruzado (según la directiva X-Frame-Options), pero no 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 un @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 de formulario. Una aplicación web puede escribir datos de formularios en un destino de origen cruzado.
|
| imágenes | Se permite incorporar imágenes de origen cruzado. Sin embargo, se bloquea la lectura de datos de imágenes de origen cruzado (como la recuperación de datos binarios de una imagen de origen cruzado con JavaScript). |
| multimedia |
Los videos y audios de origen cruzado se pueden incorporar con los elementos <video> y <audio>.
|
| secuencia de comandos | Se pueden incorporar secuencias de comandos de origen cruzado; sin embargo, es posible que se bloquee el acceso a ciertas APIs (como las solicitudes de recuperación de origen cruzado). |
TODO: DevSite - Think and Check assessment
Cómo evitar el clickjacking
Un ataque llamado "clickjacking" 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 evitar que otros sitios incorporen tu sitio en un iframe, agrega una política de seguridad del contenido con la directiva frame-ancestors a los encabezados HTTP.
Como alternativa, puedes agregar X-Frame-Options a los encabezados HTTP. Consulta
MDN
para obtener una lista de opciones.
Conclusión
Esperamos que te sientas un poco más tranquilo sabiendo que los navegadores se esfuerzan por ser guardianes de la seguridad en la Web. Aunque los navegadores intentan ser seguros bloqueando el acceso a los recursos, a veces quieres acceder a recursos de origen cruzado en tus aplicaciones. En la siguiente guía, obtén información sobre el uso compartido de recursos entre dominios (CORS) y cómo indicarle al navegador que se permite la carga de recursos de origen cruzado desde fuentes de confianza.