¡Lo que los usuarios novatos de aplicaciones web deben saber sobre las cookies!
El artículo que quiero compartir con ustedes hoy trata sobre el conocimiento de las cookies que los principiantes en el front-end web deben conocer. ¿Cómo pueden los amigos que se están preparando para aprender conocimientos de front-end web y participar en el trabajo de front-end web no entender las cookies? Hoy, el editor le ofrece este artículo. Echemos un vistazo al conocimiento de las cookies que los usuarios novatos del front-end web deben conocer.
1. La aparición de cookies
El protocolo HTTP es indispensable para la comunicación entre el navegador y el servidor. Sin embargo, debido a que el protocolo HTTP no tiene estado, el servidor no conoce el último. tiempo que lo hizo el navegador qué tipo de operaciones se realizan, lo que dificulta seriamente la implementación de aplicaciones web interactivas.
En respuesta a los problemas anteriores, los programadores de Netscape crearon Cookie.
2. Transmisión de cookies
En el proceso de implementación del estándar Cookie, el servidor necesita enviar el encabezado HTTP Set-Cookie como parte de la respuesta a cualquier solicitud HTTP:
1.Set-Cookie:nombre=valor;expires=Tue,03-Sep-201914:10:21GMT;path=/;
dominio=.#;
Navegador El cliente almacenará dicha cookie y agregará un encabezado de solicitud HTTP de cookie a cada solicitud posterior y la enviará de vuelta al servidor:
1.Cookie:nombre=valor
El servidor verifica el valor de la cookie para determinar a qué usuario envía el navegador la solicitud.
3. Cookies en el navegador
Las cookies en el navegador constan principalmente de las siguientes partes:
·Nombre: El nombre único de la cookie, que debe ser procesamiento de codificación de URL. (Se sobrescribirá el mismo nombre)
·Valor: debe estar codificado en URL.
·Dominio: Por defecto, la cookie es válida en el dominio actual. También puede configurar este valor para garantizar que sea válida en sus subdominios.
·Ruta: Especifique la ruta bajo la cual la cookie es válida. La ruta predeterminada es la actual.
·
Tiempo de caducidad (caduca): De forma predeterminada, las cookies se eliminarán automáticamente cuando finalice la sesión del navegador. También puede establecer una fecha en formato GMT para especificar una fecha de eliminación específica; ; si la fecha establecida es una fecha anterior, la cookie se eliminará inmediatamente.
·Bandera segura (secure): Después de especificar, solo se permite enviar cookies al protocolo https.
Cuando el navegador envía una solicitud, solo agregará el nombre y el valor al campo Cookie del encabezado de la solicitud y lo enviará al servidor.
El navegador proporciona una API muy pobre para operar cookies:
1.document.cookie
La cookie se puede escribir mediante el método anterior. Solo una cookie. La cadena se puede escribir a la vez:
1.document.cookie='a=1;secure;path=/'
Las cookies también se pueden modificar mediante este método Operación de lectura:
1.document.cookie//"a=1"
Dado que el método anterior es muy poco intuitivo para operar Cookies, algunas funciones generalmente se escriben para simplificar la lectura de Cookies. operaciones.
Para la operación de configuración de cookies, se requieren los siguientes puntos:
URL que codifica el nombre y el valor, es decir, utilizando el método encodeURIComponent() en JavaScript;
expires requiere que se pase la fecha en formato GMT, que debe procesarse de una manera que sea más fácil de escribir, como: configurar el número de segundos, tenga en cuenta que solo el nombre del atributo es seguro;
Cada pieza de información necesita usar un punto y coma. Agregar espacios.
1.functionsetCookie(clave,valor,atributos){
2.if(typeofdocument==='indefinido'){
3.return
4.}
5.attributes=Object.assign({},{
6.path:'/'
7. }, atributos)
8.
9.let{dominio,ruta,expires,secure}=atributos
10.
11.if(typeofexpires==='número'){
12.expires=newDate(Date.now()+expires*1000)
13.}
14.if(expiresinstanceofDate){
15.expires=expires.toUTCString()
16.}else{
17.expires=' '
18.}
19.
20.key=encodeURIComponent(clave)
21.value=encodeURIComponent(valor)
22.
23.letcookieStr=`${key}=${value}`
24.
25.if (dominio){
26.cookieStr+=`;dominio=${dominio}`
27.}
28.
29.if(ruta){
30.cookieStr+=`;ruta=${ruta}`
31.}
32.
33.if(expires){
34.cookieStr+=`;expires=${expires}`
35.}
36.
37.if(seguro){
38.cookieStr+=`;seguro`
39.}
40.
41.return(document.cookie=cookieStr)
42.}
Al leer cookies, debe prestar atención a la URL que decodifica el nombre y el valor, es decir Llame al método decodeURIComponent() en JavaScript:
1.functiongetCookie(name){
2.if(typeofdocument==='undefinido'){
3.regresar
4.}
5.letcookies=[]
6.letjar={}
7.documento. cookie&&(cookies=document.cookie.split(';'))
8.
9.for(leti=0,max=cookies.length;i
10.let[key,value]=cookies[i].split('=')
11.key=decodeURIComponent(key)
12.value=decodeURIComponent (valor)
13.jar[clave]=valor
14.if(
clave===nombre){
15.break
16.}
17.}
18.
19.returnname?jar[name]:jar
20.}
El último método de compensación es aún más simple, simplemente establezca la fecha de vencimiento (caduca) en el pasado. la fecha puede ser:
1.functionremoveCookie(key){
2.setCookie(key,'',{expires:-1})
3 . }
Después de introducir la encapsulación de las operaciones básicas de las cookies, también debe comprender que para limitar el uso malicioso de las cookies, los navegadores estipulan el tamaño del espacio en disco ocupado por las cookies y la cantidad de cookies en cada nombre de dominio.
4. Cookies en el lado del servidor
En comparación con el lado del navegador, cuando el servidor realiza la operación de escritura de Cookie, coloca la cadena de Cookie empalmada en Set-Cookie. del campo del encabezado de respuesta; al realizar una operación de lectura de cookies, se analiza el par clave-valor en el campo del encabezado de solicitud HTTP.
La mayor diferencia con el navegador es que el servidor se preocupa por la seguridad de las cookies.
firmado
Cuando se establece firmado = verdadero, el servidor Dos Conjunto -Se generarán campos de encabezado de respuesta de cookies para esta cadena de cookies:
1.Set-Cookie:lastTime=2019-03-05T14:31:05.543Z;path=/;httponly
2.Set-Cookie:lastTime.sig=URXREOYTtMnGm0b7qCYFJ2Db400;path=/;
httponly
Aquí enviando otro nombre con .sig como sufijo y el par El valor del La cookie está cifrada para verificar si ha sido manipulada durante la transmisión.
httpOnly
El atributo httpOnly se agrega al campo Set-Cookie en el servidor. Cuando la información de la cookie devuelta por el servidor contiene el campo httpOnly, los desarrolladores no pueden manipularlo a través de JavaScript. Cadena de galletas.
La principal ventaja de esto es que ante ataques XSS (Cross-sitescripting), los hackers no pueden obtener la información de la cookie que establece el campo httpOnly.
En este punto, encontrará que localStorage es ligeramente inferior en defensa contra ataques XSS en comparación con Cookie. SameSite
Antes de introducir este nuevo atributo, primero debe comprender: cuando el usuario inicia una solicitud desde #, también llevará una cookie, y la cookie transportada desde # se denomina cookie de terceros.
Aunque las cookies de terceros tienen algunos beneficios, brindan oportunidades para ataques CSRF (Cross-siterequestforgrey).
Para solucionar el ataque CSRF desde la causa raíz, ha hecho su debut el atributo SameSite, y sus valores son los siguientes:
·
estricto: Navegación El servidor no transportará cookies en ninguna solicitud entre dominios, lo que puede defenderse eficazmente contra ataques CSRF. Sin embargo, para sitios web con múltiples subdominios, el nombre de dominio principal se utiliza para almacenar la información de inicio de sesión del usuario. el usuario vuelve a iniciar sesión, lo que hace que el usuario vuelva a iniciar sesión. La experiencia es muy mala.
·lax: Comparado con estricto, permite el uso de cookies al saltar desde sitios web de terceros.
Para facilitar que todos comprendan el efecto real de SameSite, puede consultar este ejemplo:
1.//#El servidor devolverá la siguiente cookie al acceder a la página.
2.cookies.set('foo','aaaaa')
3.cookies.set('bar','bbbbb')
4 .cookies.set('name ','cccccc')
5.
6.//#El servidor devolverá la siguiente Cookie al acceder a la página
7.cookies.set( 'foo','a',{sameSite:'strict'})
8.cookies.set('bar','b',{sameSite:'lax '})
9.cookies.set('baz','c')
Cómo ahora el usuario hace clic en el enlace en # para saltar a #, su encabezado de solicitud es como esto:
1.RequestHeaders
2.
3.Cookie:bar=b;baz=c
5. optimización
En la comunicación entre el servidor y el navegador, las cookies se basan principalmente en encabezados de respuesta HTTP y encabezados de solicitud, por lo que las cookies ocuparán una cierta cantidad de ancho de banda.
Como se mencionó anteriormente, el navegador transportará automáticamente información de cookies para cada solicitud HTTP. Sin embargo, para recursos estáticos en el mismo sitio, el servidor no necesita procesar las cookies transportadas, lo que desperdicia ancho de banda de manera invisible.
Como práctica recomendada, los recursos estáticos generalmente se implementan en nombres de dominio independientes para evitar el impacto de cookies no válidas.
Lo anterior es lo que el editor ha compartido con usted hoy sobre el conocimiento de las cookies que los principiantes en el front-end web deben conocer. Espero que este artículo pueda proporcionar alguna orientación para quienes trabajan en la Web. front-end y aquellos que se están preparando para trabajar en la Web
Los amigos de aprendizaje front-end son útiles. Si desea obtener más información sobre conocimientos relacionados con el front-end web, recuerde prestar atención al sitio web oficial de Beida Jade Bird Web Training.
Autor|descire
Fuente|#/article/286535
*Declaración: El contenido y las imágenes son de Internet (algunos contenidos han sido modificados). y los derechos de autor pertenecen a Es propiedad del autor original. Si la información fuente es incorrecta o infringe los derechos, comuníquese con nosotros para cuestiones de eliminación o autorización.