220420_TIL

오늘의 목표

1. 웹에디터
2. cross-site-script
3. 하이드레이션에서css문제 발생

1. 웹에디터

react-draft-wysiwyg
react quill

react quill은 프리렌더링 하지말고 브라우저에서만 실행시켜야 한다

임포트가 아예 되지 않아서 문제가 됨
그래서 다이나믹 임포트를 활용해서

import dynamic from "next/dynamic";

넥스트렌더링은 프리렌더링을 제공해서 오류가 생기고 리액트는 프리렌더링이 아직 지원이 안되서 오류가 안생길 수도

리액트 훅 폼이랑 사용할라면
react quill을 강제로 넣어줘야됨

그걸 setValue를 이용해서 넣어준다

아무것도 안남았을때 react quill 에서는

로 가운데에
태그가 남는다

그래서
setValue("contents", value === "

" ? "" : value); 로 해줘야 빈칸임을 인식함

react quill로 데이터를 넘기면 태그들이 문자열로 인식되어서 같이 넘어옴
이를 해결하기 위해서
dangerouslySetInnerHTML={ __html: data?.fetchBoard.contents,}
하면 되는데 별로 좋지 않음

이러면

2. Cross-site-script(XSS)

백엔드로 직접 건드리게 되면 토큰 탈취같은 일이 발생할 수 있어서
dangerouslySetInnerHTML은 위험함

이걸 막는 라이브러리로는
dompurify가 있다
이것도 프리렌더링때 오류나기 때문에 브라우저에서만 실행하도록 해야됨

해킹관한 지식

3. 이상한 css

그냥 div하나 만들자