[로그인 구현하기 #3] 다시 만난 CORS

전에 네이버로부터 전달받은 토큰을 백엔드에 post 요청으로 전달하고자 한다.

CORS error!

오랜만에 cors 에러가 발생했다...

로컬에서 http 요청이 이루어졌기 때문이다.

1. 확장프로그램 "Allow CORS" 사용

이를 해결하기 위해 구글 확장프로그램인 Allow CORS 를 설치하고 활성화했다.
하지만 여전히 CORS error !

확장프로그램 자체 테스트 페이지에서는 모든 요청이 allow 됨.

why?

코멘트들을 보아하니 꽤 오래전부터 작동을 멈추었다는 말들이 있다.

ok.. 다른 해결책을 찾자.

2. 프록시 서버 사용

헤로쿠 프록시 서버에 임시 사용 허가를 받았다.
프록시 역시 악의적인 사용이 가능하기 때문에 임시 데모 서버를 통해 시간제한으로 사용이 가능하다.

요청url 앞에 헤로쿠 프록시 서버 주소를 넣어주면 해당 url을 프록시 서버가 가로채서 요청한다.

정상적으로 요청이 되었고 CORS error 를 임시로 해결할 수 있었다!
하지만 이는 임시방편이기 때문에 테스트를 목적으로 사용해야 한다.

LocalStorage vs Cookie

자 이제 서비스 토큰을 가져오는데 성공했는데...
이 토큰을 어디에 저장하고 사용할 것이냐
로컬스토리지냐! 쿠키냐!
양쪽다 장단점이 존재한다.

LocalStorage

장점

• CSRF 공격으로부터 안전하다.

단점

• XSS 공격으로부터 취약하다.

Cookie

장점

• XSS 공격으로부터 비교적 안전하다. 하지만 완전한 보안은 되지않음.

단점

• CSRF 공격에 취약하다.

쿠키는 XSS 공격으로부터 완전한 방어를 할수 없다는 점에서 로컬스토리지를 이용하기로 했다.

로컬스토리지에 토큰을 저장, 제거하는 reducer 생성

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface tokenTypes {
  token: string | undefined;
}

const initialState: tokenTypes = {
  token: undefined,
};

const tokenSlice = createSlice({
  name: 'token',
  initialState,
  reducers: {
    saveTokenAction: (state: tokenTypes, action: PayloadAction<{ token: string }>) => {
      const { token } = action.payload;
      state.token = token;
    },
    deleteTokenAction: (state: tokenTypes) => {
      state.token = undefined;
    },
  },
});

export const { saveTokenAction } = tokenSlice.actions;
export default tokenSlice.reducer;

callback.tsx

const dispatch = useDispatch();
  const postToken = async (_token: string) => {
    await axios
      .post(BACKEND_URL, {
        accessToken: _token,
      })
      .then((res) => {
        dispatch(saveTokenAction(res.data.accessToken));
      });
  };

reducer 를 이용해 응답받은 서비스 토큰을 state 에 저장!

// header.js
{token ? <LogOutButton/>: <LogInButton />}

state 에 저장된 token 값의 유무를 판단하여 로그인 or 로그아웃 버튼생성!

마치며..

CORS 에러 덕에 조금 길어졌는데....쨌든 오랜만에 만나서 반가웠고
다음 편에는 로컬스토리지를 통해 로그인 유지 및 로그아웃 작업내용을 기록할것이다!