팀 프로젝트를 진행하였던, 쿠키 값을 통해 자동 로그인을 구현하는 방법에 대해서 간단한 예제를 통해 정리하고자 한다.
1. Cookie란?
✅ 웹 서버가 생성하여 웹 브라우저로 전송하는 작은 정보 파일이다.
웹 브라우저는 수신한 쿠키를 미리 정해진 기간 동안 또는 웹 사이트의 사용자 세션 기간 동안 저장한다.
웹 브라우저는 향후 사용자가 웹 서버에 요청을 보낼 때, 관련 쿠키를 첨부하여 보낸다.
2. Cookie 확인 방법
✅ 개발자 도구를 킨다.(F12) → 애플리케이션 → 쿠키 → 주소를 누르면 된다.
3. 간단한 예제를 통한 학습
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Practice</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<form id="login__form">
<input id="id" type="text" placeholder="id" required />
<input id="pw" type="password" placeholder="pw" required />
<button>Login</button>
</form>
</body>
<script type="module" src="./login.js"></script>
</html>로그인 폼을 간단하게 만든 후, login을 처리해주는 js 파일을 넣어주었다.
login.js
import { madeCookie, checkedCookie } from "./cookie.js";
const loginBtn = document.querySelector("#login__form > button");
const VALID_ID = "kyg";
const VALID_PW = "123";
// 로그아웃 버튼 클릭 시, 쿠키 삭제 후 새로고침하는 함수
const handleLogoutBtnClick = () => {
removeCookie();
window.location.reload();
}
// 로그인 성공 시 환영 메시지와 로그아웃 버튼을 생성해 보여주고 로그인 폼을 숨기는 함수
const loginSuccess = () => {
const body = document.querySelector("body");
const h1 = document.createElement("h1");
h1.innerText = `${VALID_ID}님 로그인 하셨습니다.`;
const logoutBtn = document.createElement("button");
logoutBtn.id = "logout";
logoutBtn.innerText = "logout"
logoutBtn.addEventListener("click", handleLogoutBtnClick);
body.appendChild(h1);
body.appendChild(logoutBtn);
loginBtn.parentElement.classList.add("hidden");
};
// 로그인 버튼 클릭 시 입력한 ID와 PW가 유효하면 로그인 처리하고 쿠키를 저장하는 함수
const handleLoginClick = (event) => {
event.preventDefault();
const form = event.target.parentElement;
const id = form.querySelector("#id").value;
const pw = form.querySelector("#pw").value;
if (id === VALID_ID && pw === VALID_PW) {
loginSuccess();
madeCookie(id);
}
};
const userInfo = checkedCookie();
if (userInfo["isLogin"]) {
loginSuccess();
}
loginBtn.addEventListener("click", handleLoginClick);간단한 구현을 위해 ID와 PW 값을 위 코드에서 처럼 고정하였다.
매 새로고침이 일어날 때마다 if(userInfo["isLogin"]) { loginSucceess(); } 을 통해 쿠키값이 있는지 확인한다.
로그아웃 버튼이 눌리면, 쿠키 삭제와 함께 페이지가 새로고침된다.
cooki.js
export function madeCookie(id) {
document.cookie = `userId=${id}; path=/`;
}
export function checkedCookie() {
const cookieID = document.cookie.split('=')[1];
if (cookieID) {
const myInfo = {
'ID' : cookieID,
'isLogin' : true
}
return myInfo;
}
else{
const myInfo = {
'ID' : '',
'isLogin' : false
}
return myInfo;
}
}
export function removeCookie(){
document.cookie = "userId=; path=/";
}쿠키 생성, 확인, 삭제에 대한 기능을 함수로 분할하였다.
document.cookie를 통해 쿠기 정보를 가져오고, 원하는 값을 파싱(parsing)할 수 있다.
⚠️ 주의 사항
- 쿠키는 도메인 단위로 저장된다. (특정 웹사이트(도메인)에서만 접근할 수 있게 저장된다.)
- 보안이 필요한 정보(예: 비밀번호, 민감한 데이터)는 쿠키에 저장하지 않는 게 안전하다.
보안 문제
1. 쿠키는 브라우저에서 쉽게 조작 가능하다. -> 사용자가 콘솔에서 쿠키 값을 조작하면 로그인된 것처럼 속일 수 있다.
2. 쿠키에 민감한 정보가 평문으로 저장됨 "userId=kyg"처럼 암호화 없이 저장된다.
3. 쿠키에 Secure / HttpOnly 설정이 없다.
- Secure: HTTPS 연결에서만 쿠키를 전송.
- HttpOnly: 자바스크립트에서 쿠키에 접근 불가. (XSS 공격 방지)
- 현재 쿠키는 이 둘이 없기 때문에 **XSS나 중간자 공격(Man-in-the-Middle)**에 취약함.
4. 세션 만료 시간이 없다.
- 로그인 후 쿠키는 만료 시간이 없어 브라우저를 닫거나 로그아웃하지 않으면 계속 로그인 상태임.
- 특히 공용 PC에서 위험함.
🔒 다음 프로젝트 시 보안적으로 고려해보자
1. 쿠키에 인증 정보 저장 금지 → 토큰 방식 사용 권장
- 실제 서비스에서는 서버에서 세션 ID나 JWT 같은 토큰을 만들어서 저장해야 함.
2. 쿠키 설정 강화
document.cookie = `userId=${id}; path=/; Secure; SameSite=Strict`;- SameSite=Strict: 다른 사이트에서의 요청엔 쿠키 안 보냄 (CSRF 방지)
- 실서비스에서는 HttpOnly도 설정해야 하지만 자바스크립트에서 접근 못하므로 테스트에는 불편함
3. 쿠키 만료 시간 설정
document.cookie = `userId=${id}; path=/; max-age=3600`; // 1시간(1분 = 60)- id나 pw 값을 innerText 등에 넣기 전에 반드시 sanitize 필요.
(sanitize : 입력값에서 위험한 코드나 문자를 제거하거나 무해하게 바꾸는 것을 의미한다.)
4. 결과
새로 고침하여도 자동 로그인이 된다.
'웹 기초' 카테고리의 다른 글
| [Visual Studio Code Extensions] Live Server란? (0) | 2025.04.10 |
|---|---|
| [Vanila JavaScript] 파티클 만들기 (0) | 2025.04.09 |
| [FireBase] FireBase CORS 오류 및 해결 방법 (0) | 2025.04.08 |
| [내일 배움 캠프, 웹 기초] html, <script> 태그의 위치 (0) | 2025.03.31 |
| [내일 배움 캠프, 웹 기초] URL이란? (0) | 2025.03.31 |
