Resumen de soluciones front-end entre dominios

¿Cuál es la estrategia de homología?

La misma política de origen / SOP (misma política de origen) es una convención introducida por la compañía Netscape en 1995. Es la función de seguridad básica y más básica del navegador. Si falta la misma política de origen, el navegador es vulnerable a XSS , CSFR y otros ataques. La llamada homología significa que el "protocolo + nombre de dominio + puerto" son los mismos, incluso si dos nombres de dominio diferentes apuntan a la misma dirección IP, no son homólogos.

La política del mismo origen limita los siguientes comportamientos:

  1. IndexDB, LocalStorage y Cookies no se pueden leer
  2. El objeto Js y DOM no están disponibles
  3. No se puede enviar la solicitud AJAX

Las mismas necesidades de origen: ( <img><link><script>tres tipos de etiquetas no están restringidas)

Podemos resumir seis escenarios comunes entre dominios basados ​​en la definición de la política del mismo origen:
imagen

En las situaciones anteriores, de acuerdo con la tecnología que aplicamos, podemos resumir nueve soluciones de dominio cruzado:

Formas comunes de lograr dominios cruzados

Dominio cruzado a través de jsonp

Al usar <script>etiquetas que no tienen restricciones entre dominios, las páginas web pueden obtener datos JSON que se generan dinámicamente a partir de otras fuentes. Las solicitudes JSONP deben ser compatibles con el servidor de la otra parte. La ventaja es que es compatible con navegadores antiguos, pero solo es compatible con get y no es muy seguro, generalmente no se usa. Según este principio, podemos crear dinámicamente scripty luego solicitar una URL con parámetros para lograr la comunicación entre dominios.

Desventajas de jsonp: solo se puede lograr una solicitud.

var script = document.createElement("script");
script.type = "text/javascript";

//传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数
script.src =
  "http://www.baidu.com:8080/login?user=admin&callback=handleCallback";
document.head.appendChild(script);

//回调执行函数
function handleCallback(res) {
  console.log("res =", res);
}

Dominio cruzado CORS

En realidad, la solicitud de dominio cruzado se envió, pero el navegador la interceptó porque no es segura. Para decirlo sin rodeos, desea obtener algo del servidor, pero no ha sido aprobado por otros . Entonces, ¿qué es seguro? Si el servidor lo permite, es seguro. Este es el principio de la implementación de CORS: use un encabezado HTTP adicional para decirle al navegador que la aplicación web que se ejecuta en un determinado origen permite el acceso a los recursos especificados desde diferentes servidores de origen .

Actualmente, todos los principales navegadores admiten CORS, entre ellos,La versión del navegador IE no puede ser inferior a 10, IE 8 y 9 deben implementarse a través de XDomainRequest.

Solicitud simple

Si se solicitaCumple todas las siguientes condiciones, Entonces la solicitud puede considerarse como una "solicitud simple":

Uno de los métodos permitidos:

La especificación Fetch define un conjunto de campos de encabezado que son seguros para CORS

Ninguna configuración artificial de campos de encabezado que no sea esta colección. La colección es:

Content-Typ El valor de se limita a uno de los siguientes tres:

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

Solicitud previa

Y la diversa petición sencilla, primero "petición necesidad de verificación previa" requisito imprescindible OPTIONSmétodo de preselección de iniciar una solicitud al servidor, se permite que el servidor para conocer la solicitud real.

Supongo que te gusta

Origin www.cnblogs.com/cjh1996/p/12704427.html
Recomendado
Clasificación