쿠키 (Cookie)

지은·2022년 11월 10일

Set-Cookie cookie

네트워크

목록 보기

9/17

: 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단

서버 → 클라이언트로 쿠키를 전송하고, 클라이언트 → 서버로 쿠키를 다시 전송하는 것을 포함한다.

쿠키에 저장하는 데이터

쿠키는 삭제하지 않으면 사라지지 않기 때문에, 장기간 보존해야 하는 정보를 저장하기에 적합하다.

장바구니 정보
로그인 상태 유지
테마
로그인/로그아웃을 위한 인증 정보
마케팅을 위한 정보 등...

쿠키 옵션

서버는 클라이언트에 특정한 데이터를 저장하고, 이 데이터를 다시 불러와 사용할 수 있다.
하지만 데이터를 저장하고 아무때나 불러올 수 있는게 아니라, 데이터를 저장한 후 특정 조건들이 만족되어야 다시 불러올 수 있다.

이러한 특정 조건들은 쿠키 옵션으로 표현할 수 있다.

'Set-Cookie':[
			  'cookie=yummy', 
              'Secure=Secure; Secure',
              'HttpOnly=HttpOnly; HttpOnly',
              'Path=Path; Path=/cookie',
              'Doamin=Domain; Domain=velog.io/@wlwl99'
]

Set-Cookie MDN

1. `Domain`

: 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치하는 경우 쿠키를 전송한다.

이때, 쿠키 옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않는다.
만약 요청해야할 URL이 http://www.localhost.com:3000/users/login이라면, 여기서 도메인은 localhost.com이다.

도메인 : 웹 브라우저를 통해 특정 사이트에 진입을 할 때, IP 주소를 대신하여 사용하는 주소 (ex. google.com)

서브 도메인 : 도메인 앞에 추가로 작성되는 부분 (ex. www)

2. `Path`

: 클라이언트에서는 쿠키의 세부 경로와 서버의 세부 경로가 일치하는 경우 쿠키를 전송한다.

만약 요청해야할 URL이 http://www.localhost.com:3000/users/login이라면, 여기서 Path는 /users/login이다.
Path를 명시하지 않으면 기본적으로 /로 설정되어 있다.

설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있다.
ex. Path가 /users로 설정되어 있을 때, 요청하는 Path가 users/login인 경우에도 쿠키를 전송할 수 있다.

Path : 세부 경로, 서버가 라우팅할 때 사용하는 경로

3. `MaxAge / Expires`

보안을 위해 쿠키의 유효 기간을 설정할 수 있다.

MaxAge : 쿠키가 유효한 시간을 초 단위로 설정할 수 있다. (~초 동안 유효)
Expires : 쿠키가 언제까지 유효한지 날짜를 지정할 수 있다. (~까지 유효)

이때 옵션의 값은 클라이언트의 시간을 기준으로 하며, 지정된 시간, 날짜를 초과하면 쿠키는 자동으로 소멸한다.
이 옵션의 여부에 따라 쿠키는 세션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나눠진다.

세션 쿠키(Session Cookie)

: 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키로 MaxAge, Expires 옵션이 없다. 브라우저를 종료하면 해당 쿠키는 삭제된다.

영속성 쿠키(Persistent Cookie)

: 브라우저 종료 여부와 상관없이 MaxAge, Expires에서 지정한 유효 시간만큼 사용 가능한 쿠키

4. `Secure`

: 사용하는 프로토콜에 따라 쿠키 전송 여부를 결정할 수 있다.

true : HTTPS 프로토콜를 이용하는 경우에만 쿠키를 전송할 수 있다.
false : HTTP 프로토콜에서도 쿠키를 전송할 수 있다.

5. `HttpOnly`

: 스크립트에서 브라우저의 쿠키 접근 여부를 결정할 수 있다.

true : 클라이언트에서 DOM을 이용해 쿠키에 접근하는 것을 막아준다.
false : JavaScript에서 document.cookie를 이용해 쿠키 접근이 가능하므로 XSS 공격에 취약하다.
명시되지 않는 경우 기본적으로 false로 설정되어 있다.

6. `SameSite`

