DIL: 모던 리액트 딥 다이브, 8주차-2

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week8-2_2024-04-25

| -------- | ---------- | -------------------------------------------------------- | ----------- | | DIL 주차 | 범위 | 내용 | 오늘차 진도 | | 8주차 | 14장, 15장 | 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈, 마치며 | 881~884p |

오늘 읽은 내용을 markdown으로 간단히 메모

---

• dangerouslySetInnerHTML은 왜 존재?
  • 기본적으로 리액트는 XSS를 방어하기 위해 이스케이프 작업이 존재하기 때문
  • <div id={<span><svg/onload=alert(origin)></span>}>은 alret이 실행되지 않음
• getServerSideProps와 서버 컴포넌트 주의하기
  • 서버라는 개발환경을 프론트엔드에게 쥐어줌
  • 성능 이점 + 주의점

예제-a

• getServerSideProps가 반환하는 props값은?
  • 사용자의 HTML에 기록됨
  • 전역 변수로 등록되어 접근 가능

export default function App({ cookie }: { cookie: string }) {
  if (!validateCookie(cookie)) {
    Router.replace(/* */); // 서버 사이드에서 처리할 수도 있는 리다이렉트를 클라이언트에서 실행해서 손해
    return null;
  }
  ...
}
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const cookie = ctx.req.headers.cookie || ""
  return {
    props: {
      cookie
    }
  }
}

예제-b

• 쿠키 자체를 제공x, 클라이언트에서 필요한 token만 제한적으로 반환
  • 값이 없을 때 리디렉션? 서버에서 처리한다
  • 쿠키 노출을 막고 리다이렉트가 빠르다
• 이런 접근법 > getServerSideProps나 서버 컴포넌트 뿐만 아니라, 리덕스나 서버사이드에서 가져온 window.__PRELOADED_STATE__와 같은 값을 데이터를 초기화할 때도 적용
• window.__PRELOADED_STATE__ 값은 XSS에 취약할 수 있으므로, 새니타이즈하고 꼭 필요한 값만 제공해야 한다~

export default function App({ token }: { token: string }) {
  const user = JSON.parse(window.atob(token.split(".")[1]));
  const user_id = user.user_id;
  ...
}

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const cookie = ctx.req.headers.cookie || ""
  const token = validateCookie(cookie);

  if(!token){
    return {
      redirect: {
       destination: '/404',
       permanent: false
     }
   }
  }

  return {
    props: {
      token
    }
  }
}