section3/Unit7/[Backend] 인증 / 보안(11/10)

카테고리 없음

section3/Unit7/[Backend] 인증 / 보안(11/10)

bbeyak 2022. 11. 10. 16:06

cookie

cookie란?

쿠키는 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법이다. 그러므로 서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.

그러므로 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다.

클라이언트에서 요청을 보낼 때 무조건 쿠키가 함께 보내진다.

이런 쿠키에는 다음과 같은 특징이 있다.

서버가 클라이언트에 특정한 데이터를 저장할 수 있다.

서버는 쿠키를 이용하여 데이터를 저장하고 이 데이터를 다시 불러와 사용할 수 있다. 하지만 데이터를 저장한 이후 아무 때나 데이터를 가져올 수는 없다. 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있기 때문이다.

'Set-Cookie':[
            'cookie=yummy', 
            'Secure=Secure; Secure',
            'HttpOnly=HttpOnly; HttpOnly',
            'Path=Path; Path=/cookie',
            'Doamin=Domain; Domain=codestates.com'
        ]

이런 조건들은 위 코드처럼 쿠키 옵션으로 표현할 수 있다. 아래에서 주로 사용하는 쿠키 옵션에 대해 알아보자.

1. Domain

도메인이라는 것은 흔히 사용하는 www.google.com과 같은 서버에 접속할 수 있는 이름이다. 쿠키 옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않는다. 여기서 서브 도메인이란 www 같은 도메인 앞에 추가로 작성되는 부분을 말한다.

따라서 요청해야 할 URL이 http://www.localhost.com:3000/users/login 이라 하면 여기에서 Domain은 localhost.com이 된다.

만약 쿠키 옵션에서 도메인 정보가 존재한다면 클라이언트에서는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있다. 이를 통해 naver.com에서 받은 쿠키를 google.com에 전송하는 일을 막을 수 있다.

2. Path

Path는 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미한다.

만약 요청해야 하는 URL이 http://www.localhost.com:3000/users/login 인 경우라면 여기에서 Path, 즉 세부 경로는 /users/login이 된다. 이를 명시하지 않으면 기본적으로 / 으로 설정되어 있다.

Path 옵션의 특징은 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있다. 즉 Path가 /users로 설정되어 있고, 요청하는 세부 경로가 /users/codestates 인 경우라면 쿠키 전송이 가능하다.

하지만 /posts/codestates로 전송되는 요청은 Path 옵션(/users)을 만족하지 못하기 때문에 서버로 쿠키를 전송할 수 없다.

3. MaxAge or Expires

쿠키가 유효한 기간을 정하는 옵션이다. 만약 쿠키가 영원히 남아있다면 그만큼 탈취되기도 쉬워지기 때문에 이러한 유효기간을 설정하는 것이 보안 측면에서 중요하다.

MaxAge는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션이다. 마치 쿠키에게 시한부 옵션을 주는 것과 비슷하다고 볼 수 있다.

Expires은 MaxAge와 비슷하지만 언제까지 쿠키가 유효한지 심판의 날을 지정할 수 있다. 이때 옵션의 값은 클라이언트의 시간을 기준으로 한다. 이후 지정된 시간, 날짜를 초과하게 되면 쿠키는 자동으로 파괴된다.

쿠키는 위 옵션의 여부에 따라 세션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나눠집니다.

세션 쿠키: MaxAge 또는 Expires 옵션이 없는 쿠키로, 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키이다. 브라우저를 종료하면 해당 쿠키는 삭제된다.
영속성 쿠키: 브라우저의 종료 여부와 상관없이 MaxAge 또는 Expires에 지정된 유효시간만큼 사용가능한 쿠키이다.

4. Secure

사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션이다. 만약 Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다.

Secure 옵션이 없다면 프로토콜에 상관없이 http://www.codestates.com 또는 https://www.codestates.com에 모두 쿠키를 전송할 수 있다.

5. HttpOnly

자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정한다. 만약 해당 옵션이 true로 설정된 경우, 자바스크립트로 쿠키에 접근이 불가하다.

명시되지 않는 경우 기본으로 false로 지정되어 있다. 만약 이 옵션이 false인 경우 document.cookie를 이용해 자바스크립트에서 쿠키접근이 가능하므로 XSS 공격에 취약하다.

