오늘의 목표
- 웹에디터
- cross-site-script
- 하이드레이션에서css문제 발생
- 웹에디터
react-draft-wysiwyg
react quill
react quill은 프리렌더링 하지말고 브라우저에서만 실행시켜야 한다
임포트가 아예 되지 않아서 문제가 됨
그래서 다이나믹 임포트를 활용해서
import dynamic from "next/dynamic";
넥스트렌더링은 프리렌더링을 제공해서 오류가 생기고 리액트는 프리렌더링이 아직 지원이 안되서 오류가 안생길 수도
리액트 훅 폼이랑 사용할라면
react quill을 강제로 넣어줘야됨
그걸 setValue를 이용해서 넣어준다
아무것도 안남았을때 react quill 에서는
태그가 남는다
그래서
setValue("contents", value === "
react quill로 데이터를 넘기면 태그들이 문자열로 인식되어서 같이 넘어옴
이를 해결하기 위해서
dangerouslySetInnerHTML={ __html: data?.fetchBoard.contents,}
하면 되는데 별로 좋지 않음
이러면
- Cross-site-script(XSS)
백엔드로 직접 건드리게 되면 토큰 탈취같은 일이 발생할 수 있어서
dangerouslySetInnerHTML은 위험함
이걸 막는 라이브러리로는
dompurify가 있다
이것도 프리렌더링때 오류나기 때문에 브라우저에서만 실행하도록 해야됨
해킹관한 지식
- 이상한 css
그냥 div하나 만들자
적는 자만이 생존한다.