La política del mismo origen es una función de seguridad del navegador que restringe la forma documentos y secuencias de comandos en un origen pueden interactuar con 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 un sitio podría incorporar varios iframes diferentes sitios. Si no hay restricciones en las interacciones entre estos recursos y un atacante vulnera una secuencia de comandos, podría exponer todo en el navegador del usuario.
La política del mismo origen impide que esto ocurra, ya que bloquea el acceso de lectura a 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 incorporar recursos de un origen diferente. Esta política es principalmente un historial y puede exponer tu sitio a vulnerabilidades, como clickjacking usando iframes. Puedes restringir la lectura de origen cruzado de estas etiquetas con una política de Content Security Política.
¿Qué se considera un origen del mismo?
Un origen se define a través del esquema (también conocido como protocolo, por ejemplo
HTTP o HTTPS), un puerto (si se especifica) y un host. Cuando las tres son iguales
de dos URLs, se consideran de 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?
Generalmente, se permite la incorporación de un recurso de origen cruzado, mientras que la lectura de un el recurso de origen cruzado está bloqueado.
| Iframes |
La incorporación de origen cruzado suele permitirse (según la directiva X-Frame-Options), pero no la lectura de origen cruzado (como el uso de 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, la lectura de datos de imágenes de origen cruzado (como la recuperación de datos binarios de una imagen de origen cruzado usando JavaScript) está bloqueada. |
| multimedia |
El video y 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). |
TODO: DevSite: Evaluación de Think and Check
Cómo prevenir el clickjacking
Un ataque llamado "clickjacking" incorpora un sitio en un elemento iframe y superpone
botones transparentes que vinculan a un destino diferente. Los usuarios son engañados
pensar que acceden a tu aplicación y, al mismo tiempo, envían datos a
de los atacantes.
Para impedir que otros sitios incorporen tu sitio en un iframe, agrega un contenido
política de seguridad con frame-ancestors
directiva
a los encabezados HTTP.
También puedes agregar X-Frame-Options a los encabezados HTTP. Consulta
MDN
para ver la lista de opciones.
Conclusión
Espero que te sientas un poco aliviado de que los navegadores se esfuercen por ser recepcionistas. de 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 tu aplicaciones. En la siguiente guía, obtendrás información sobre el uso compartido de recursos entre dominios (CORS) y cómo indicarle al navegador que la carga de recursos de origen cruzado es de fuentes confiables.