배포 후 쿠키, 세션 문제

배포 후 로그인, 로그아웃이 되지 않았다.

 

분석한 결과, 로그인 로그아웃 기능은 작동하나, 이후 auth 체크가 말썽이었다.

따라서 헤더부분에 로그인상태, 로그아웃 상태가 반영되지 않았다. (예) 로그인 시 마이페이지 보여지기)

 

http, https 환경에서 보안때문에 쿠키 기능이 작동되기 어렵다는 것을 알게됐고 세션방식으로 변경했다.

그러나 세션도 쿠키 기반이었기 때문에 여전히 문제였다. (쿠키를 기반으로 하나 사용자 정보 파일을 브라우저에 저장하지 않고 서버측에서 관리한다는 차이점)

 

session의 sid가 (서버(웹)는 접근한 클라이언트(사용자)에게 response-header field인 set-cookie 값으로 클라이언트 식별자인 session-id(임의의 긴 문자열)를 발행(응답)한다.) 생성이 안되었다.

 

 

CORS 정책과 SameSite 정책 문제였다는 것을 알게 됐다.

 

*CORS란? (Cross-Origin Resource Sharing)

Same Origin Policy와 반대 / 추가 HTTP 헤더를 사용해서 출처가 다른 도메인에서의 요청에 대해 선택적으로 권한을 부여하는 메커니즘이다.

 

CORS 요청은 simple, preflight, credential, none-credential 4가지 조합이 있다.

여기서 credential은 http cookie와 http authentication 정보를 인식할 수 있게 해주는 요청이다.

이때 *가 오면 안된다.

 

*프론트 단에서

프록시(직접 통신하지 못하는 2개 컴퓨터 사이에서 통신할 수 있도록 돕는 역할) 설정 필요 : Access-Control-Allow-

Origin를 추가, axios 전송 시 withCredentials:true를 config로 추가

 

 

*SameSite란?

20년 2월부터 구글 크롬80버전부터 새로운 쿠키정책이 적용됐는데, Cookie SameSite 기본값이 None에서 Lax로 변경되었다. None으로 설정할 경우 모든 도메인에서 쿠키를 전송하고 사용가능하다.

이때, SameSite 속성을 None으로 설정하고 Secure 속성을 추가해야 한다.

 

 

 

**Solution

app.use(cors({

origin: "https://jolly-turing-1308c8.netlify.app",

credentials: true,

methods:"PUT, GET, POST, DELETE, OPTIONS",

}));

 

라우터 앞에

router.use(function(req, res, next) {

res.header("Access-Control-Allow-Origin", "https://jolly-turing-1308c8.netlify.app");

res.header("Access-Control-Allow-Credentials", true);

res.setHeader("Set-Cookie", "key=value; HttpOnly; SameSite=None")

next();

});

 

프론트에서

const config={

headers:{

Accept:'application/json',

'Content-Type': 'application/json',

Cache:'no-cache'

},

withCredentials: true

}

 

헤더에 access-control-allow-origin 추가, credential:true 추가, samesite=none, secure=true 추가라는 3가지 방법을 모두 적용한 후에야 해결이 되었다.

 

 

 

참고사이트

-React 브라우저에 쿠키 저장 안되는 문제

velog.io/@yhe228/react-router-props-axios-cookie-get-set

 

-Cookie SameSite

ifuwanna.tistory.com/223

 

-SameSite -stackoverflow

stackoverflow.com/questions/42717210/samesite-cookie-in-java-application

 

 

-CORS 관련

blog.naver.com/PostView.nhn?blogId=hs88610&logNo=221709466083

chodragon9.github.io/blog/cors-and-http-cookie/