2020/12/10 - TIL (Express Cookie 생성)

 

 

 

쿠키(Cookie)란?

쿠키란 하이퍼 텍스트의 기록서의 일종으로 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말합니다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 변경됩니다.

 

 

 

---

 

쿠키 옵션

• Name : 쿠키의 이름
• Value : 쿠키의 내용
• Domain : 쿠키가 전송되게 될 호스트들을 명시하며, 명시가 되지 않았다면 현재 문서
  위치의 호스트를 default로 가진다(ex : www.google.com)
• Path : 쿠키 헤더를 전송하기 위해서 요청되는 url
• Expires / Max-Age : 쿠키의 만료시간
• Size : 쿠키의 크기
• HttpOnly : 자바스크립트의 document.cookie를 이용해서 쿠키에 접속하는 것을 막음
• Secure : 웹 브라우저와 서버가 https 프로토콜로 통신하는 경우에만 쿠키 사용을 허용함
• SameSite : CSRF(Cross Site Request Forgery)공격을 막기 위해 사용함

 

---

 

Express에서 Cookie 사용하기

 

npm install cookie-parser

request와 response에서 cookie를 다루기 위해서 cookie-parser모듈을 설치합니다.

 

 

const cookieParser = require('cookie-parser');

app.use(cookieParser());

Express App에 cookieParser를 등록합니다.

 

 

 

쿠키 생성

 

app.get('/login', function(req,res) {
    res.cookie(KEY, VALUE, {options});
    res.send('set-cookie');
});

key 와 value 부분에 원하는 데이터를 작성하고 options는 위의 쿠키 옵션에 맞추어 작성합니다.

 

 

쿠키 조회

app.get('/state', function(req,res) {
    res.send('cookie : ' + req.cookies.key);
});

req.cookies 객체를 통해서 지정한 쿠키의 key값으로 접근할 수 있습니다.

 

 

쿠키 제거

app.get('/logout', function(req,res) {
    res.clearCookie(key);
});

제거할 쿠키의 key값을 clearCookie의 인자로 전달하면 제거됩니다.

 

---

 

서로 다른 도메인 간 쿠키 주고받기

 

백엔드와 프런트엔드의 도메인 주소가 서로 다른 경우에는 서로 쿠키가 전송되지 않으므로 요청/응답 헤더를 적절하게 설정을 해주어야 합니다.

 

 

fetch

fetch(loginUrl, {
  method: 'POST',
  credentials: 'include', // <-- credentials 옵션 추가
  body: JSON.stringify({
    userId: 'id'
    password:'1234',
  }),
  headers: {
    'Content-Type': 'application/json',
  },
})

 

cors

app.use(
  cors({
    origin: 'https://localhost:3000',
	methods: 'GET,POST,OPTION',
	credentials: true, // credentials true 설정
	optionsSuccessStatus: 204,
  })
);