Set-Cookie 헤더는 forbidden response-header name 이라 조작이 불가능하다.

Angular 프로젝트의 인증 서비스의 로그인 로직의 테스트 코드를 작성하던 중 문제가 발생했다.

우선 로그인 로직은 아래와 같다.

• username / password 입력후, 로그인 submit 한다.
• 서버에 로그인 api를 요청한다
  • 실패 : username / password validation 관련하여 실패하고, 401 응답이 온다.
  • 성공 : Set-cookie 헤더에 Jwt 토큰(access, refresh)이 각각 담겨서 200 응답이 온다.

성공 케이스를 테스트하는데, 성공여부를 테스트 하기 위해 HttpStatus가 200 인지 를 테스트함과 동시에 좀 더 안전하게 하기 위해 Set-cookie 헤더에 각각 토큰이 담겨있는지(유효성 여부는 체크하지 않는다)를 체크한 후, 없으면 Error를 던지도록 코드를 작성했다.

  /**
   * Response 헤더에 setCookie로 at, rt 셋팅 있는지 여부 확인.
   * @param res
   * @returns
   */
  private checkAuthenticationResponse(
    res: HttpResponse<CommonResponse>
  ): CommonResponse {
    console.log(res);

    const setCookieHeader = res.headers.get('Set-Cookie');
    if (
      !setCookieHeader ||
      !setCookieHeader.includes('at') ||
      !setCookieHeader.includes('rt')
    ) {
      throw new Error('set cookie header not found');
    }

    return res.body || new CommonResponse('0000', '정상');
  }

근데 웬걸, 정상응답에서도 에러가 발생하길래 console.log로 HttpResponse 객체를 찍어봤더니, Set-Cookie 헤더는 보이지 않는다.

구글링 해본 결과, Forbidden header name 에 있는 헤더는 Client-Side-Javascript에서는 접근/조작이 불가능하다고한다. 결국 Setcookie를 읽어 인증 성공 여부를 판단할 수는 없고, 브라우저에 의해 셋팅된 쿠키를 파싱해 인증 여부를 확인할 수 밖에 없다.

이는 현재 테스트중인 AuthService의 관심사는 아니므로, 이부분은 의존중인 jwtService와 Store등에서 테스트하고 AuthService는 그냥 응답이 200인지만 체크하도록 한다.