: CORS 요청(Cross-Origin)을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정할 수 있다.

옵션에 따른 서버의 쿠키 전송 여부

Lax : Cross-Origin 요청인 경우, GET 메소드 요청에 대해서만 쿠키 전송 가능
Strict : Cross-Origin 요청인 경우, 쿠키 전송 불가
None : 모든 메소드 요청에 대해 쿠키 전송 가능
(SameSite='none' 옵션을 사용하려면 Secure 쿠키 옵션이 필요하다.)

쿠키 전달 방법

서버에서 이러한 옵션들을 지정한 다음,

서버 → 클라이언트로 쿠키를 처음 전송하게 되면, 헤더에 Set-Cookie라는 프로퍼티에 쿠키를 담아 전송한다.
이후 클라이언트 → 서버에 쿠키를 전송해야 하면, 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 전송한다.

쿠키를 이용한 상태 유지

이렇게 쿠키를 이용하여 서버는 클라이언트에게 인증 정보를 담은 쿠키를 전송하고,
클라이언트는 서버에게 전달 받은 쿠키를 요청과 함께 전송하여, 무상태(Stateless)의 인터넷 연결을 Stateful하게 유지할 수 있다.

쿠키 이용 시 주의할 점

MaxAge나 Expires 옵션을 설정하지 않은 쿠키(세션 쿠키)는 클라이언트(브라우저)가 종료되어 세션이 종료될 때까지 유지되는데, HttpOnly 옵션을 사용하지 않았다면 JavaScript를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.

쿠키로 로그인 상태 유지하기

클라이언트

Login.js

// client/src/pages/Login.js

import React, { useState } from 'react';
import axios from 'axios';

