웹 개발 팁 - 포괄적 인 이해 쿠키

A, 쿠키가 나타납니다

브라우저와 서버 통신과 사이 궁극적으로 HTTP 프로토콜하지만, HTTP 프로토콜은 무 상태이기 때문에 서버가 브라우저가 대화 형 웹 응용 프로그램의 실현에 작업의 종류, 그래서 심각한 장애물을 마지막 시간을 알지 못하기 때문이다.

이러한 문제에 대응하여, 넷스케이프 프로그래머는 쿠키를 만들었습니다.

두, 쿠키 전송

서버 쿠키 표준의 구현에서는 응답의 일부와 같은 HTTP 요청 설정 - 쿠키 HTTP 헤더에 필요한 :

설정 - 쿠키 : 이름 = 값; = (화) 03 - 9 월 - 2019 그리니치 표준시 14시 10분 21초이 만료; 경로 = /; 도메인 = .xxx.com;

이러한 쿠키 브라우저가 저장되고 각 요청 이후에 서버에 다시 머리 쿠키 HTTP 요청을 추가 할 것입니다 :

쿠키 : 이름 = 값

서버를 검증함으로써 쿠키 값은, 브라우저에 대한 요청이 사용자가 속하는 판정 보낸다.

셋째, 브라우저 Coookie

브라우저 쿠키는 주로 다음과 같은 구성 요소로 이루어져 있습니다 :

• 이름 : 쿠키 고유 한 이름은 URL 인코딩을 통해 해결해야합니다. (같은 이름의 경우는 범위를 나타납니다)

• 값 : URL 인코딩을 통해 처리되어야합니다.

• 도메인 (도메인) : 기본적으로 쿠키는 유효합니다, 당신은 또한 하위 도메인의 효과를 확인하기 위해 현재 필드의 값을 설정할 수 있습니다.

• 경로 (경로) : 쿠키 경로가 유효한 상황을 지정 기본값은 현재 경로입니다.

• 고장 시간 (만료) : 기본적으로 자동으로 브라우저 세션 쿠키의 끝에서 삭제됩니다; 이전의 날짜를 설정 한 날짜가 다음 쿠키가 즉시 삭제 할 경우, 당신은 또한 날짜에게 GMT 형식, 특정 삭제 날짜를 할당을 설정할 수 있습니다.

• 안전 표지판은 (보안) : https 프로토콜로 전송에만 허용 쿠키를 지정한 후.

 

브라우저에 요청을 전송하는 경우에만 상기 요청의 쿠키 헤더 필드에 추가 이름과 값은 서버에 송신된다.

브라우저가 쿠키를 조작 할 수있는 매우 엉터리 API를 제공한다 :

document.cookie를

 

쿠키는 위의 방법에 기록 할 수 있으며, 각 시간은 캐릭터 쿠키를 쓰기 :

document.cookie를 = 'A = 1; 안전한; 경로 = / '

 

쿠키는 과정에서 읽을 수 있습니다 :

document.cookie를
 // "A = 1"

작업의 위의 방법이 매우 직관적 쿠키가 아니기 때문에, 일반적으로 기능은 쿠키 설정, 읽기, 쓰기 간소화하고 작업을 삭제합니다.

쿠키의 동작을 설정하려면 다음이 필요합니다 :

　　　　　　에 encodeURIComponent ()를 사용하여 즉, 이름 및 값에 URL 인코딩 처리 스크립트 방법;

　　　　　　요청 날짜는 다음과 같은 글을 쓰는 방법, 처리하는 것이 더 쉽습니다 들어오는 GMT 형식을 만료 : 초 설정 방법의 수

　　　　　　만 보안 속성 이름을 참고, 정보의 모든 조각 세미콜론 공간을 사용해야합니다.

함수 의 setcookie (키 값 특성) {
   경우 ( 과 typeof 문서 === '미정의' )는 {
     반환 
  } 
  속성 = Object.assign는 ({}, { 
    경로 : '/' 
  } 속성) 

  하게는 {도메인, 경로 만료 안전한} = 속성 

  경우 ( 대해서 typeof 만료 === '수' ) { 
    만료 = 새 (* 1000 Date.now () + 만료 날짜 ) 
  } 
  경우 (만료 instanceof를 {날짜) 
    만료 = ) (expires.toUTCString를
  } 다른  {
    만료 = '' 
  } 

  키 = 에 encodeURIComponent (키) 
  값 = 에 encodeURIComponent (값을) 

  할 수 cookieStr = '$ {키} = $ {값}` 

  경우 (도메인) { 
    cookieStr + =`; 도메인 = $ {} 도메인 ' 
  } 

  경우 (경로) { 
    cookieStr + ='; 경로 = $ {}로 ' 
  } 

  경우 (만료) { 
    cookieStr + ='; 만료 = $는`{만료} 
  } 

  경우 (보안) { 
    cookieStr + = `; secure` 
  } 

  반환 (document.cookie를 =cookieStr) 
}

