Cookie 옵션 설정하기 (feat. iframe cookie 문제 해결)

Cookie🍪 의 옵션을 설정하는 방법과,
iframe을 사용했을 때 cookie가 전송되지 않았던 문제를 어떻게 해결 했는지 정리해보자.

 

 

쿠키의 모든 옵션들과 그에 대한 설명은 가장 하단에 설명하였다. 쿠키 옵션만이 궁금하다면 가장 하단으로 바로 내려가자!

문제 상황

협력하는 업체에서 본인들 웹 페이지에서 iframe 태그를 통해 우리 서버 페이지를 불러오고 로그인을 하려고 했지만, 로그인이 안되는 이슈가 있다고 하였다.

현재 프로젝트에서 로그인관리를 쿠키를 통해 하고 있었기에, 쿠키와 관련되었을 거라 짐작했으며, 
CSRF공격을 막기 위해서 chrome80부터 sameSite옵션의 기본 값을 Lax로 바꾼 것을 알고 있었기에,
그것이 원인 이라고 생각하고 접근했다.

 

원인 파악

1. 쿠키 옵션 체크

현재 웹페이지의 쿠키 옵션이 어떻게 세팅되어 있는지 먼저 확인해봤다.

const accessOption = {
        domain: this.configService.get('FRONT_HOST'),
        path: '/',
        sameSite: false,
        httpOnly: true,
        maxAge:
          Number(this.configService.get('JWT_ACCESS_TOKEN_EXPIRATION_TIME')) *
          1000,
        }
        
 res.cookie('Authentication', accessToken, accessOption);

 

아니... 왜 sameSite 옵션이 false로 설정이 돼있지? 내가 알기로는 'None', 'Lax', 'Strict' 세가지 값을 가지고 있었는데,

이상해서 살펴 보기로 했다. (참고로, 나는 express를 사용하고 있었다. )

 

express에서 제공하는 Response interface의 cookie 메소드를 타고 들어가서 확인해 보니 아래처럼 나와 있었고,

 cookie(name: string, val: string, options: CookieOptions): this;

 

내가 궁금했던 CookieOptions interface를 확인해보니, 아래처럼 나와있었다.

export interface CookieOptions {
    maxAge?: number;
    signed?: boolean;
    expires?: Date;
    httpOnly?: boolean;
    path?: string;
    domain?: string;
    secure?: boolean;
    encode?: (val: string) => string;
    sameSite?: boolean | 'lax' | 'strict' | 'none';
}

 

express에서는 sameSite 옵션을 boolean 타입으로도 전달 할 수 있다는 것을 알았다.
그리고 확인을 해보니, sameSite에 false값을 주게 되면 sameSite옵션이 없는 것 처럼 적용되게 되고
이는 크롬 웹 브라우저의 기본값인 'Lax'로 설정된다는 것을 의미했다.

 

 

해결 방법

 

1. 쿠키 옵션 설정: sameSite: 'none' && secure: true

그럼, 외부 협력사에서 우리 쪽 웹에 접근 했을 때 쿠키를 발급 해주기 위해서 'none'으로 설정 해주면 매우 간단히 해결 될 것 같았다. 

여기에서 주의할 점은 sameSite: 'none'을 설정하게 되면 보안에 최약해 질 수 있기때문에 secure 옵션을 반드시 true로 설정 해주어야 한다.

 

그래서 최종적으로 내가 설정한 쿠키 옵션은 아래와 같았다.

{
        domain: this.configService.get('FRONT_HOST'),
        path: '/',
        sameSite: 'none',
        secure: true,
        maxAge:
          Number(this.configService.get('JWT_ACCESS_TOKEN_EXPIRATION_TIME')) *
          1000,
}

 

 

2. 함수 리턴 타입 지정하기

이렇게 설정을 하고 나니 이제 TS에서 에러를 내뱉기 시작했다.

No overload matches this call.
  Overload 1 of 3, '(name: string, val: string, options: CookieOptions): Response<any, Record<string, any>>', gave the following error.
    Argument of type '{ domain: any; path: string; sameSite: string; secure: boolean; maxAge: number; }' is not assignable to parameter of type 'CookieOptions'.
      Types of property 'sameSite' are incompatible.
        Type 'string' is not assignable to type 'boolean | "none" | "strict" | "lax"'.
  Overload 2 of 3, '(name: string, val: any, options: CookieOptions): Response<any, Record<string, any>>', gave the following error.

나는 분명 'none'이라고 값을 줬음에도, 'string'타입이라고 인식을 하고 에러를 내뱉는 문제였다.

 

알고보니, 쿠키 옵션을 설정하는 함수의 리턴 타입을 지정하지 않았었다. 
아래처럼 함수의 리턴 타입을 지정해주고 나니 에러가 사라지고 정상적으로 작동하는 것을 볼 수 있었다. 

interface CookieOptions {
  accessToken?: string;
  refreshToken?: string;
  maxAge?: number;
  signed?: boolean;
  expires?: Date;
  httpOnly?: boolean;
  path?: string;
  domain?: string;
  secure?: boolean;
  encode?: (val: string) => string;
  sameSite?: boolean | 'none' | 'strict' | 'lax';
}

getCookieWithJwtAccessToken(id: string, role: string): CookieOptions

 

 

Cookie Options

cookie: { 

    domain: "localhost",  
    //쿠키옵션에 도메인 존재하다면, 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키전송이 가능!!!
    path: '/',
    //Cookie 헤더를 전송하기 위하여 요청되는 URL 내에 반드시 존재해야 하는 URL 경로
    //path: '/docs'로 설정된다면, /docs, /docs/web, /docs/web/http 와 같은 경로들은 모두 매치된다.
    maxAge: 24 * 6 * 60 * 10000, // 쿠키가 유효한 기간을 정하는 옵션(or Expires)
    sameSite: "none", 
    //Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합으로 서버의 쿠키 전송 여부를 결정
	//Lax(allow only get method), Strict(deny), none(yes for every method but needed SECURE option mandatory) 세가지 옵션이 존재
    httpOnly: true, 
    //자바 스크립트에서 쿠키에 접근여부를 결정. true-> 불가, 만약 false라면, document.cookie로 접근 가능
    secure: true, 	
    // true일 경우, https에서만 쿠키 전송 가능
}