밝혀진 쿠키 저장의 미스터리: 브라우저와 서버 간의 상호 작용에 대한 자세한 설명

인터넷의 발달과 함께 우리는 웹 검색, 쇼핑, 로그인 및 기타 작업에 브라우저를 점점 더 많이 사용하고 있습니다. 이러한 과정에서 우리는 쿠키라는 단어를 자주 듣게 됩니다. 그렇다면 쿠키란 정확히 무엇일까요? 그 기능은 무엇입니까? 오늘은 쿠키 저장의 미스터리를 밝히고, 브라우저와 서버 간의 상호 작용을 자세히 분석하고, 구체적인 코드 예제를 제공하겠습니다.

1. 쿠키란 무엇인가요?

간단히 말하면 쿠키는 서버에서 브라우저로 전송되어 로컬에 저장되는 작은 데이터 조각입니다. 브라우저가 동일한 서버에 요청할 때마다 이전에 저장된 쿠키 데이터를 가져옵니다. 이 경우 서버는 브라우저에서 쿠키 데이터를 읽고 그 정보를 기반으로 해당 작업을 수행할 수 있습니다.

2. 쿠키의 역할

1. 세션 상태 관리

서버는 쿠키를 통해 이용자가 웹사이트를 다시 방문할 때 이용자를 식별하고 이용자의 세션 상태를 유지할 수 있습니다. 예를 들어, 우리가 로그인할 때 서버는 우리의 로그인 정보가 포함된 쿠키를 브라우저에 전송하여 우리가 웹사이트를 다시 방문할 때 서버가 지난 번과 마찬가지로 우리를 인식하고 자동으로 로그인할 수 있도록 합니다.

2. 맞춤 설정

서버는 쿠키를 통해 사용자의 개인 습관과 선호도, 기타 정보 중 일부를 수집하여 사용자에게 더욱 개인화된 서비스와 제안을 제공할 수 있습니다. 예를 들어, 우리가 쇼핑 웹사이트를 탐색할 때 서버는 이전 구매 기록과 탐색 기록을 기반으로 관련 상품을 추천합니다.

3. 추적 및 분석

서버는 쿠키를 통해 사용자의 검색 습관을 추적하여 관련 분석 및 통계를 수행할 수 있습니다. 예를 들어, 광고회사는 쿠키를 이용하여 이용자의 각종 웹사이트 방문 시간, 빈도 등의 정보를 추적함으로써 이용자의 관심분야와 구매욕구를 파악하고 광고주에게 더 ​​나은 광고 판촉 서비스를 제공할 수 있습니다.

3. 브라우저와 서버 간의 상호 작용

쿠키의 저장 및 획득은 브라우저와 서버 간에 수행됩니다. 전체 상호 작용 프로세스는 다음 네 단계로 나눌 수 있습니다.

1. 브라우저가 요청을 보냅니다. 서버에 요청이 진행 중입니다. 쿠키 정보가 포함되어 있지 않습니다.
2. 서버는 요청을 받은 후 쿠키 데이터를 생성하여 브라우저로 보냅니다.
3. 브라우저는 쿠키 데이터를 수신한 후 이를 로컬에 저장합니다.
4. 브라우저는 이전에 저장된 쿠키 데이터를 요청에 포함하여 동일한 서버에 다시 요청을 보냅니다.

이 프로세스를 더 잘 이해하기 위해 구체적인 예를 살펴보겠습니다.

(1) 서버 코드 예시

다음은 쿠키 정보가 포함된 응답을 브라우저에 보내기 위해 Node.js 프레임워크를 사용하여 작성된 서버 코드입니다.

const http = require('http');

http.createServer((req, res) => {
  //设置cookie
  res.writeHead(200, {
    'Set-Cookie': 'name=cookie_test; max-age=60'
  });

  //发送响应
  res.end('Hello World!
');
}).listen(8080);

console.log('Server running at http://localhost:8080/');

코드 분석:

• 서버 응답 헤더의 Set-Cookie 필드를 사용하여 쿠키 데이터를 브라우저에 보냅니다.
• max-age 매개변수를 통해 쿠키의 유효 기간을 설정하세요. 여기서는 60초로 설정되어 있습니다.

(2) 브라우저 코드 예시

다음은 위 서버에 요청을 보내고 응답을 받으면 쿠키 정보를 출력하기 위해 JavaScript로 작성된 브라우저 코드입니다.

// 发送请求
fetch('http://localhost:8080')
  .then(response => {
    // 读取cookie
    console.log(response.headers.get('Set-Cookie'));
    return response.text();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));

코드 분석:

• 가져오기 기능을 사용하여 서버에 요청을 보냅니다.
• response.headers.get('Set-Cookie') 메소드를 통해 응답 헤더의 쿠키 정보를 읽습니다.
• response.text() 메서드를 사용하여 응답 본문의 텍스트 정보를 가져옵니다.

4. 쿠키의 일반적인 속성

위의 예에 사용된 max-age 속성 외에도 쿠키에는 다른 많은 속성이 있습니다. 공통 속성은 다음과 같습니다.

1. Path

이 속성은 쿠키의 경로를 지정합니다. 브라우저가 요청을 시작하면 요청 경로가 쿠키 경로와 정확히 일치하는 경우에만 쿠키가 가져옵니다.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Path=/test'
});

2. Domain

이 속성은 쿠키의 도메인 이름을 지정합니다. 브라우저가 요청을 시작할 때 요청된 도메인 이름이 쿠키의 도메인 이름과 정확히 일치하는 경우에만 쿠키가 포함됩니다.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Domain=.example.com'
});

3. Expires

이 속성은 쿠키의 유효 기간을 지정합니다. 이 속성이 설정되면 쿠키는 지정된 시간에 자동으로 만료되고 브라우저에 의해 삭제됩니다.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Expires=Wed, 18 Nov 2020 08:51:29 GMT'
});

4. Secure

이 속성은 쿠키가 https 프로토콜을 통해서만 전송될 수 있는지 여부를 지정합니다. 이 속성을 설정하면 https 요청이 이루어질 때만 쿠키가 가져옵니다.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Secure'
});

5. HttpOnly

이 속성은 쿠키가 http 프로토콜을 통해서만 전송될 수 있는지 여부를 지정합니다. 이 속성을 설정하면 브라우저는 JavaScript를 통해 쿠키 정보를 얻을 수 없으므로 쿠키 보안이 향상됩니다.

res.writeHead(200, {
  'Set-Cookie': 'name=value; HttpOnly'
});

5. 요약

본 글의 소개를 통해 쿠키의 정의, 기능, 저장방법, 공통속성에 대해 알아보았습니다. 동시에 브라우저와 서버 간의 쿠키 상호 작용 모델도 학습했으며, 구체적인 코드 예제를 통해 쿠키에 대한 이해를 심화했습니다. 프론트엔드 엔지니어로서 쿠키 관련 지식을 심도 있게 이해하고 숙달해야 실제 개발에 보다 유연하고 효율적으로 적용할 수 있습니다.

위 내용은 밝혀진 쿠키 저장의 미스터리: 브라우저와 서버 간의 상호 작용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!