[NNN]_credentials 로 쿠키 공유하기(Unauthuorized Error)

개요

게시글 작성, 댓글 작성 기능을 마치고, 테스트해보면서 Unauthorized error 가 생겼다.

보통 Unathorized error 는 서로 도메인이 다른 브라우저와 백엔드 서버 간 쿠키를 전달하지 못하면서 사용자의 권한이 없다고 생각하고, 서버에서 오류를 일으킨다는 것을 알았다.

서버는 쿠키를 통해 유저를 식별하는데, 이 쿠키가 서버에서 보내지 못했기에 브라우저엔 없었던 것이다.

 

쿠키를 다른 도메인 간 전달하고 싶다면, credentials 라는 속성을 이용한다면, 다른 도메인일지라도 CORS 에서와 마찬가지로 보낼 수 있다.

 

1. credentials 속성 추가

back/app.js

(...)
// [CORS error] 모든 브라우저에서 api 사용 허용
app.use(
  cors({
    origin: '*',
    credentials: true,
  })
);
(...)

• 기본 값이 false 로 설정되어 있던 credentials 를 true 로 변경하면, 쿠키를 다른 도메인이라도 보낼 수 있음

 

front/sagas/post.js

(...)
function addPostAPI(data) {
  return axios.post('/post', { content: data }, { withCredentials: true });
}

function removePostAPI(data) {
  return axios.delete('/api/post', data, { withCredentials: true });
}

function addCommentAPI(data) {
  return axios.post(`/post/${data.postId}/comment`, data, { withCredentials: true });
}
(...)

• front 에서도 api 에서 기본 값이 false 로 설정되어 있던 withCredentials 을 true 로 변경하면 됨.
• 하지만, 중복된 코드를 줄이기 위해 아래와 같이 sagas 의 중앙통제실인 index.js 에서 axios 로 디폴트 설정하면, 실수로 놓치지 않을 수 있고, 용량을 줄일 수도 있다.

 

front/sagas/index.js

(...)
axios.defaults.baseURL = 'http://localhost:3065';
axios.defaults.withCredentials = true;
(...)

 

 

2. 정확한 주소 명시 or true

안심하고, 로그인을 했지만, 다음 오류를 또 맞았다. 이번 오류는 CORS 정책을 위반했다는 내용인데, 혹시 건드린 부분이 있는지 확인해보았지만, 그렇지 않았고, 또 이유를 찾아야 했다.

 

알고 보니, 이는 서버에서 CORS 헤더 중 'Access-Control-Allow-Origin' 헤더를 '*'로 설정했는데, 동시에 요청의 credentials mode가 'include'로 설정되어 있어 발생한 문제였던 것이다.

'Access-Control-Allow-Origin' 헤더를 '*'로 설정하는 것은 보안 이슈를 발생시키고 특히, 요청의 credentials mode가 'include'로 설정되어 있을 때, 허용되는 도메인을 명시하는 것이 안전하기 때문. 웹 어플리케이션이 다른 도메인에서 접근하려는 시도를 명시적으로 허용할 수 있으며, 보안상의 문제를 방지하고자, 이런 오류가 있는 것 같다.

 

back/app.js

(...)
// [CORS error] 모든 브라우저에서 api 사용 허용
app.use(
  cors({
    origin: true,
    credentials: true,
  })
);
(...)