dompurify

예시로 들었던 스크립트를 활용한 토큰 탈취 처럼 취약점을 노려서 javascript와 HTML로 악의적 코드를 웹 브라우저에 심어, 사용자 접속시 그 악성코드가 실행되는 것을 크로스 사이드 스크립트 라고 합니다.

이 문제에 대한 방어법중 하나는 dompurify 입니다.

yarn add dompurify
yarn add -D @types/dompurify

코드에 적용시켜 안정성을 확보할 시간입니다!

하지만 지금은 발생하지 않지만 이렇게 작성해을 주면 Hydration Issue가 생깁니다.

여기서 하이드레이션은 렌더링 결과물의 컴포넌트를 확인하고 각 컴포넌트의 이벤트들을 실제 DOM에 걸어주는데, 이 경우 SSR 시 렌더링되는 컴포넌트와 CSR 시 렌더링되는 컴포넌트가 있기에 DOM 에서 읽어주는 순서가 꼬이게 되어버린다. 이를 방지하기위해 SSR / CSR 렌더링 컴포넌트를 동일하기 주기 위해 빈값을 넣어주어 해결해 줍니다.