export default function Login({ setUserInfo, setIsLogin }) {
const [loginInfo, setLoginInfo] = useState({
		userId: '',
		password: '',
	});
	const [checkedKeepLogin, setCheckedKeepLogin] = useState(false);
	const [errorMessage, setErrorMessage] = useState('');
	const handleInputValue = (key) => (e) => {
		setLoginInfo({ ...loginInfo, [key]: e.target.value });
	};
	const loginRequestHandler = () => {
		if (!loginInfo.userId || !loginInfo.password) {
			setErrorMessage('아이디와 비밀번호를 입력하세요');
			// 입력되지 않은 값이 있는거니까 요청을 보내볼 필요도 없이 바로 리턴해준다.
			return;
		}
       // else {
       //  	setErrorMessage('');
       // }

		return axios
			.post('https://localhost:4000/login', { loginInfo, checkedKeepLogin })
			.then((res) => {
          		console.log(res.data); // userinfo에서 응답해준 데이터
				setUserInfo(res.data);
				setIsLogin(true);
				setErrorMessage('');
			})
			.catch((err) => {
				if (err.response.status === 401) {
					setErrorMessage('로그인에 실패했습니다.');
				}
			});
      	};

App.js

// client/src/App.js

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login';
import Mypage from './pages/Mypage';
import { useEffect, useState } from 'react';
import axios from 'axios';

// 모든 요청에 withCredentials를 true로 설정한다.
axios.defaults.withCredentials = true;

function App() {
	const [isLogin, setIsLogin] = useState(false);
	const [userInfo, setUserInfo] = useState(null);

	const authHandler = () => {
		axios
			.get('https://localhost:4000/userinfo')
			.then((res) => {
				setIsLogin(true);
				setUserInfo(res.data);
			})
			.catch((err) => {
				if (err.response.status === 401) {
					console.log(err.response.data);
				}
			});
	};
	
  	// 페이지가 렌더링될 때마다 최초 1번씩 authHandler를 실행시키는 useEffect
	// 새로고침 했을 때 클라이언트에 쿠키가 있다면, 서버로 요청을 보낼 때 쿠키도 자동으로 보낸다.
	useEffect(() => {
		authHandler();
	}, []);

서버

// server/controllers/users/login.js

const { USER_DATA } = require('../../db/data');

module.exports = (req, res) => {
	const { userId, password } = req.body.loginInfo;
	const { checkedKeepLogin } = req.body;
	const userInfo = {
		...USER_DATA.filter((user) => user.userId === userId && user.password === password)[0],
	}; // DB에서 매칭되는 아이디와 비밀번호를 찾아 userInfo 배열에 넣는다.
	
	const cookieOptions = {
		domain: 'localhost',
		path: '/',
		sameSite: 'none', // sameSite : 'none' 옵션을 사용한다면, secure: true 옵션을 사용해야 한다.
		secure: true,
		expires: new Date(Date.now() + 24 * 3600 * 1000 * 7), // 7일 후 소멸되는 Persistent Cookie
		httpOnly: true,
	};
  
	if (userInfo.id === undefined) { // userInfo가 빈 배열일 경우, 401 Not Authorized로 응답한다.
		res.status(401).send('Not Authorized');
      
	} else if (checkedKeepLogin) {
		res.cookie('cookieId', userInfo.id, cookieOptions); // cookieId라는 쿠키에 userInfo.id 값을 담아 전송한다.
		res.redirect('/userInfo'); // userInfo 페이지로 리다이렉트해준다.
      
	} else {
      	delete cookieOptions.expires;
		res.cookie('cookieId', userInfo.id, cookieOptions);
		res.redirect('/userInfo');
	}

/userinfo

// server/controllers/users/userinfo.js

const { USER_DATA } = require('../../db/data');

module.exports = (req, res) => {
	// console.log(req.cookies);

	const cookieId = req.cookies.cookieId; // 요청에 있는 쿠키에서 cookieId 추출
	const userInfo = {
		...USER_DATA.filter((user) => user.id === cookieId)[0],
	}; // DB에서 같은 id를 가진 user를 찾는다.

	if (!cookieId || !userInfo.id) {
		// 쿠키가 없거나, userInfo가 비어있다면 401 Not Authorized로 응답한다.
		res.status(401).send('Not Authorized');
	} else {
		delete userInfo.password; // 응답에서 비밀번호는 제외하고 보낸다.
		res.send(userInfo);
	}
};

쿠키 삭제하여 로그아웃하기

클라이언트

Mypage.js

// client/pages.Mypage.js

import axios from 'axios';
import React from 'react';

export default function Mypage({ userInfo, setIsLogin, setUserInfo }) {
	const logoutHandler = () => {
		return axios
			.post('https://localhost:4000/logout')
			.then((res) => {
				setUserInfo(null);
				setIsLogin(false);
			})
			.catch((err) => {
				console.log(err.response.data);
			});

	};

서버

/logout

// server/controllers/users/logout.js

module.exports = (req, res) => {
	const cookieOptions = {
		domain: 'localhost',
		path: '/',
		sameSite: 'none',
		secure: true,
		expires: new Date(Date.now() + 24 * 3600 * 1000 * 7),
		httpOnly: true,
	};

	// 쿠키를 삭제할 때는 res.clearCookie 메소드를 사용한다.
	// clearCookie(쿠키 이름, 쿠키 옵션)
	res.status(205).clearCookie('cookieId', cookieOptions).send('logout');
};

지은

블로그 이전 -> https://janechun.tistory.com

이전 포스트

HTTP의 특징

다음 포스트

세션 (Session)

1개의 댓글

띵구르르

2023년 10월 26일

감사합니다! 도움되었습니다!

답글 달기

쿠키 (Cookie)

네트워크

🍪 쿠키 (Cookie)

쿠키에 저장하는 데이터

쿠키 옵션

1. Domain

2. Path

3. MaxAge / Expires

세션 쿠키(Session Cookie)

영속성 쿠키(Persistent Cookie)

4. Secure

5. HttpOnly

6. SameSite

옵션에 따른 서버의 쿠키 전송 여부

쿠키 전달 방법

쿠키를 이용한 상태 유지

쿠키 이용 시 주의할 점

쿠키로 로그인 상태 유지하기

클라이언트

Login.js

App.js

서버

/login

/userinfo

쿠키 삭제하여 로그아웃하기

클라이언트

Mypage.js

서버

/logout

HTTP의 특징

세션 (Session)

1개의 댓글

1. `Domain`

2. `Path`

3. `MaxAge / Expires`

4. `Secure`

5. `HttpOnly`

6. `SameSite`