쿠키 조작 유의해야 읽어 decodeURIComponent () 메소드는 자바 스크립트 호출 인 URL 복호화 프로세스의 이름 및 값 :

함수 의 getCookie (명) {
   경우 ( 대해서 typeof 문서 === '미정의' ) {
     반환 
  } 
  쿠키하자 =는 [] 
  항아리 보자 = {} 
  document.cookie를가 (= document.cookie.split (쿠키, '&& )) 

  에 대한이 ( I = 0, 최대 = cookies.length하자, 내가 최대 <; 내가 ++ ) { 
    하자 [키 값] = 쿠키 [I] .split ( "=" ) 
    키 = decodeURIComponent (키) 
    의 값 = decodeURIComponent (값) 
    항아리 [ 키] = 값
     경우 (키 ===이름) {
       휴식 
    } 
  } 

  반환 이름은? 단지 [이름] 항아리 
}

마지막으로, 명확한 방법이 더 간단만큼 유효 기간 (만료)으로 과거 날짜를 설정 :

함수 removeCookie (키) { 
  의 setcookie (키, '{만료 : -1 }) 
}

패키지 쿠키의 기본 동작을 소개 한 후, 또한 그것은 쿠키 쿠키 및 각 도메인 아래에 숫자가 차지하는 디스크 공간의 크기를 정의, 악의적으로 사용되지 않습니다 쿠키 브라우저를 제한하기 위해 알 필요가있다.

하나의 도메인 이름 쿠키의 수의 제한을 우회하기 위해, 개발자는 또한 [고급 자바 스크립트 프로그래밍 제 23 장 p633]을 참조 할 수 있습니다,이 반복되지 않습니다 subcookie라는 개념을 만들었습니다.

 

쿠키의 넷째, 서비스 측면

쿠키는 동작이 실행 된 판독 된 HTTP 요청 헤더 필드가 쿠키이다 파싱; 비교 브라우저는 서버 쿠키는 쿠키 Set-Cookie 헤더 필드에 응답하여 상기 문자열에 접합 된 기록 동작을 수행 키 - 값 쌍.

쿠키의 안전을 위해 서버가 많은 문제의 브라우저와의 가장 큰 차이점

서명

= 사실 서명 설정하면, 서버는 응답으로 두 개의 스트립 쿠키 문자열 설정-Cookie 헤더 필드를 생성합니다 :

설정 - 쿠키 : lastTime = 2019-03-05T14 : 31 : 05.543Z; 경로 = /; Http 만 
설정 - 쿠키 : lastTime.sig = URXREOYTtMnGm0b7qCYFJ2Db400; 경로 = /; Http 만

这里通过再发送一条以.sig为后缀的名称以及对值进行加密的Cookie，来验证该条Cookie是否在传输的过程中被篡改。

httpOnly

服务端Set-Cookie字段中新增httpOnly属性，当服务端在返回的Cookie信息中含有httpOnly字段时，开发者是不能通过JavaScript来操纵该条Cookie字符串的。

这样做的好处主要在于面对XSS（Cross-site scripting）攻击时，黑客无法拿到设置httpOnly字段的Cookie信息。

此时，你会发现localStorage相比较Cookie，在XSS攻击的防御上就略逊一筹了。 sameSite

在介绍这个新属性之前，首先你需要明白：当用户从http://a.com发起http://b.com的请求也会携带上Cookie，而从http://a.com携带过来的Cookie称为第三方Cookie。

虽然第三方Cookie有一些好处，但是给CSRF（Cross-site request forgrey）攻击的机会。

为了从根源上解决CSRF攻击，sameSite属性便闪亮登场了，它的取值有以下几种：

• strict：浏览器在任何跨域请求中都不会携带Cookie，这样可以有效的防御CSRF攻击，但是对于有多个子域名的网站采用主域名存储用户登录信息的场景，每个子域名都需要用户重新登录，造成用户体验非常的差。

• lax：相比较strict，它允许从三方网站跳转过来的时候使用Cookie。

 

为了方便大家理解sameSite的实际效果，可以看这个例子：

// a.com 服务端会在访问页面时返回如下Cookie

  cookies.set('foo', 'aaaaa')
  cookies.set('bar', 'bbbbb')
  cookies.set('name', 'cccccc')

  // b.com 服务端会在访问页面时返回如下Cookie
  cookies.set('foo', 'a', { sameSite: 'strict' })
  cookies.set('bar', 'b', { sameSite: 'lax' })
  cookies.set('baz', 'c')

如何现在用户在a.com中点击链接跳转到b.com，它的请求头是这样的：

  Request Headers
  Cookie: bar=b; baz=

五、网站性能优化

Cookie在服务端和浏览器的通信中，主要依靠HTTP的响应头和请求头传输的，所以Cookie会占据一定的带宽。

前面提到浏览器会为每一次HTPP请求自动携带上Cookie信息，但是对于同站内的静态资源，服务器并不需要处理其携带的Cookie，这无形中便浪费了带宽。

在最佳实践中，一般都会将静态资源部署到独立的域名上，从而可以避免无效Cookie的影响。

原文出处