✍ 들어가며

세션으로 바로 들어가려고 했으나 Cookie를 설명하지 않고 쓰기가 애매하다. 이전 TIL 포스팅에서 조금 자세하게 다뤘으니 편안한 포스팅이 될 것 같다.

🍪 Cookie

쿠키(cookie)란 HTTP의 일종으로 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다.

쿠키는 임의 조각의 데이터로서, 웹 브라우저에 의해 선별되어 처음 송신되며 웹 브라우저에 의해 클라이언트 컴퓨터에 저장된다. 이후 브라우저는 상태(이전 이벤트 기억)를 무상태 HTTP 트랜잭션으로 유입시키면서 모든 요청을 서버로 되돌려 보낸다. 쿠키가 없으면 웹 페이지의 각각의 검색 또는 웹 페이지의 구성 요소가, 대체적으로 웹사이트상에서 사용자가 만드는 다른 모든 페이지와 무관한 별개의 이벤트로 취급된다.

HTTP는 기본적으로 무상태성이다. 모든 요청은 이전의 요청과 무관하다는 전제를 가지고 있다. 이를 보완하기 위해서 사이트는 웹 브라우저에 작은 텍스트 파일을 건내주고 이를 통하여 상태성을 얻을 수 있다.

웹 브라우저에 적용되는 내용이라 웹 브라우저를 통하지 않는다면(안드로이드, IOS) 기본으로 가지고 있지 않다.

🙅 Cookie 보안의 한계

쿠키가 일반적으로 웹 서버에 의해 설정되지만 자바스크립트와 같은 스크립트 언어를 사용하여 클라이언트에 의해 설정이 가능하다.(스크립트 언어에 의해 쿠키를 수정하지 못하게 하는 쿠키의 HttpOnly 플래그가 설정되어 있지 않는 경우에 한해)

Cookie는 설정에 따라 자바스크립트 <scirpt> 로 추출할 수 있다. 따라서 Cookie로 중요한 정보를 주고받을 때는 보안을 강화해야 한다.

쿠키는 소프트웨어가 아니다. 쿠키는 컴퓨터 내에서 프로그램처럼 실행될 수 없으며 바이러스를 옮길 수도, 악성코드를 설치할 수도 없다. 하지만 스파이웨어를 통해 유저의 브라우징 행동을 추적하는데에 사용될 수 있고, 누군가의 쿠키를 훔쳐서 해당 사용자의 웹 계정 접근권한을 획득할 수도 있다.

중요하게는 Session ID는 쿠키를 통해 전달되며, 자잘하게는 사이트를 이용한 사용자의 기록을 추적할 수 있다. 이렇게 중요한 데이터를 쿠키로 보낼 때는 보안(HTTPS)이 적용되어야 한다.

📮 다른 도메인간 Cookie 전달하기

Frontend와 Backend 도메인 주소가 다른 경우 Cookie 전달이 되지 않는다. 특히 Network 탭에서 Response Header에 Set-Cookie는 있는데 Application 탭에서 Cookie가 보이지 않는다. 헤더의 옵션 조정으로 이를 해결할 수 있다.

client / withCredentials: true

헤더에 withCredentials: true 옵션으로 보안 통신 중 다른 도메인(Cross) 사이의 쿠키 기능을 활성화한다. 현재 실습 환경은 클라이언트와 서버의 도메인이 다른 상황이다.

XMLHttpRequest.withCredentials 속성은 쿠키, 권한 부여 헤더 또는 TLS 클라이언트 인증서와 같은 자격 증명을 사용하여 사이트 간 액세스 제어 요청을 만들어야 하는지 여부를 나타내는 부울 값입니다.
withCredentials 설정은 동일 사이트 요청에 영향을 미치지 않습니다.
withCredentials가 true로 설정되어 있지 않으면 자신의 도메인에 대한 쿠키 값을 설정할 수 없습니다. withCredentials를 true로 설정하여 얻은 타사 쿠키는 여전히 동일 출처 정책을 따르므로 document.cookie 또는 응답 헤더를 통해 요청하는 스크립트에서 액세스할 수 없습니다.
XMLHttpRequest.withCredentials - mozilla

axios
      .post(
        'https://localhost:4000/users/login',
        {
          userId: this.state.username,
          password: this.state.password,
        },
        { 'Content-Type': 'application/json', withCredentials: true } // <------
      )

server / credentials: true

이 옵션을 끄면 첫번째 로그인 요청에서 아래의 에러가 발생한다. 자주 보던 에러다. CORS 정책에 위반된다는 내용이며 'XMLHttpRequest에 의해 시작된 요청의 자격 증명 모드는 withCredentials 속성에 의해 제어된다'고 한다.

Access to XMLHttpRequest at 'https://localhost:4000/users/login' from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

아래는 공식 문서에서 언급하는 Access-Control-Allow-Credentials 옵션에 대한 설명이다. 요약하면 다른 도메인간 헤더를 포함할 수 있게 한다.

응답헤더 Access-Control-Allow-Credentials 는 요청의 자격증명 모드(Request.credentials)가 "include" 일때, 브라우저들이 응답을 프로트엔드 자바스트립트 코드에 노출할지에 대해 알려줍니다.
요청의 자격증명 모드가 (Request.credentials)가 "include" 일 때, Access-Control-Allow-Credentials 값이 true 일 경우에만 브라우저들은 프로트엔드 자바스트립트에 응답을 노출 할 것입니다.
Access-Control-Allow-Credentials - mozilla

credentials: Configures the Access-Control-Allow-Credentials CORS header. Set to true to pass the header, otherwise it is omitted.
cors - express

server / origin: 'https://localhost:3000' or true

