[JavaScript] 자바스크립트 쿠키 생성, 삭제, 확인(+CORS 오류 해결법)

웹개발을 하다 보면 쿠키값을 만져야 하는 경우들이 생기는데요. HTTP 쿠키란 웹 서버에 의해 사용자의 컴퓨터에 저장되는 데이터를 일컫습니다. 이 쿠키를 사용하면 사용자를 특정할 수 있고, 사용자의 행동을 트래킹 할 수도 있고, 서버에 저장되어야 할 정보들을 분산하여 저장하여 과부하도 줄여주는 등 다양한 장점이 있는데요. 이번 포스팅에서는 이 쿠키값을 제어하는 방법과, 사용 시 주의사항에 대해 알아보도록 하겠습니다.

 

---

 

 자바스크립트 쿠키 사용법 

쿠키를 제어하는 방법 자체는 크게 어렵지 않지만 가끔 개발하다보면 보안상의 이유로 쿠키가 제대로 동작하지 않는 경우들이 있습니다. 그래서 웹 정책들을 잘 알아야 하는데요. 아래 주의사항을 한 번씩 읽어보고 개발을 진행해 주시기 바랍니다.

 

쿠키 사용시 주의사항

• HTTPS 사용: 쿠키는 HTTPS 환경에서만 제대로 제어할 수 있습니다. HTTP 환경에서는 쿠키가 제대로 동작하지 않는 경우들이 있고, 보안에도 취약하므로 HTTPS 사용을 권장합니다.
• HttpOnly 속성: XSS(교차 사이트 스크립팅) 공격을 방지하기 위해 HttpOnly 속성을 사용하면 자바스크립트에서 쿠키에 접근할 수 없게 할 수 있습니다.
• 타 도메인 쿠키 설정 불가: 타 도메인들의 CSRF(교차 사이트 요청 위조) 공격을 방지하기 위해 SameSite 속성을 설정되어 있기 때문에 타 도메인의 쿠키는 설정이 불가능하고, 같은 도메인의 쿠키만 설정할 수 있습니다.
• 쿠키 크기: 쿠키는 최대 4KB의 크기를 가지고, 도메인당 최대 20개의 쿠키를 설정할 수 있습니다. 이 이상의 데이터들은 쿠키가 아닌 서버에서 가지고 있는 것이 좋습니다.
• 민감정보는 쿠키로 저장하지 말 것 : 쿠키는 보안이 취약하기 때문에 주민번호, 비밀번호, 카드번호 같은 민감한 정보는 쿠키에 저장하면 안 됩니다.
• 도메인 및 경로 설정: 쿠키가 불필요하게 여러 하위 도메인에서 전송되지 않도록 정확한 도메인과 경로를 설정해야 합니다.
• 만료 시간 설정: 세션 쿠키 외의 쿠키는 만료 시간을 설정해야 합니다. 너무 길게 설정하면 보안 위험이 증가할 수 있습니다.
• 쿠키 정책 준수: 사용자가 쿠키 사용에 대해 동의하도록 하고, 쿠키 정책을 명확히 명시해야 합니다. GDPR 등의 규제를 준수하여 쿠키를 사용해야 합니다.

 

쿠키 등록하기

document.cookie = "name=value; expires=UTCString; path=path; domain=domain; secure; samesite=samesite";

자바스크립트에서 쿠키를 생성하려면 document.cookie를 사용하시면 됩니다. 쿠키에는 여러 가지 속성값들이 있는데요. 등록 시 속성값들을 지정할 수 있습니다. 기본적인 쿠키 속성들의 형식은 위의 예제를 참고하시면 됩니다. 참고로 이걸 다 작성할 필요는 없고, 생략이 가능합니다.

 

• name=value: 쿠키의 이름과 값입니다. name은 쿠키의 이름이고 value는 쿠키에 저장할 값입니다. 위의 예제처럼 하면 name이라는 쿠키에 value라는 값이 입력되겠군요.
• expires=UTCString: 쿠키의 만료 날짜를 설정합니다. 이 값이 설정되지 않으면 쿠키는 세션 쿠키가 되어 브라우저가 닫힐 때 삭제됩니다.
• path=path: 쿠키가 유효한 경로를 설정합니다. 기본값은 현재 문서의 경로입니다.
• domain=domain: 쿠키가 유효한 도메인을 설정합니다. 기본값은 현재 도메인입니다.
• secure: 이 속성이 설정되면 쿠키는 HTTPS 연결을 통해서만 전송됩니다.
• samesite=samesite: 쿠키의 SameSite 속성을 설정하여 크로스 사이트 요청 시 쿠키가 전송되는 방식을 지정합니다. 가능한 값은 Strict, Lax, None입니다.

 

쿠키 확인하기

 

쿠키를 등록하셨으면 확인을 하셔야겠죠? 쿠키를 확인하는 방법은 크롬 웹 개발자 도구[F12]를 여신 뒤 -> 상단의 Application탭을 열고, 좌측의 Cookies를 클릭하시면 됩니다. 그러면 도메인별로 등록되어 있는 쿠키들을 확인할 수 있습니다.

 

쿠키 삭제하기(만료하기)

자바스크립트에서 쿠키를 삭제하려면 쿠키의 이름과 동일한 이름으로 만료 날짜를 과거로 설정하는 코드를 작성하면 됩니다.

 

단일 쿠키 만료하기

document.cookie = "username=ex; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

쿠키의 이름과 동일한 이름으로, 만료 날짜를 과거로 설정하시면 쿠키를 삭제할 수 있습니다. 위와 같이 하시면 ex라는 쿠키가 삭제되겠네요.

 

특정 도메인 쿠키 만료하기

document.cookie = "username=ex; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=example.com";

 

도메인 및 경로가 지정된 쿠키를 삭제하려면 동일한 도메인과 경로를 설정해야 합니다. 위와 같이 하시면 example.com 도메인의 ex라는 쿠키가 삭제되겠네요.

 

 쿠키의 CORS 에러 해결 방법 

막상 쿠키를 사용하시다 보면 CORS(Cross Oragin Resource) 에러를 마주치게 되는 순간이 있을 수 있는데요. 대부분 도메인이 다른 경우에 이 에러가 발생하게 됩니다. 즉 A도메인을 가진 페이지에서 B도메인을 가진 페이지에 쿠키를 제어하려고 하면 에러가 발생하게 되는 것이죠.

 

이 경우 먼저 도메인을 맞춰주는 작업을 선행적으로 진행하셔야 합니다. 쿠키가 등록되어야 하는 도메인을 가진 창을 하나 연 뒤, 그곳에서 쿠키를 등록해 주시는 작업을 하면 이 에러를 피해 가실 수 있습니다.