211230 Redux 보안

Posted on In

Redux

Rules of Reducers

  • state와 action을 통해서만 새로운 state가 계산되어야 함
  • state는 불변성을 지키면서 업데이트해야함.
  • 순수 함수 여야 함. random이나, asycLogic 등 side effects를 발생시키지 말아야 함.

이렇게 해야하는 이유?

  • state 와 action만으로 새로운 상태가 나오기 때문에 예측하기 쉽고, test 하기 쉽다.
  • 그렇지 않다면 어떻게 동작하는지 어떤 결과를 리턴하는지 알 수 없게 된다.
  • Redux가 올바르게 동작하지 못하게 하여서 bug를 유발한다.

Redux Toolkit에 createSlice 는 내부적으로 immer 라이브러리를 사용하여 immutable 하게 업데이트 하는 작업을 편하게 해준다. immer 는 state 를 Proxy 객체로 감싸고 변경사항이 있을대 비교하여 immutable 한 state 를 반환할수 있게 해준다.

→ 내부적으로 immer 를 사용하는 createSlice 나 createReducer 를 사용하지 않는다면 immutable 하게 객체를 업데이트해야 한다.

Writing Async Logic with Thunks

RTK 는 내부적으로 redux-thunk 를 포함한다. createAsyncThunk 를 사용하면 Thunk를 쉽게 생성할 수 있다.

보안

  • Local Storage 정보는 XSS Attack 으로 도난 당할 수 있다.

XSS Attack 이란?

(Cross-Site Scripting Attack)

  • injection 관련 보안 이슈
  • 사용자가 신뢰하는 웹사이트에 스크립트를 주입해서 정보를 빼내거나 의도치 않은 작업을 하는 것, 웹 어플리케이션, 통상적으로 form 안에 input을 통해서 주입한다.
  • 헤커가 자바스크립트를 준비해서 웹사이트에 숨겨 놓는다.
  • 사용자가 이용하다가 숨겨진 스크립트에 의해 쿠키나 localStorage에 정보를 attacker 에게 전달할수 있다.
  • 민감한 정보를 localStorage에 저장하면 안됨..
  • 해결 방법
    • 메모리 상의 저장 → 브라우저 나가면 로그인 유지 되지 않는다거나 사용자 경험이 떨어짐
    • 쿠키를 사용하는데, http only 옵션을 넣어줌.→ 브라우저만 쿠키 정보를 읽을 수 있도록 함. 자바스크립트로 읽을 수 없게함. 만료 기간을 설정하면 만료 전까진 쿠키에 유지 됨.
      • 모바일 클라이언트엔 적용할 수 없음.
      • CSRF attack에는 취약함.
  • 서버에서는 cors 에 creadentials를 true (Access-Control-Allow-Credentials)로 설정하고 http only로 쿠키를 보내주어야 한다.
  • 헤더에 cookie로 넣어버리면? 모바일 클라이언트는 문제가 생김, 일단은 그대로 바디로 token을 넘겨주기도 하고, header로 설정하기도 해야 함.
  • 서버에 auth 부분에서는 Cookie 도 확인하고 Header도 확인해야 함. 모바일 클라이언트도 있기 때문에