Web-Editor
게시판을 작성할때 글자의 스타일을 줄 수 있는 웹 에디터이다. 글자의 크기, 진하게, 기울기, 밑줄 등 원하는 스타일을 지정해 줄 수 있다.
웹 에디터에는 많은 종류의 라이브러리가 있는데 대표적으로는 React-draft-wyswiyg과 React-quill이 있으며, React-quill을 사용해 보았다.
yarn add react-quill
import "react-quill/dist/quill.snow.css";
React-quill을 다운받고 css또한 import 시켜준다.
React에서 React-quill을 사용한다면 에러가 나지않지만 Next에서 실행할 경우에는 에러가 발생하게 되는데, Next의 Pre-rendering과정 중에 document, window와 같은 속성이 없기 때문에 발생하는 오류이다.
typeof Window !=== 'undefined'
useEffect()
process.browser
이 3가지 방법을 써도 오류는 사라지지 않는다.
왜냐하면 import 자체를 못하기 때문인데, 이를 해결하기 위해서 브라우저 자체에 import를 시켜줘야 하고, 이를 위해 Dynamic-import를 이용해야 한다.
dynamic을 "next/dynamic"에서 가져오고, 가져온 dynamic내에서 react-quill을 가져와 ServerSideRendering은 하지 않도록 설정해 준다.
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
Hook-form과 함께 사용할 때는 register로 인식시켜줄 수 없고, 자동으로 onChange인식이 적용되지 않아 setValue()를 사용해 값을 넣어주고, trigger()를 통해 changeEvent를 감지하여 Hook-form에 알려주어야 한다.
웹 에디터의 원리는 작성한 내용 앞 뒤로
<u> <strong>과 같은 태그를 붙여서 데이터베이스에 저장하는 방식이다.
이 내용들을 문자열이 아닌, 태그의 기능 그 자체로 인식하게 만들기 위해서는 dangerouslySetInnerHTML이라는 속성을 사용해야 하지만 보안의 문제가 생긴다.
XSS(CrossSiteScript)
dangerouslySetInnerHTML에 누군가가 악의적으로
<script></script>태그처럼 자바스크립트로 해킹기능을 작성해놨다면, 누군가가 해당 글을 클릭했을때 작성된 자바스크립트 코드가 실행될 것이고, 이를 통해 해킹(ex>토큰 탈취)을 당할 수 있다.
React-quill의 경우에는 태그를 의미하는 단어인 '>' , '<' 등을 '$gt', '%lt'와 같이 변경하여 문제가 발생하지 않도록 사전에 차단해 주었지만 다른 여러가지 방식으로 취약점을 뚫고 해킹을 시도할 수 있다. 따라서, 이러한 코드를 방지하기 위해 보안을 강화할 부분에 dompurify의 sanitize를 활용하여 막아줄 수 있으며, 이를 시큐어코딩이라 한다.
Hydration-Issue
Web-Editor에서 설명했듯이 Next의 경우 Pre-rendering이 실행되고 diffing 과정이 실행되며, 서버와 브라우저 에서의 태그를 비교하고 서버에서 한번 그려준 내용을 브라우저에 그려내는 과정을 Hydration 이라 하는데 이때 발생하는 오류이다. 이를 해결하기 위해서는 브라우저에서 그릴때의 태그 개수와 서버 안의 태그 개수를 맞춰주면 CSS오류를 해결할 수 있다.
방법으로는 Browser가 아닐때 실행되는 조건을 적어주고 해당 조건에 빈 태그를 보여주는 조건을 걸어 태그의 개수를 맞추면 오류를 해결할 수 있따.
