[쿠키] Javascript로 쿠키에 직접 접근, HttpOnly, CORS

 

 

서버에서 쿠키를 만든 후, Vue에서 응답 쿠키를 확인하려고 했지만

Vue를 사용하는 브라우저에 쿠키가 들어오지 않았다.

 

 

 

이유는 서버에서 쿠키는 HttpOnly를 true로 브라우저에게 전송한다.

HttpOnly로 설정된 쿠키는 브라우저에서 실행하는 JS로 "직접 접근"할 수가 없다.

 

 

XSS공격으로 자바스크립트를 이용한 쿠키 탈취를 할 수 있기 때문에 막아둔 것.

 - 브라우저의 저장된 쿠키를 사용자가 모르게 실행시켜서, 해커 자신의 서버로 전송할 수 없도록 한다.

 

 

쿠키에는 Secure 설정도 해줄 수 있는데,

Secure true 쿠키는 https를 이용해야만 서버로 전달해줄 수 있다.

응답으로 브라우저에 저장은 가능하다.

 

 

---

 

해결

 

 

{ withCredentials: true } 로 설정하면 브라우저에 쿠키가 전달된다.

서버에서도 Credentials 설정을 true로 해줘야 한다.

브라우저가 쿠키 저장, 전송 처리를 허가해준다.

 

 

withCredentials

Same Origin일 경우 Request, Response 에 쿠키가 전달되지만,

Cross Origin일 경우 쿠키가 전달되지 않는다. Cross Origin의 기본은 쿠키 전송이 false이다.

true 값을 주어 전달되도록 설정해주어야한다.

인증과 인가에 사용되는 쿠키와 토큰 등을 공유하겠다는 의미

 

추가적으로, 헤더 authorization 요청을 보낼때도 허가해줘야 한다.

 

 

 

 

처리 이후 브라우저에 쿠키가 브라우저에 저장된 것을 볼 수 있었다.

 

 

 

 

 

 

 

 

 

---