728x90
반응형
프로젝트를 진행 하다보면 쿠키를 사용해야 하는 상황을 마주하게 되는데 마냥 간단하게 사용하기엔 여러 제약이 걸려있습니다.
개인이 프로젝트를 진행하는 보편적 환경인
로컬에서 백엔드와 프론트엔드가 분리된 환경에서
백엔드에서 생성한 쿠키를 프론트엔드 클라이언트 사이드에서 사용
하는 경우를 가정합니다.
(Spring Boot 3와 Nuxt 3를 예시로 하고 있습니다.)
쿠키란
- 클라이언트의 브라우저에 저장되는 작은 데이터이다.
- HTTP 요청 시 브라우저는 자동으로 쿠키를 포함하여 서버에 전송할 수 있다.
- 주로 사용자 인증, 세션 관리, 사용자 맞춤 설정 등에 활용된다.
- 키=값; 옵션들 형식으로 구성되어 있다.
고려사항
- HTTP 환경에서 사용
- 클라이언트 사이드에서 사용
- 백엔드와 프론트엔드가 분리된 Cross-site 환경
접근방법
- 쿠키 전송 허용 => credentials : true 또는 include (백엔드, 프론트엔드 모두)
- HTTP환경 => secure : false
- 클라이언트 사이드 사용(JavaScript 접근) => httpOnly : false
- Cross-site => sameSite: 'Lax' 또는 'None'
예시코드
// Spring Boot 3
response.addHeader(HttpHeaders.SET_COOKIE, ResponseCookie
.from("cookieKey", "cookieValue")
.httpOnly(false) // JavaScript에서 접근 허용
.sameSite("Lax") // same-site 설정
.domain("loc.custom-front-end.com") // 프론트엔드 도메인으로 설정
.secure(false) // HTTP 요청 허용(로컬 개발 환경)
.path("/") // 모든 경로에서 유효
.build().toString());추가 고려사항
CORS 설정을 추가해 Cross-Origin 요청 및 Credential 을 허용한 상태여야 합니다. ex)
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 모든 엔드포인트에 대해 적용
.allowedOrigins("https://loc.custom-front-end.com") // Nuxt 앱 URL
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true); // 쿠키 전송 허용
}
}옵션별 상세설명
domain
- 쿠키를 사용할 도메인을 결정
- .custom-front-end.com으로 설정하면 loc.custom-front-end.com 과 하위 도메인간 쿠키가 공유됨
path
- 쿠키를 사용할 하위 경로 설정
httpOnly
- true(default) : JavaScript에서 접근 불가(서버사이드에서만 사용 가능)
- false : JavaScript에서 접근 가능(클라이언트사이드에서 사용 가능)
secure
- true(default) : HTTPS 요청만 허용
- false : HTTP 요청 허용
sameSite
- Strict : Same-Site 요청에만 쿠키 전송(Cross-site 요청 제한)
- Lax(default) : 일반적인 Same-Site 요청 허용(Cross-site요청도 Get방식은 허용)
- None : Cross-site 요청 허용(이 경우 secure=true 필요)
주의사항
- 민감한 데이터를 저장하지 않도록 주의
- HTTPS를 사용하여 전송 데이터 암호화
- httpOnly, secure, sameSite 옵션을 설정해서 Cross-site 공격 방지
- 쿠키 크기 4KB 제한
이상으로 클라이언트 사이드에서 쿠키 활용을 할 수 있는 쿠키 설정에 대해 알아봤습니다. 모든 보안 요소를 허용하는 만큼 XSS 공격으로부터 취약해 지는 등 실제 서비스에는 무리가 있을 수 있습니다. 실제 서비스는 Https를 이용해 통신을 하거나 보안이 필요한 사항이라면 서버사이드에서만 활용하는 등의 방법으로 해결할 수 있을 것입니다.
728x90
반응형