6. SameSite

Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션(e.g. GET, POST, PUT, PATCH …)의 조합을 기준으로 서버의 쿠키 전송 여부를 결정하게 된다. 사용 가능한 옵션은 다음과 같다.

Lax: Cross-Origin 요청이라면 GET 메소드에 대해서만 쿠키를 전송할 수 있다.
Strict: 단어 그대로 가장 엄격한 옵션으로, Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송 할 수 있다.
None: Cross-Origin에 대해 가장 관대한 옵션으로 항상 쿠키를 보내줄 수 있다. 다만 쿠키 옵션 중 Secure 옵션이 필요하다.

이때 same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우를 말한다. 이 중 하나라도 다르다면 Cross-Origin으로 구분된다.

서버에서 이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie라는 프로퍼티로 쿠키를 담아 전송한다.

이후 클라이언트에서 서버에게 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송하게 된다.

쿠키를 이용한 상태유지

이러한 쿠키의 특성을 이용하여 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달받은 쿠키를 서버에 요청과 같이 전송하여 Stateless한 인터넷 연결을 Stateful하게 유지할 수 있다.

하지만 기본적으로 쿠키는 오랜 시간 동안 유지될 수 있고, HttpOnly 옵션을 사용하지 않았다면 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.

이런 인증정보를 이용해 공격자가 유저인척 서버에 요청을 보낸다면 서버는 누가 요청을 보낸 건지 의심하지 않고 이를 인증된 유저의 요청으로 취급하게 된다. 이때 개인정보와 같은 민감한 정보를 공격자가 탈취한다면 2차 피해가 일어날 수 있다.

Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있다.

Fetch API vs Axios

Axios	Fetch API
써드파티 라이브러리로 설치가 필요하다.	빌트인 API라 별도의 설치가 필요없다.
자동으로 JSON데이터 형식으로 변환된다.	.json() 메서드를 사용해야 한다.

Axios 사용법

Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치해야 한다.

npm install axios

Axios는 fetch API와 기본 원리는 같기 때문에 GET 요청에 대해서만 알아보자. POST 등과 같은 요청은 공식문서를 참고하면 된다.

GET 요청

GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드이다.

첫번째 인자에는 url주소가 들어간다. url주소는 필수이다. 두번째 인자에는 요청 시 사용할 수 있는 옵션들을 설정하게 된다. 옵션의 경우 필수는 아니다.

axios.get("url"[,config])

fetch API vs Axios

1. fetch API ver

// Promise ver
fetch('https://koreanjson.com/users/1', { method: 'GET' })
  .then((response) => {
    console.log(response);
    return response.json(); // 네트워크 응답의 body 부분을 뽑아내는 역할
  })
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

// Async / Await ver
async function request() {
   const response = await fetch('https://koreanjson.com/users/1', {
     method: 'GET',
   });
  const data = await response.json();
  console.log(data);
}

request();

2. Axios ver

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Promise ver
axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {
    console.log(response);
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));

// Async / Await ver
async function request() {
   const response = await axios.get('https://koreanjson.com/users/1');
   const { data } = response;
   console.log(data);
 }

request();

Cookie 튜토리얼 : 쿠키를 활용하여 로그인 상태를 유지하는 애플리케이션 만들기

client 부분 코드

App.js

