시작하기전에......
https://tarelbase.tistory.com/24?category=1003239
지난번에 쿠키와 세션에 대해 다룬적이 있다.
그러나 개인적으로 이 부분은 몇 번 더 공부해갈 필요가 있다고 판단되어 다시한번 짚어넘어가보겠다
1. 쿠키는 무엇이고 왜 필요한가??
초창기 인터넷에는 개인화라는 것이 없었다.
개인화란?? 다시말해 사람마다 보는 정보가 다르다는 것을 말한다.
내 통장에 100만원이 있다고 해서 다른사람들도 통장에 100만원이 있지는 않을 것이다.
또한 내 통장은 나만 볼 수 있어야 하고 다른사람들은 보게해선 안 된다.
초창기 인터넷은 이런 기능이 없었던 것이다.
누구나 특정 홈페이지에서 같은 정보를 볼 수 밖에 없었고
이는 마이페이지, 즉 , 나만의 정보에 대한 필요성을 만들었다.
이것이 지금의 쿠키를 낳은 것이다.
쿠키를 통해 지금 접속한 사람이 누구인지 판별하고 그 사람만 접근할 수 있는 정보를 제공할 수 있게 되면서
개인화라는 것을 실현할 수 있게 된 것이다.
2. 쿠키를 구워보자
일단 기본적인 세팅을 위해 간단한 웹코드를 작성하자
const http = require('http');
http.createServer(function(req,res){
res.end('cookie')
}).listen(3000)여기 보면 응답에 cookie라고 적어놨는데, 그냥 웹페이지에서 cookie라는 글자가 출력될 것이다.
한글을 적어도 되긴하는데 글자가 깨진다... 그냥 영어로 적자
위 코드를 실행하고 로컬 호스트 3000번으로 들어간 모습, cookie라는 글자가 출력된다.
const http = require('http');
http.createServer(function(req,res){
res.writeHead(200, {
'Set-Cookie':['smallCookie = choco','cuteCookie = vanilla'] //추가된 부분
})
res.end('cookie')
}).listen(3000)위 코드를 보자, 추가된 부분의 바로 위아래줄이 새로 추가된 부분이다.
res(응답)의 writeHead를 통해 해드를 정의한다. 200은 성공을 나타내는 상태코드(404NotFound같은거)고
바로 아래 Set-Cookie를 통해 쿠키를 발급하고 있다.
여기서 발급된 쿠키가 바로 smallCookie와 cuteCookie다.
즉, 쿠키를 두 개를 구운 것이다.
구워진 쿠키는 개발자 도구에서 Network -> localhost 에서 확인할 수 있다.
쿠키를 없애버릴 수도 있다.
Application에서 localhost를 찾고 쿠키를 선택해 없애면 된다.
3. 구워진 쿠키를 함 봐보자
기껏 쿠키를 구웠는데 이걸 써먹지 못하면 무슨 소용일까?
자, 쿠키를 읽어보자
console.log(req.headers.cookie)이걸 쓰면 터미널에서 쿠키를 확인할 수 있다.
아마 웹페이지를 새로고침하면 뜰 것이다.
npm install -s cookie터미널에 위를 입력해 cookie를 사용하기위한 모듈을 설치해 주고
const cookie = require('cookie');코드 최상단에 위 코드를 추가해 주자
var cookies ={}
cookies = cookie.parse(req.headers.cookie);위 코드는 쿠키 데이터를 객체로 가져오는 역할을 한다.
이게 있으면 쿠키를 가져오기 편해진다.
단, cookie값이 undefined라면 에러가 발생할 수 있으니 조건문을 추가해줘야한다.
const http = require('http');
const cookie = require('cookie');
http.createServer(function(req,res){
var cookies = {};
if(request.headers.cookie !== undefined){
cookies = cookie.parse(req.headers.cookie);
}
console.log(cookies);
console.log(cookies.smallCookie);
res.writeHead(200, {
'Set-Cookie':['smallCookie = choco','cuteCookie = vanilla']
});
res.end('cookie')
}).listen(3000)이쯤되서 재확인하는 완성코드
터미널에는 모든 쿠키의 정보와 smallCookie에 뭘 담고 있는지를 알 수 있을 것이다.
웹페이지를 새로고침 할 때마다 터미널에 쿠키의 값이 나타날 것이다.
4. 쿠키의 종류? 일회용 쿠키와 쿠키의 유통기한?
쿠키는 Session Cookies와 Permanent Cookies로 나뉜다.
Session Cookies는 위에 다룬 내용이니 넘어가고
Permanent Cookies를 다루어 보자
res.writeHead(200, {
'Set-Cookie':['smallCookie = choco','cuteCookie = vanilla',
'permanent=cookies; Max-Age=${60*60*24*30}']
});res.wirteHead부분을 수정했다.
작은 쿠키와 귀여운 쿠키는 무시하고 아래 permanet라는 것이 또 정의되어 있다.
여기에는 세미콜론 뒤에 Max-Age가 온 것을 볼 수 있는데
이는 이 쿠키의 유통기한이라고 할 수 있다.
60은 60초, 60*60은 1시간, 60*60*24는 하루, 60*60*24*30은 한 달로 볼 수 있다
(식만 봐도 얼추 이해가 될 것이다.)
이렇게 쿠키의 유통기한을 설정해주면 다른 쿠키들과 다르게 인터넷을 껐다가 다시 켜도 쿠키가 유통기한동안은 남아있다.
물론 유통기한이 경과하면 사라진다.
여기서Permanent Cookies의 특징이 드러나는데, 보시다시피 브라우저를 없애든 말든 유통기한 동안은 사라지지 않고
계속 남아있는 쿠키를 말한다.
5. 쿠키의 보안
내 쿠키는 나만 써야하므로 아무에게나 줄 수 없다.
res.writeHead부분을 수정해보자
res.writeHead(200, {
'Set-Cookie':['smallCookie = choco','cuteCookie = vanilla',
'permanent=cookies; Max-Age=${60*60*24*30}',
'lovelySecureCookie= starCookie; Secure',
'httpOnlyCookie=cookielove; HttpOnly']
});4번째 줄을 보면 아까 없던 새로운 쿠키를 정의했다.
쿠키의 이름이나 startCookie는 중요한게 아니고 중요한건 세미콜론 다음의 Secure 문자다.
5번째 줄에도 세미콜론 뒤에 HttpOnly가 있다.
이 두가지는 각자의 특징을 통해 쿠키의 보안을 담당하는데 이는 다음과 같다.
Secure의 경우
클라이언트에서 자바스크립트를 통한 쿠키 도둑질을 예방할 수 있다.
상술한 것처럼 그저 짧은 문장하나 넣어주는 것 만으로도 예방할 수 있다.
이것은 브라우저와 서버가 https로 통신하는 경우에만 브라우저가 서버에게 쿠키를 전송한다는 의미를 가지고 있다.
HTTP Only의 경우
브라우저에서 해당 쿠키로 접근할 수 없게 되지만 쿠키에 포함된 정보의 대부분이 브라우저에서 접근할
필요가 없기 때문에 HTTP only 는 기본적으로 적용하는 것이 좋다.
이것은 JS의 document.cookie를 이용해 쿠키에 접근하는 것을 막는 옵션이다.
6. 쿠키의 인증, 경로와 도메인
res.writeHead부분을 수정해보자
res.writeHead(200, {
'Set-Cookie':['smallCookie = choco','cuteCookie = vanilla',
'permanent=cookies; Max-Age=${60*60*24*30}',
'lovelySecureCookie= starCookie; Secure',
'httpOnlyCookie=cookielove; HttpOnly',
'pathCookie = cocoa; Path=/cookie']
});마지막 줄에 페스쿠키가 추가되었다.
세미콜론 뒤에 페스라고 되어 있는 것을 볼 수 있는데
이것은 해당 경로(또는 그 경로의 하위)에서만 작동하게 하는 옵션이다.
즉 저 패스쿠키는
http://localhost:3000/cookie 경로나
http://localhost:3000/cookie/sub와 같은 하위 경로에서만 사용할 수 있다.
비슷한 기능으로 도메인이 있다.
res.writeHead부분을 수정해 보자
res.writeHead(200, {
'Set-Cookie':['smallCookie = choco','cuteCookie = vanilla',
'permanent=cookies; Max-Age=${60*60*24*30}',
'lovelySecureCookie= starCookie; Secure',
'httpOnlyCookie=cookielove; HttpOnly',
'pathCookie = cocoa; Path=/cookie',
'domainCookie = tea; Domain=o2.org']
});최하단에 추가된 쿠키를 보자
아마 눈치빠른 사람들은 눈치 챘겠지만
저건 특정 도메인에서만 작동하도록 하는 것이다.
우선은 여기까지 하고 나머지 부분은 다음편에 업로드
'Framework > Node.js' 카테고리의 다른 글
| Node.js 공부정리 - 자주 사용하는 패키지 정리 (0) | 2022.11.03 |
|---|---|
| Node.js 공부정리 - Socket.io (0) | 2022.10.14 |
| Node.js 공부정리 - Layered Architecture Pattern - 001 (0) | 2022.10.14 |
| Node.js 공부정리 - 미들웨어 (0) | 2022.10.09 |
| Node.js 공부정리 - JWT (1) | 2022.10.08 |
