Política y aplicación del mismo origen
Política del mismo origen
Significado
En 1995, Netscape introdujo la Política del mismo origen en el navegador. Actualmente, todos los navegadores implementan esta política. Inicialmente, su significado es que la cookie establecida por la página web A no puede ser abierta por la página web B a menos que las dos páginas web tengan el mismo origen. El llamado "mismo origen" se refiere a "tres similitudes".
El protocolo es el mismo
El nombre de dominio es el mismo
El puerto es el mismo
Por ejemplo, el protocolo de la URL /dir/page.html es, El puerto es 80 (el puerto predeterminado se puede omitir). Su homología es la siguiente.
/dir2/other.html: misma fuente
/dir/other.html: fuente diferente (nombre de dominio diferente)
/dir/other.html : Diferentes fuentes (diferentes nombres de dominio)
:81/dir/other.html: Diferentes fuentes (diferentes puertos)
1.2 Propósito
El propósito del política del mismo origen, Esto tiene como objetivo garantizar la seguridad de la información del usuario y evitar que sitios web maliciosos roben datos.
Imagínese esta situación: el sitio web A es un banco y, después de que el usuario inicia sesión, navega por otros sitios web. ¿Qué sucede si otros sitios web pueden leer las cookies del sitio web A?
Obviamente, si la cookie contiene información de privacidad (como el monto total del depósito), esta información se filtrará. Lo que es aún más aterrador es que las cookies se utilizan a menudo para guardar el estado de inicio de sesión del usuario. Si el usuario no cierra la sesión, otros sitios web pueden hacerse pasar por él y hacer lo que quieran. Porque el navegador también estipula que el envío de formularios no está restringido por la misma política de origen.
Se puede ver que la "política del mismo origen" es necesaria; de lo contrario, las cookies se pueden compartir y Internet no será seguro en absoluto.
1.3 Alcance de las restricciones
Con el desarrollo de Internet, la "política del mismo origen" se ha vuelto cada vez más estricta. Actualmente, si no es el mismo origen, *** tiene tres conductas que están restringidas.
(1) Las cookies, LocalStorage e IndexDB no se pueden leer.
(2) No se puede obtener DOM.
(3) No se puede enviar la solicitud AJAX.
Aunque estas restricciones son necesarias, en ocasiones resultan inconvenientes y afectan a fines razonables.
1.4 Limitaciones de localStorage.clear()
Cuando dos sitios web cumplen con la misma política de origen, el uso de localStorage.clear() borrará todo el almacenamiento local de las dos páginas
Solución: cuando se borra localStorage.setItem ("alias"), localStorage.removeItem ("alias")
El ticket 1.5 no es válido y el token no se puede reemplazar después de iniciar sesión nuevamente
1, cuando el ticket caduque
2. needLogin=true, inicie sesión nuevamente, borre el caché
3. Ingrese la lógica de juicio
4 Solicite el método getUserInfoByTicketTmp()
5. Vuelva a obtener el token a través de getSearchString() en este método
6. Si la información del usuario y el token están vacíos
7. Llame al método getUserInfoByTicket()
8. Almacene la información del usuario en localStorage
9. Obtenga la información del usuario y luego vuelva a montar la aplicación en Vue
Motivo : Después del error, no se puede volver a obtener el ticket ni solicitar el token (el caché no se borra después de iniciar sesión, lo que resulta en la imposibilidad de llamar al método para obtener el ticket y el token)
Solución : Solicitud de inicio de sesión, si se requiere needLogin, pase el caché del navegador a través de localStorage.removeItem ("alias") borra el caché especificado
1.6 Pasos de implementación
Suplementos
Ubicación?atributo hash
Definición y uso
El atributo hash es una cadena legible y grabable que es la parte ancla de la URL (la parte que comienza con el signo #).
Sintaxis
ubicación.hash
Obtener ticket
Obtener el ticket para obtener información de usuario y token y guardarlos en localStorage
Si no hay información del usuario, llame a la función asincrónica getUserInfoByTicket() nuevamente para obtener la información y almacenarla
Vuelva a montar la aplicación en Vue
Determine si está registrada en o no tiene permiso
p>Si es así, borre sessionStorage y borre el localStorage.remove("alias") especificado
// Si localStorage está vacío y hay un ticket, llame a getUserInfoByTicketTmp() nuevamente