[ TIL ] 2022-06-13

XSS 공격이란?

• Cross-Site Scripting
• 관리자 권한이 없는 사람이 웹 사이트에 악성 스크립트를 삽입하는 공격으로, 스크립트 내용에 따라 쿠키, 세션, 토큰 등의 탈취가 가능해진다.

방지 방법
1. <, > 등의 문자를 필터링 해주는 방법

• 직접 필터를 만들어도 되고, 라이브러리(ex. lucy-xss-filter)를 사용해도 됨

2. 쿠키에 httpOnly 를 설정하면 javascript 에서 쿠키에 접근이 불가함(쿠키에만 해당하는 방지법)

• 하지만 이는 API 콜을 요청하면 httpOnly 쿠키에 담긴 값들도 함께 보내지므로, 취약점이 있다
  (이를 방지하기 위해 쿠키에는 refreshToken 만 저장, accessToken 은 요청 시 받아오는 방식을 사용할 수 있다)

참고 - 테코블 innerHTML의 위험성, XSS에 대해 알아보자
참고 - 프론트에서 안전하게 로그인 처리하는 법
참고 - XSS

에러 일지

Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.

언마운트 된 컴포넌트에서는 상태를 업데이트할 수 없다는 에러.
useEffect 안에서 비동기 함수를 mount 조건에 따라 다룸으로써 해결하는 방법이 많았는데(참고 블로그), 에러의 위치 자체를 파악하기가 어려웠다.
처음엔 하나씩 주석 처리를 하면서 에러 발생 위치를 찾았으나, 어딘지 알 수가 없었다.

그런데 localStorage 에 data 가 저장된 상태에서는 에러가 발생하지 않았다. recoil 로 state 를 생성할 때, 초깃값으로 storage 에 있는 데이터를 받아오거나, 비동기로 넣어주는데, 이 부분이 문제가 된 것 같았다.

// data.ts

const storedData = store.get('data')
const data = storedData || getData().then((res) => res)

export const dataListState = atom<IContentDetail[] | []>({
  key: '#dataListState',
  default: data,
})

결론적으로 useEffect 안에서 localStorage 에 data 를 set 해주는 코드를 넣어줌으로써 해결했다.
이 방법이 최선이었을지는 모르겠다.

// Home.tsx
  useEffect(() => {
    if (data.length) {
      store.set('data', data)
    }
  }, [data])