본문 바로가기
기초 개념

`withCredentials`에 대한 설명

by 시니성 2023. 9. 12.

HTTP 요청에서 withCredentials 속성은 주로 AJAX 요청에서 사용되며, 이는 웹 브라우저의 Same-Origin Policy(같은 출처 정책)를 준수하면서도 쿠키, HTTP 인증, 클라이언트 SSL 인증 같은 자격 증명 정보를 포함한 요청을 보낼 수 있게 합니다. 기본적으로, XMLHttpRequestfetch는 크로스 도메인 요청에서 자격 증명 정보를 포함하지 않지만, withCredentialstrue로 설정하면 포함하게 됩니다.

예를 들어, 도메인 A에서 도메인 B로 AJAX 요청을 보낼 때 도메인 B의 쿠키를 전송하려면 withCredentialstrue로 설정해야 합니다. 이렇게 설정하면 응답에도 Access-Control-Allow-Credentials 헤더가 포함되어야 합니다.

Kotlin Spring JPA 프로젝트에서의 withCredentials 활용

Spring 기반의 웹 애플리케이션에서 withCredentials를 활용하려면 다음과 같은 설정이 필요합니다:

  1. CORS 설정: 클라이언트에서 withCredentialstrue로 설정한 요청을 보낼 때, 서버는 해당 요청을 수락하려면 적절한 CORS 설정이 필요합니다.이렇게 설정하면, http://your-client-domain.com 도메인에서 withCredentialstrue로 설정된 요청을 보낼 때, 서버는 해당 요청을 수락하게 됩니다.
  2. @Configuration
    class WebConfig : WebMvcConfigurer { 
    	override fun addCorsMappings(registry: CorsRegistry) { 
        	registry.addMapping("/api/**")
            	.allowedOrigins("http://your-client-domain.com") // 허용할 클라이언트 도메인 
                	.allowCredentials(true) // 자격 증명을 허용 
                	.allowedMethods("GET", "POST", "PUT", "DELETE"); 
    	} 
     }
  3. Spring에서는 @CrossOrigin 어노테이션 또는 WebMvcConfigurer를 사용하여 CORS를 설정할 수 있습니다.
  4. 인증: withCredentials는 자주 사용되는 사례 중 하나가 사용자 인증입니다. 예를 들어, 클라이언트가 로그인 후 서버에서 발급한 쿠키(예: 세션 ID)를 저장하고, 이후의 모든 요청에 이 쿠키를 포함하려는 경우에 withCredentials를 활용하게 됩니다.

withCredentials와 인증

withCredentials는 크로스 도메인 환경에서 자격 증명 정보(예: 쿠키, HTTP 인증 헤더)와 함께 XMLHttpRequest나 Fetch 요청을 실행할 수 있게 해주는 옵션입니다.

기본적으로 웹 브라우저는 보안 문제로 인해 크로스 도메인 요청 시 쿠키나 HTTP 인증 정보를 포함하지 않습니다. 하지만 어떤 웹 애플리케이션에서는 여러 도메인 간의 자격 증명 정보 공유가 필요한 경우가 있습니다. 예를 들면, 메인 사이트와 API 서버가 다른 도메인에 있는 경우, 사용자가 메인 사이트에서 로그인하면 로그인 상태와 관련된 쿠키(세션 ID 등)가 발급되는데, 이 쿠키를 포함하여 API 서버에 요청을 보낼 필요가 있을 수 있습니다.

이렇게 withCredentialstrue로 설정하면, 크로스 도메인 요청에도 쿠키를 포함할 수 있습니다. 그 결과, 인증된 사용자의 상태를 다른 도메인에 전달하게 되며, 이는 사용자가 한 도메인에서 로그인하면 다른 도메인에서도 그 상태를 유지할 수 있게 해줍니다.

크롬 개발자 도구의 Cookies

크롬 개발자 도구의 "Application" 탭에서는 웹 페이지와 관련된 다양한 저장 영역(예: 쿠키, 로컬 스토리지, 세션 스토리지 등)의 내용을 확인하고 관리할 수 있습니다.

"Storage" 영역에서 "Cookies"를 선택하면 현재 웹 페이지에서 사용된 모든 쿠키를 볼 수 있습니다. 쿠키는 주로 세션 관리, 사용자 추적, 사이트 선호 설정 등의 목적으로 사용됩니다.

withCredentials 옵션을 true로 설정하여 요청을 보내면, 해당 요청의 응답에서 "Set-Cookie" 헤더가 포함되어 있다면 해당 쿠키는 자동으로 브라우저에 저장되며, 이 후 해당 도메인으로의 모든 요청에 이 쿠키가 자동으로 포함됩니다. 크롬 개발자 도구의 "Cookies" 섹션에서 이 쿠키의 이름, 값, 도메인, 경로, 만료, 크기 등의 정보를 확인할 수 있습니다.

이를 통해 웹 애플리케이션에서 쿠키가 올바르게 설정되고 전송되는지, 혹은 특정 쿠키가 원하는대로 동작하는지 디버깅할 수 있습니다.


  1. Spring Security 설정: Spring Security를 사용한다면, 자격 증명 정보와 관련된 헤더를 수락하는 설정도 필요합니다. 예를 들어, 쿠키 기반의 인증을 사용하는 경우, HttpSecurity 설정에서 쿠키 설정을 해야 합니다.

결론적으로, withCredentials는 클라이언트와 서버 간에 자격 증명 정보를 안전하게 주고받을 수 있게 해주는 중요한 도구입니다. 그러나 잘못 사용하면 보안 문제가 발생할 수 있으므로, 항상 적절한 보안 규칙과 함께 사용해야 합니다.

'기초 개념' 카테고리의 다른 글

제네릭<Generic>  (0) 2023.11.22
Eval 함수와 보안 문제  (0) 2023.08.29
개발 시 사이드 이펙트(Side Effect)란?  (0) 2023.08.24