때는 바야흐로 24년 1월 23일..
로그인 기능을 만들고 token을 cookie에 저장하는거까지 쉽게 하고 퇴근했던 찰나.. 인증인가 기능이 정상적으로 작동하는가? 테스트를 하기 위해 자리에 앉았다.
한 api에 required_token 기능을 데코레이터로 주어 쿠키 세션의 내용을 확인하고 없을 경우 login page로 redirect하는 기능을 개발하였다.
테스트 도중 확인을 하는데? server에서 받아올 때 token이 항상 empty인 상황이 발생했다.
이렇게 코드를 작성할 때 데코레이터로 token_required를 적용한 것을 확인할 수 있다.
token_required를 보면 cookie에서 token을 가져오고 token이 없을 경우 403 에러를 보내는 걸 볼 수 있따.
왜그런걸까?
답은 간단하다.
기존 CORS는 flask_cors로 app을 설정하고 origin을 설정했을 뿐이다.
하지만 서버에서 쿠키를 받아오기 위해선 supports_credentials를 True로 설정해야 쿠키 정보에 대한 설정 정보를 받아올 수 있따.
기본적으로 supoorts_credentials를 True로 설정했을 경우?
기본 default로 resource 내 origin은 *로 설정되어 있다.
보안을 위해 해당 내용은 origin을 설정하여 도메인을 지정하는 것이 좋다.
나는 로그인 서버와 기능 서버를 분리하여 사용하기 때문에 두 곳 모두에 CORS에서 supports_credentials를 True로 설정해두었다.
서버만 하면 되는가?
답은 물론 아니다.
클라이언트 내에서도 설정 정보가 필요하다.
axios 내에서도 withCredientials를 true로 설정해 두어야 쿠키 정보를 전달 할 수 있다.
위 내용으로 나는 axios로 5000포트에 보내는 모든 요청에 withCredentials를 true로 처리하여 보냈다. 물론 다양한 api 요청 포트가 있고 나는 포트를 분리해서 사용하기 때문에 5000번 포트 요청에만 설정정보를 추가했다.
프론트 내에서 api 요청을 할 때에도 설정을 추가하여 보낼 수 있다.
모듈을 사용하지 않고 기본적인 방법으로 보자.
위 내용을 볼 때 axios 내용에 url을 추가하고 parameter를 전송하면서 withCredentials 설정 정보를 넘기는 것을 볼 수 있다.
설정이 간단하면서도 에러가 많이 발생한 부분으로 해결하는데 시간을 제법 소모했다..
그리고 위 token_required에서 token이 없을 시 403에러를 보내준 이유다. 403에러를 받을 경우 catch문을 통해 url을 login 페이지로 redirect 시킨다!
이상이다!
그리고 쿠키 설정에 대해 말하면 간단하다!
위 코드를 보면 set_cookie에 정보가 있다.
간단하다.
cookie 설정 내용
secure을 true로 하면 https가 적용된 요청에만 전송이 되는 쿠키다.
httpsOnly는 js 내에서 쿠키를 조회하는 것을 막는 것! 브라우저에서 활성쿠키를 조회하는 것을 막는 용도로 사용한다. 이는 서버 http request 요청을 보낼 때만 쿠키를 전송한다. xss 공격을 차단해준다!
samesite는 None, Lax, Strict의 방식으로 나뉘고 있다.
None은 기존 쿠키 동작과 같은 방식!
Lax는 서트파티 쿠키는 전송되지 않지만 예외적인 요청에는 전송이 가능하다.
Strict의 경우 Cross site로는 쿠키가 전송되지 않는다! 즉 퍼스트 파티 쿠키에만 전송된다!
이상이다! 위 설정을 안하면 쿠키 정보를 읽을 수 없으니 적절한 설정과 확인 과정이 필요하다!
물론 oAuth2.0의 경우 다르겠지만.. 이제 한번 적용해볼 예정이다!