function App() {
  const [isLogin, setIsLogin] = useState(false);
  const [userInfo, setUserInfo] = useState(null);

  const authHandler = () => {
    
    // TODO: 초기 화면 렌더링시, 서버에 유저 정보를 요청하여 Login 또는 Mypage가 렌더링되도록 구현합니다.
    return axios
      .get("https://localhost:4000/userinfo")
      .then((res) => {
        setIsLogin(true)
        setUserInfo(res.data)
      })
      .catch((err) => {
        console.log(err.response.data)
      });
    
  };
  //useEffect가 페이지를 렌더링할 때마다 최초 1번씩 authHandler를 실행
  useEffect(() => {
    // 컴포넌트 생성 시 아래 함수가 실행됩니다.
    authHandler();
  }, []);

  return (
    <BrowserRouter>
      <div className='main'>
        <Routes>
          <Route
            path='/'
            element={
              isLogin ? (
                <Mypage
                /*
                TODO: 렌더링에 필요한 App의 상태와 이를 하위 컴포넌트에서 변경할 수 있도록 props를 전달하세요. 
                */
               userInfo={userInfo} setIsLogin={setIsLogin} setUserInfo={setUserInfo}
                />
              ) : (
                <Login
                /*
                TODO: App의 상태를 변경할 수 있도록 props를 전달하세요. 
                */
                setIsLogin={setIsLogin} setUserInfo={setUserInfo}
                />
              )
            }
          />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

pages/Login.js

req.body 는 Axios로 post 요청을 보낼 때에는 엔드포인트 다음 인자로 넣어주면 된다.

export default function Login({setIsLogin, setUserInfo}) {
  //input창에 아이디, 비밀번호를 입력하면 업데이트
  const [loginInfo, setLoginInfo] = useState({
    userId: '',
    password: '',
  });
  // 로그인 유지하기 체크 상태를 의미
  const [checkedKeepLogin, setCheckedKeepLogin] = useState(false);
  // 에러 발생시 로그인 버튼 밑에 에러 메시지를 표시
  const [errorMessage, setErrorMessage] = useState('');
  const handleInputValue = (key) => (e) => {
    setLoginInfo({ ...loginInfo, [key]: e.target.value });
  };
  const loginRequestHandler = () => {
    // 아이디, 비밀번호 중 하나라도 입력이 되지 않았다면 에러를 띄우도록
    if (!loginInfo.userId || !loginInfo.password) {
      setErrorMessage('아이디와 비밀번호를 입력하세요')
      // 입력되지 않은 값이 있는거니까 요청을 보내볼 필요도 없이 바로 리턴해줍니다.
      return;
    }
    // TODO: Login 컴포넌트가 가지고 있는 state를 이용해 로그인을 구현합니다.
    // 로그인에 필요한 유저정보가 충분히 제공되지 않았다면 에러메시지가 나타나도록 구현하세요.
    return axios
      // 로그인을 처리하는 엔드포인트
      .post("https://localhost:4000/login", {loginInfo, checkedKeepLogin})
      .then((res) => {
        // 로그인에 성공했다면 응답으로 받은 데이터가 Mypage에 렌더링되도록 State를 변경하세요.
        // console.log(res.data);
        // setIsLogin(true) : 로그인 되었음을 상태로 저장하기
        // setUserInfo(res.data) : 로그인한 회원의 정보를 상태에 저장하기
        setUserInfo(res.data);
        setIsLogin(true);

				//여기에서 에러 초기화
        setErrorMessage("");
      })
      .catch((err) => {
        // 로그인에 실패했다면 그에 대한 에러 핸들링을 구현하세요.
        console.log(err.response.data);
        setErrorMessage("로그인에 실패했습니다.");
      });
    
  };

pages/Mypage.js

export default function Mypage({ userInfo, setIsLogin, setUserInfo}) {
  const logoutHandler = () => {
    
    // TODO: Logout 버튼을 눌렀을 시 Login 페이지로 돌아갈 수 있도록 구현하세요. 
    return axios
      .post("https://localhost:4000/logout")
      .then((res) => {
        // 로그아웃에 성공했다면 App의 상태를 변경하세요.
        // setIsLogin(false) : 로그아웃 되었음을 상태로 저장하기
        // setUserInfo(null) : 저장해 두었던 회원의 정보를 비우기
        setIsLogin(false);
        setUserInfo(null);
      })
      .catch((err) => {
        // 로그아웃에 실패했다면 그에 대한 에러 핸들링을 구현하세요. 
        console.log(err.response.data);
      });
    
  };

Server 부분 코드

Http 서버 열기

서버 폴더 안에서 mkcert를 사용해 인증서를 만들어서 HTTPS 서버로 바꿔준다.
```
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1
```

index.js

const corsOptions = {
  /* TODO: CORS 설정이 필요합니다. 클라이언트가 어떤 origin인지에 따라 달리 설정할 수 있습니다.
   * 메서드는 GET, POST, OPTIONS를 허용합니다.
   */
  // client는 http://localhost:3000 을 이용하게 됩니다.
  origin: "http://localhost:3000",

	// cookie는 인증 정보를 포함하는 경우가 많으므로 credentials도 설정해줍니다.
  credentials: true,

	// 허용할 메소드를 배열에 담아서 작성해줍니다.
  methods: ['GET', 'POST', 'OPTION']
};

users/login.js

userInfo가 빈 객체라면? 로그인이 실패했다는 응답을 보내준다
- 이 때. if (userInfo === undefined) 로 분기하면 안 된다.
  - 빈 객체도 주소 값을 가지므로 제대로 작동하지 않게된다.
- userInfo에 아무 키나 찍어서 분기해라. (다음 코드는 첫 번째로 들어오는 유저 정보의 id로 분기하고 있다)

const { USER_DATA } = require('../../db/data');

module.exports = (req, res) => {
  // console.log(req.body);
  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;
  const userInfo = {
    ...USER_DATA.filter((user) => user.userId === userId && user.password === password)[0],
  };
  // console.log(userInfo);
  /*
   * TODO: 로그인 로직을 구현하세요.
   *
   * userInfo에는 요청의 바디를 이용해 db에서 조회한 유저정보가 담겨있습니다. 콘솔에서 userInfo를 출력해보세요.
   * 유저의 정보가 출력된다면 해당 유저가 존재하는 것임으로 로그인 성공에 대한 응답을 전송해야 합니다.
   * 만약 undefined가 출력된다면 해당하는 유저가 존재하지 않는 것임으로 로그인 실패에 대한 응답을 전송해야 합니다.
   *
   * 로그인 성공 시에는 클라이언트에 쿠키를 전송해야합니다. 쿠키의 cookieId에는 userInfo.id가 담겨야 합니다.
   * 테스트케이스에서 요구하는 쿠키 옵션을 모두 설정하세요.
   * 영속성있는 쿠키를 보내려면 max-age 또는 expires 옵션을 설정하세요.
   *
   * 클라이언트에게 바로 응답을 보내지않고 서버의 /useinfo로 리다이렉트해야 합니다.
   * express의 res.redirect 메서드를 참고하여 서버의 /userinfo로 리다이렉트 될 수 있도록 구현하세요.
   */
  // 쿠키
  let cookiesOption = { 
    domain: 'localhost',
    path: '/',
    // 유효기간은 로그인 체크 여부에 따라 달라질테니 일단 패스합니다.
    httpOnly: true,
    // sameSite 옵션의 설정 값을 확인하면서 어떤 옵션을 설정하면 좋을지 살펴봅시다.
      // Lax : Get 요청만 쿠키 전송. 그런데 클라이언트에서 아이디랑 비밀번호를 POST로 보내주고 있으므로 지금 사용하기엔 부적합해요.
      // Strict : same-site만 가능. 그런데 클라이언트는 http 프로토콜 + 3000번 포트, 서버는 https 프로토콜 + 4000번 포트로 same-site가 아닙니다. 따라서 이 옵션도 부적합합니다.
      // 따라서 'none'이 가장 적합한 옵션값입니다. 그런데 이 옵션을 사용할 경우에는  secure 옵션이 필요하다고 해요. secure 옵션도 같이 작성해줍시다.
    sameSite: 'none',
    secure: true,
  }

  // 로그인 실패
  if (userInfo.id === undefined) {
    res.status(401).send('Not Authorized')
  }
  // 로그인 성공 => 클라이언트에 쿠키를 전송해야함
  else if (checkedKeepLogin === true) {
    // 로그인을 유지하고 싶은 경우, cookiesOption에 max-age 또는 expires 옵션을 추가로 설정해주겠습니다.

    // max-age 옵션으로 작성하는 경우
    cookiesOption.maxAge = 1000 * 60 * 30 // 1초 * 60 = 1분 -> 1분 * 30 = 30분
    // 단위는 ms(밀리세컨드 === 0.001초)이니 주의하세요! -> 이렇게 작성할 경우 30분동안 쿠키를 유지합니다.

    // expire 옵션으로 작성하는 경우에는, 이렇게 작성하시면 됩니다.
    cookiesOption.expire = new Date(Date.now() + (1000 * 60 * 30) )
    // 지금 시간 + 30분 후에 쿠키를 삭제한다는 의미입니다.

    res.cookie('cookieId', userInfo.id, cookiesOption)

  } else {
    // 로그인을 유지하고 싶지 않은 경우, max-age 또는 expires 옵션을 작성하지 않은 상태 그대로 쿠키를 설정합니다.
    res.cookie('cookieId', userInfo.id, cookiesOption)
  }
  // /login 에서는 쿠키만 발급하고, /userinfo에서 회원 정보를 보내주게 됨
  res.redirect("/userinfo");
};

users/userinfo.js

module.exports = (req, res) => {
  /*
   * TODO: 쿠키 검증 여부에 따라 유저 정보를 전달하는 로직을 구현하세요.
   *
   * 로그인 시 설정한 쿠키가 존재하는 지 확인해야 합니다.
   * 아직 로그인을 하지 않았다면 쿠키가 존재하지 않을 수 있습니다.
   * 쿠키에 유저의 id가 존재하는지 확인하고 싶다면 콘솔에 req.cookies를 출력해보세요.
   */
  // console.log(req.cookies);
  const cookieId = req.cookies.cookieId
  const userInfo = {
      ...USER_DATA.filter((user) => user.id === cookieId)[0],
  };
  // 유효한 id가 아닌 경우 userInfo가 비어있을 수도 있습니다. & 쿠키가 없을 때도 userInfo 값이 제대로 들어오지 않습니다.
  if (!cookieId || !userInfo.id){
    res.status(401).send('Not Authorized');
  } else {
      // 비밀번호는 민감한 정보라서 삭제 후에 보내야 합니다.
      delete userInfo.password;
      res.send(userInfo);
  }

};

users/logout.js

module.exports = (req, res) => {
  /*
   * TODO: 로그아웃 로직을 구현하세요.
   *
   * cookie-parser의 clearCookie('쿠키의 키', cookieOption) 메서드로 해당 키를 가진 쿠키를 삭제할 수 있습니다.
   * 만약 res.clearCookie('user', cookieOption) 코드가 실행된다면 `user=....` 쿠키가 삭제됩니다.
   * 로그아웃 성공에 대한 상태 코드는 205가 되어야합니다.
   */
  const cookiesOption = {
    domain: 'localhost',
    path: '/',
    httpOnly: true,
    sameSite: 'none',
    secure: true,
  }

  res.status(205).clearCookie('cookieId', cookiesOption).send("logout");
};

Session

Cookie vs Session

세션 기반 인증(Session-based Authentication)

1. 로그인

로그인을 통해 사용자의 인증 정보를 저장하고, 그 후 인증된 사용자가 어떤 식으로 웹사이트를 이용하는지 간단하게 알아보자.

사용자가 웹사이트에서 아이디 및 비밀번호를 이용해서 로그인을 시도하면(그림에서 1번), 과연 어떤 일이 벌어질까?

사용자가 만일 정확한 아이디와 비밀번호를 입력했다면, 서버는 인증(Authentication)에 성공했다고 판단할 것이다.

그렇다면, 다음번에 인증을 필요로 하는 작업(e.g. 그림에서와 같이, 장바구니에 물품 추가)을 요청할 경우에 한번 더 로그인 과정을 거쳐야 할까?

아니다. 서버가 "해당 유저는 인증에 성공했음"을 알고 있다면, 유저가 매번 로그인할 필요가 없을 것이다.

인증에 따라 리소스의 접근 권한(Authorization)이 달라집니다.

이때 서버와 클라이언트에 각각 필요한 것은 다음과 같다.

서버: 사용자가 인증에 성공했음을 알고 있어야 한다.
클라이언트: 인증 성공을 증명할 수단을 갖고 있어야 한다.

여기서 몇 가지 용어가 등장한다.

사용자가 인증에 성공한 상태는 세션이라고 부른다.
- 서버는 일종의 저장소에 세션을 저장한다. (그림에서 2번) 주로 in-memory(자바스크립트 객체를 생각하면 됩니다), 또는 세션 스토어(redis 등과 같은 트랜잭션이 빠른 DB)에 저장한다.
세션이 만들어지면, 각 세션을 구분할 수 있는 세션 아이디도 만들어지는데(그림에서 3번), 보통 클라이언트에 세션 성공을 증명할 수단으로써 세션 아이디를 전달한다. (그림에서 4번)

즉, 서버는 사용자가 인증에 성공하면 로그인 상태를 유지하기 위해 해당 사용자의 정보를 담은 세션 객체를 생성한다. 그리고 이에 접근할 수 있는 id를 암호화하여 쿠키로 사용자에게 전달한다.

웹사이트에서는 로그인을 유지하기 위한 수단으로 쿠키를 사용한다. 쿠키에는 서버에서 발급한 세션 아이디를 저장한다.

쿠키를 통해 유효한 세션 아이디가 서버에 전달되고, (그림에서 5번) 세션 스토어에 해당 세션이 존재한다면 (그림에서 6번) 서버는 해당 요청에 접근 가능하다고 판단한다. (그림에서 7,8번)

하지만 쿠키에 세션 아이디 정보가 없는 경우, 서버는 해당 요청이 인증되지 않았음을 알려준다.

2. 로그아웃

그렇다면, 로그아웃은 어떻게 구현해야 할까? 세션 아이디가 담긴 쿠키는 클라이언트에 저장되어 있으며, 서버는 세션을 저장하고 있다. 그리고 서버는 그저 세션 아이디로만 인증 여부를 판단한다.

주의: 쿠키는 세션 아이디, 즉 인증 성공에 대한 증명을 갖고 있으므로, 탈취될 경우 서버는 해당 요청이 인증된 사용자의 요청이라고 판단한다. 이것이, 우리가 공공 PC에서 로그아웃해야 하는 이유한다.

그러므로 로그아웃은 다음 두 가지 작업을 해야 한다.

서버: 세션 정보를 삭제해야 한다.
클라이언트: 쿠키를 갱신해야 한다.

서버는 클라이언트의 쿠키를 임의로 삭제할 수 없다. 대신, set-cookie로 클라이언트에게 쿠키를 전송할 때 세션 아이디의 키값을 무효한 값으로 갱신할 수 있다.

express-session

Node.js에는 이런 세션을 대신 관리해 주는 express-session 이라는 모듈이 존재한다.

express-session은 세션을 위한 미들웨어로, express 서버에서 쉽게 세션을 위한 공간을 다룰 수 있도록 만들어준다.

const express = require('express');
const session = require('express-session');

const app = express();

app.use(
  session({
    secret: '@codestates',
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      maxAge: 24 * 6 * 60 * 10000,
      sameSite: 'none',
      httpOnly: false,
      secure: true,
    },
  })
);

express-session을 사용해 위와 같이 세션의 옵션을 지정할 수 있다. 언뜻 보면 쿠키 옵션과 비슷해 보인다. 하지만 세션의 경우 secret 옵션의 비밀키를 이용해 암호화해 '세션 id'라는 것을 생성한다. 그리고 이것을 클라이언트에게 쿠키로 전송한다.

쿠키로 전송된 세션 id는 이에 종속되는 고유한 세션 객체를 가지며 이는 서버에 저장된다. 이때 세션 객체는 유저별로 독립적으로 생성된 객체이므로 유저별로 각각 다른 데이터를 저장할 수 있다.

따라서 클라이언트에 유저의 개인정보를 담지않고도 서버가 클라이언트의 세션 id를 이용해 유저의 인증여부를 판단할 수 있다.

세션 객체는 req.session으로 접근할 수 있으며, 앞서 말했듯 이를 통해 세션에 임의의 데이터를 저장하거나 불러올 수 있다.

이 세션 객체에 값을 담거나, 값을 불러오는 법, 세션을 파괴하는 법은 다음 문서를 참고해보자. GitHub: express-session

GitHub - expressjs/session: Simple session middleware for Express

Simple session middleware for Express. Contribute to expressjs/session development by creating an account on GitHub.

github.com

Session 튜토리얼 : Session을 활용하여 로그인 상태를 유지하는 애플리케이션 만들기

이번 과제는 쿠키 튜토리얼에서 진행했던 흐름에서 서버가 쿠키 대신 세션을 이용하도록 바꿔주면 된다. 클라이언트는 쿠키 튜토리얼의 코드를 그대로 가져다 사용하자.
세션도 쿠키를 사용하긴 하지만, 쿠키로 구현했던 것처럼 유저id를 직접 담는게 아니라, 서버에서 세션id를 받아와서 사용하게 된다.
- 서버는 세션 저장소에 세션을 저장하고, 여기에 해당하는 세션id를 암호화해서 클라이언트의 쿠키로 저장해둔다. 그리고 요청이 올 때마다 쿠키에 있는 세션id를 확인해서 유저인지 확인한다.
- 이 때 세션 저장, 세션id 생성 등 세션으로 구현하는 데 필요한 로직은 express-session이 맡아서 처리해주기 때문에 우리는 express-session의 사용법에 맞춰서 사용하기만 하면 된다.
index.js 를 보면 express-session 라이브러리로 쿠키 설정이 이미 되어있으므로, 이번에는 쿠키 설정을 따로 해주지 않아도 괜찮다.

Server 부분 코드

users/login.js

const { USER_DATA } = require('../../db/data');
module.exports = (req, res) => {
  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;
  const userInfo = {
    ...USER_DATA.filter((user) => user.userId === userId && user.password === password)[0],
  };
  /*
   * TODO: 로그인 로직을 구현하세요.
   *
   * userInfo에는 요청의 바디를 이용해 db에서 조회한 유저정보가 담겨있습니다. 콘솔에서 userInfo를 출력해보세요.
   * 유저의 정보가 출력된다면 해당 유저가 존재하는 것임으로 로그인 성공에 대한 응답을 전송해야합니다.
   * 만약 undefined가 출력된다면 해당하는 유저가 존재하지 않는 것임으로 로그인 실패에 대한 응답을 전송해야합니다.
   *
   * 로그인 성공 시에는 클라이언트에 세션 아이디를 전송해야합니다.
   * req.session을 사용해 세션 객체에 userInfo.id를 저장하세요.
   * 영속성있는 쿠키로 세션 아이디를 보내려면 max-age 또는 expires 옵션을 설정하세요.
   *
   * 클라이언트에게 바로 응답을 보내지않고 서버의 /useinfo로 리다이렉트해야 합니다.
   * express의 res.redirect 메서드를 참고하여 서버의 /userinfo로 리다이렉트 될 수 있도록 구현하세요.
   */
  if (!userInfo.id) {
    res.status(401).send("Not Authorized")
  } else if (checkedKeepLogin) {
    //req.session을 사용해 세션 객체에 userInfo.id를 저장
    req.session.sessionId = userInfo.id
  
    // 쿠키 옵션 설정하기
    req.session.cookie.maxAge = 1000 * 60 * 30
      // 세션 구조 들여다보기 -> 터미널에 표시됩니다
    console.log(req.session)
    res.redirect('/userinfo')
        
  } else {
    req.session.sessionId = userInfo.id
    res.redirect('/userinfo')
  }
};

users/userInfo.js

const { USER_DATA } = require('../../db/data');

module.exports = (req, res) => {
  /*
   * TODO: 세션 객체에 담긴 값의 존재 여부에 따라 유저 정보를 전달하는 로직을 구현하세요.
   *
   * 세션 객체에 담긴 정보가 궁금하다면, req.session을 콘솔로 출력해보세요.
   * 로그인 시 세션 객체에 저장한 userInfo.id를 이용해 해당하는 유저를 조회할 수 있습니다.
   */
  const sessionId = req.session.sessionId
  const userInfo = {
    ...USER_DATA.filter((user) => user.id === sessionId)[0],
  };

  if (!sessionId || !userInfo.id){
    res.status(401).send('Not Authorized');
  } else {
    delete userInfo.password
    res.send(userInfo)
  }
};

users/logout.js

module.exports = (req, res) => {
  /*
   * TODO: 로그아웃 로직을 구현하세요. 로그아웃 요청은 세션을 삭제하는 과정을 포함해야 합니다.
   *
   * 세션 아이디를 통해 고유한 세션 객체에 접근할 수 있습니다.
   * 앞서 로그인시 세션 객체에 저장했던 값이 존재할 경우, 이미 로그인한 상태로 판단할 수 있습니다.
   * 세션 객체에 담긴 값의 존재 여부에 따라 응답을 구현하세요.
   */
  req.session.destroy();
  res.status(205).send('Logged Out Successfully');
};

쿠키, 세션, 웹 스토리지(로컬/세션) 참고하면 좋은 블로그)

https://jongminfire.dev/cookie-session-web-storage-local-storage-session-storage

Cookie, Session, WebStorage (localStorage,sessionStorage)

HTTP는 상태가 없는 (Stateless…

jongminfire.dev

저작자표시 비영리 변경금지