Cannot contain cookie in request header :(

[jbee37142]

withCredentials

Problem

Webview에서 Server로 요청을 보낼 때, HTTP header에 Cookie값이 함께 전달되지 않는다. Cookie storage에는 잘 들어와 있다.

Situation

• 상황 1. 도메인이 다르다.
  • 서버의 도메인: api.test.me
  • request를 보내는 클라이언트의 도메인: test.me
  • no nginx, no proxy
• 상황 2. request header에 직접적으로 cookie 값을 세팅할 수 없다.
  • HttpOnly 쿠키였기 때문에, document.cookie에 접근할 수 없다.
• 상황 3. 서버에서 Set-Cookie를 해주기 전에 request header에 cookie를 세팅해야 한다.
  • App에서 쿠키를 주입하여 Webview를 띄워준다.
  • Webview에서 발생하는 request header에는 cookie가 설정되어야 한다.

Solution

axiosConfig.withCredentials = true

or

fetch({
  credentials: 'include'
})

reference에 첨부한 mdn 문서에서 다음과 같이 나온다.

Note: XMLHttpRequest responses from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request, regardless of Access-Control- header values.

두번째로 첨부한 HTML5Rock의 블로그 글에는 다음과 같이 나온다.

Standard CORS requests do not send or set any cookies by default. In order to include cookies as part of the request, you need to set the XMLHttpRequest’s .withCredentials property to true:

웹알못 인증하며 겸손해지는 날이었다.

---

Knowledge

Cookie?

HTTP 요청을 수신할 때, 서버는 응답과 함께 Set-Cookie 헤더를 전송할 수 있다. 쿠키는 보통 브라우저에 의해 저장되며, 그 후 쿠키는 같은 서버에 의해 만들어진 요청(Request)들의 Cookie HTTP 헤더안에 포함되어 전송된다.

쿠키는...

• 대개 웹 애플리케이션에서 사용자와 그들의 인증된 세션을 식별하기 위해 사용되곤 한다.
• 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용한다.

Set-Cookie: <cookie-name>=<cookie-value>

in Node.js

response.setHeader('Set-Cookie', ['type=ninja', 'language=javascript']);

이렇게 생성되는 일반적인 쿠키를 우리는 세션 쿠키라고 부른다. 이는 Chrome Devtools에 있는 Storage 탭의 Cookie에서 확인할 수 있다.

Persistent Cookie

보통 쿠키는 클라이언트가 종료되면 삭제된다. 웹 브라우저는 세션을 복구시킬 수 있으며 이 때 쿠키를 함께 복구시킬 수 있으며 이 때 복구되는 쿠키를 영속적인 쿠키라고 한다. Expires나 Max-Age를 명시하지 않으면 영속적인 쿠키가 되며 이 두 옵션은 세션 쿠키를 영속적인 쿠키로 바꿔준다.

Secure, HttpOnly Cookie

Cookie에는 HTTPS 환경에서만 Request header에 포함될 수 있도록 하는 Secure option이 있다. HttpOnly 옵션은 document.cookie 를 통해 접근할 수 없다.

References

• https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest/withCredentials
• https://www.html5rocks.com/en/tutorials/cors/