[project] 로그인에 성공한 client의 정보 조회하기

으..로그인..token이 날 괴롭힌다..

프로젝트를 진행하면서 front, backend단에서 각자의 역할을 아무리 잘 수행하여도 front-back이 연결이 안된다면, 아무리 잘 만든 프로젝트라 하더라도, 무슨 소용이 있을까..

결국에는 "절반짜리 프로젝트" 라고 말 할 수 밖에 없을 것이다.. front-backend를 서로 같은 domain에 두고, CORS Error 대비 설정등 다 했다고 생각했는데,

"왜" 로그인을 시도하면 token missing이 발생하는 건지 그래서 "어떻게" 해결해야 하며, 놓친 지식은 무엇이 있는지 좀 제대로 보강하고자 한다.

---

---

Error 1)

로그인에 성공한 사용자의 정적정보를 GET()하지 못하는 현상 발생.

위 이미지는 sign-in을 실행한 후 csrftoken과 sessionid가 만들어진 결과이다.

세션(Session)은 웹 애플리케이션에서 사용자의 상태를 유지하기 위해 사용되는 기술로, 사용자가 로그인에 성공하면 서버에서는 해당 사용자에 대한 세션을 생성하고, 이 세션에 대한 고유한 식별자인 세션 ID(Session ID)를 부여하게 된다.

하지만 해당 Sessionid를 가진 client의 정보를 Frontend에서 조회하지 못하는 현상이 발생했다..

첫번쨰로 내가 생각한 원인은 CORS(Cross-Origin Resource Sharing) 에러인건가 생각했다.

왜냐면 front, back을 서로 다른 도메인에 두고 있어서 "petmo.com" 도메인의 서브도메인으로 간주할 수 있도록 도메인을 변경해주었다..
따라서 [ www.f??.petmo.com - www.b??.petmo.com ]으로 각각 변경하였고 로그인에 대해 다시 시도 해보았다.

---

여전히 문제상황은 지속되었다.
왜지..??? 그래서 이번에는 console 창을 살펴보았다..

확인해 보니 withCredentials : false 로 설정이 되어 있었다.

withCredentials는 XMLHttpRequest(XHR)이나 Fetch API를 사용하여 웹 브라우저에서 서버로 요청을 보낼 때, CORS(Cross-Origin Resource Sharing) 정책을 우회하기 위한 옵션이다.

브라우저에서 요청 시 사용자의 인증 정보(예: 쿠키, 인증 헤더 등)를 자동으로 포함시키도록 하여 CORS 정책을 우회해, 인증된 요청을 서로 다른 도메인의 서버로 보낼 수 있게한다.

" 이 옵션이 false로 설정이 되어 있어서, 요청을 하여도 브라우저에서는 CORS 우회를 할 수 없었던 것이 였고, 이로써 로그인에 성공한 client의 sessionID와 csrftoken이 Cookie에 저장이 되지 않았던 것이였다.."

React에서 withCredentials는 주로 axios 또는 Fetch API를 사용하여 HTTP 요청을 보낼 때 설정한다.

withCredentials를 사용하여 요청을 보내는 경우, 서버 측에서 CORS 설정을 적절히 구성하여 허용된 도메인에서의 요청만을 허용하도록 설정해야 하고 인증된 요청을 다른 도메인의 서버로 보낼 수 있게 만들어 주어야 한다.

따라서 front, back 둘다 설정 부분을 변경하였다.!

CORS_ALLOWED_ORIGINS=["deploied frontend-Domain"]
CSRF_TRUSTED_ORIGINS =["deploied frontend-Domain"] 

다시 시도한 결과 Cookie에 csrftoken과 sessionid가 잘 생성되고 저장이 되는것 까지 확인했다.!

---

Error 2)

{"CSRF Failed : CSRF token missing."}
분명 잘 되는것 까지 확인했는데.. token missing은 또 무슨 에러인가..

로그인을 하고 다시 재 로그인을 하였더니 error2가 발생한다..
이건 또 무슨일이야.. 무슨 일이야..!! 아니 Cookie에 csrftoken과 sessionID 잘 있는데 csrf-token 이 missing이라니,, 있는데 없다? 말이 돼나..

의문1) 그럼, csrftoken은 언제 만들어 지는 거지?
의문2) 어떻게 만들어지는가.?

CSRFToken은 client가 웹 애플리케이션에 접속할때 생성된다.

보통 CSRFToken은 서버 측에서 생성되고 브라우저에 전달이 된다. 이후 client가 요청을 보낼때마다 함께 전송이 되어진다. 요청이 들어올때마다 서버측에서는 유효한 요청인지 검증을 한다.

---

• csrftoken은 다음과 같은 과정을 거쳐 생성된다.

1. 사용자가 웹 사이트에 접속한다.
2. 서버는 사용자에게 랜덤한 csrftoken 값을 생성하여 제공한다.
3. 사용자의 웹 브라우저는 이 csrftoken 값을 쿠키에 저장, 이후 사용자가 웹 사이트와 상호작용하는 동안 쿠키에 저장된 csrftoken 값을 요청 헤더에 자동으로 포함시킨다.
4. 사용자가 웹 사이트를 통해 요청을 보낼 때, csrftoken 값을 서버에 함께 전송합니다.
5. 서버는 사용자의 요청을 처리하기 전에, 해당 요청에 포함된 csrftoken 값이 유효한지 검사하며, 유효하지 않은 경우 CSRF 공격으로 간주하여 요청을 거부한다.

---

CSRFToken은 쿠키(Cookie)에 저장되어 클라이언트가 사용자의 브라우저 세션과 관련된 요청을 보낼 때 자동으로 전송되기 때문에, 쿠키를 사용하여 CSRFToken을 저장하면 클라이언트가 별도로 관리하지 않아도 되며, 개발자가 일일히 추가할 필요가 없어 편의성과 보안적으로도 쿠키를 이용하는 것이 더 좋다.

즉, 웹 애플리케이션은 사용자가 접속할 때마다 CSRFToken을 생성하여 세션과 함께 관리하고, 필요한 경우 client에게 해당 CSRFToken을 전송하여 보안을 강화한다.

---

첫 로그인을 성공하면 서버에서 csrftoken1, sessionid1가 생성후 브라우저에 전달. 로그아웃하지 않고 다시 재로그인을 하면 재시도에 대한 csrftoken2, sessionid2가 또 만들어 지게 되고 브라우저에 전달..!
이때, 이전에 생성된 csrftoken1, sessionid1은 더 이상 유효하지 않다.

세션과 CSRFToken은 사용자의 인증 상태를 유지하고, 보안을 강화하기 위해 일시적으로 생성되는 것으로, 각각의 로그인 시도마다 새로운 값이 생성되기 때문에 Cookie에 저장된 이전 csrftoken,sessionid를 무효화 시켜야 csrftoken missing이라는 오류가 발생하지 않게 된다.