origin을 *로 적으면 안된다. 정확하게 적어야 쿠키가 들어간다. express에선 true도 받아준다.
로그인 요청이 체인으로 연결되어서 2번 이루어지는데 그 과정에서 임시 헤더가 만들어져 CORS 정책에 위반한다. 개발자 도구에서 보면 첫 Login Post 요청은 넘어가지만 이어지는 userinfo Get 요청은 CORS 에서 막힌다.
그 이유는 origin 옵션이 *일 때는 'Access-Control-Allow-Origin' 옵션이 지원되지 않는다.
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is *

app.use(
  cors({
    origin: 'https://localhost:3000', // <-----
    methods: ['GET', 'POST', 'OPTIONS'],
    credentials: true, // <------
  })
);

💻 NodeJS Cookie 구현

Headers Set-Cookies

배열 요소로 들어가며 ['키=값', '키=값'] 형태로 저장된다.
res.writeHead 메소드로 쿠키를 적어줄 수 있다.

res.writeHead(200, {
  'Set-Cookie': [
    `my-cookie=programmer`,
  ],
  'Content-Type': 'text/html'
});

res.setHeader 메소드로 달아줄 수 있다. 옵션을 달아주고 싶으면 해당 쿠키 따옴표 안에서 뒤에 세미콜론 ;을 찍고 쿠키별로 각각 옵션을 입력한다.

res.setHeader('Set-Cookie', 
  [`my-cookie=programmer; HttpOnly`,
  `more-data=imNotSecure`]
);

cookie-parser 모듈

Token 섹션에서 등장했다. cookie-parser 모듈을 활용한다.
해당 섹션에선 tokenFunction 디렉토리에 모든 기능들을 구현해놓고 쓰기만 해서 와닿지가 않았다.

const {
  generateAccessToken,
  generateRefreshToken,
  sendRefreshToken,
  sendAccessToken,
} = require('../tokenFunctions');
...

    .then((data) => {
      if (!data) {
        // return res.status(401).send({ data: null, message: 'not authorized' });
        return res.json({ data: null, message: 'not authorized' });
      }
      delete data.dataValues.password;
      // 쿠키에 쓰는 부분을 별도의 함수로 빼놨다. 
      const accessToken = generateAccessToken(data.dataValues);
      const refreshToken = generateRefreshToken(data.dataValues);

      sendRefreshToken(res, refreshToken);
      sendAccessToken(res, accessToken);
    })
    .catch((err) => {
      console.log(err);
    });

실제로 tokenFunctions 파일을 열어보면 쿠키에 쓰는 동작을 확인할 수 있다. RefreshToken은 쿠키에 탑재된다.

  sendRefreshToken: (res, refreshToken) => {
    res.cookie("refreshToken", refreshToken, {
      httpOnly: true,
    });
  },
  sendAccessToken: (res, accessToken) => {
    res.json({ data: { accessToken }, message: "ok" });
  },

서버에서 쿠키를 읽을 때는 req.cookies 객체로 접근할 수 있다.

const refreshToken = req.cookies.refreshToken;

express-session 모듈

express-session 모듈을 통해 세션을 만드는 과정에서 자동으로 쿠키를 생성한다. connect.sid 값을 통해 세션 ID를 전달한다. 서버에서 쿠키를 달아주면 웹 브라우저는 이 이후부터 세션 ID가 담긴 connect.sid 라는 쿠키를 달고 다니게 된다. 이 이름은 기본값이며 바꿀 수 있다.

// TODO: express-session 라이브러리를 이용해 쿠키 설정을 해줄 수 있습니다.
app.use(
  session({
    secret: '@codestates', // 암호화로 쓰이는 키
    resave: false, // 세션을 항상 저장할지 설정
    saveUninitialized: true, // 세션이 저장되기 전 uninitialized 상태로 저장
    cookie: { // 세션 쿠키 설정
      domain: 'localhost', // 쿠키를 보내는 사이트(서버)를 명시
      path: '/', // URL 경로. 하위 경로까지 모두 포함.
      maxAge: 24 * 6 * 60 * 10000, // 쿠키 만료 시간. 초단위.
      // XSRF(cross-site request forgery) 공격 방어 옵션
      sameSite: 'None', // 사이트 외부에서 요청을 보낼 때 쿠키 정책
      // Strict : 외부 도메인 쿠키 차단
      // Lax : 외부 도메인 쿠키 일부 허용(HTTP get method / a href / link href)
      // None : 외부 도메인 쿠키 모두 허용. 강제로 origin 옵션과 같이 써야함
      httpOnly: true, // 클라이언트 스크립트가 쿠키를 못보게 함 (document.cookie)
      secure: true, // HTTPS 환경만 쿠키를 전송
    },
  })
);
// CORS 쿠키 설정 활성화
app.use(
  cors({
    // origin: 'https://localhost:3000',
    origin: true,
    methods: ['GET', 'POST', 'OPTIONS'],
    credentials: true, // 다른 도메인간 자격증명(credential, 쿠키 포함)을 전송할지 여부
  })
);

클라이언트는 서버와 통신할 때 connect.sid 쿠키에 대해서 아무런 언급이 없다. 쿠키는 브라우저에 저장되며 해당 사이트에 접속할 때 자동으로 달고 다니기 때문이다.

withCredentials 옵션은 Origin이 다른 통신에서 쿠키 조회를 허용하는 옵션이다.

    axios
      .post('https://localhost:4000/users/logout', null, {
        'Content-Type': 'application/json',
        withCredentials: true,
      })
      .then(() => props.logoutHandler())
      .catch((e) => alert(e));

클라이언트에서 언급이 없어도 서버에선 req.session 이라는 객체로 접근할 수 있다.

const result = await Users.findOne({
        where: { userId: req.session.userId },
      })