27일차 / Web-Editor, Cross-Site-Script(XSS), Hydration-Issue

Web-Editor

웹에디터

React Draft Wysiwyg

Wysiwyg : 위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")

Toast Ui Editor

React Quill

우리는 React Quill을 사용해 볼 것

yarn add react-quill

CommonJs는 옛날방식
ES6는 최신방식이라고 생각하면 된다.

여기서의 onChange는 라이브러리를 만든 사람들이 만든 함수이름이므로 헷갈리지 말 것!

ReactQuill을 바로 실행시키려고 하면 에러가 뜬다.
에디터는 서버에서 만들 수도 없고 필요도 없는 것. 실행 될 이유가 없다.
이것은 브라우저에서만 실행되어야하는 라이브러리인데, 프론트엔드 서버에서 실행되어서 에러가 나는 것이다.
{typeof window !== "undefined"} 을 추가해도 에러가 나는데,
이때는 임포트 자체도 되지 않고 있다는 것이다.
따라서 다이나믹 임포트를 해본다.

우리는 React의 기반의 Next.js 프레임워크를 쓰고있기 때문에 프리렌더링 같은 기능을 지원한다.
React에서 라이브러리를 사용하면 프리렌더링 과정이 없기 때문에 오류가 나지 않지만 Next.js의 프리렌더링 때문에 오류가 나고 있으므로 다이나믹 임포트를 해주어야한다.

이 때 서버에서도 임포트를 할 것인지 {ssr: false} 정할 수 있다.
*브라우저 = 클라이언트

hook-form과 함께 사용

여기서 한 가지 문제가 발생

내용에 아무것도 입력하지 않으면 빈 값이 나오지 않고 태그가 나온다.
그래서 이것을 빈 값으로 설정한다.

react-hook-form의 trigger를 사용해 onChange를 전달한다.

뮤테이션 했을 때 태그가 아니라 태그가 적용된 화면을 보고싶다면?

dangerouslySetInnerHTML을 활용해 태그가 적용된 모습을 확인할 수 있다.

Cross-Site-Script(XSS)

스크립트 공격

editor 안에서 <>를 인식하지 못하게 되는 것은 react Qyill의 기능이지만

내용에 자바 스크립트를 작성할 수 있으므로 토큰 탈취 등의 해킹의 위험이 있기 때문에 SetInnerHTML은 위험하다.

이걸 어떻게 막을 수 있을까?

yarn add dompurify
import DOMPurify from "dompurify";

Dompurify로 데이터를 감싸준다.

Dompurify?
DOMPurify는 HTML을 삭제하고 XSS 공격을 방지합니다. DOMPurify에 더티 HTML로 가득 찬 문자열을 제공하면 깨끗한 HTML이 포함된 문자열(달리 구성하지 않는 한)을 반환합니다.
DOMPurify는 위험한 HTML을 포함하는 모든 것을 제거하여 XSS 공격 및 기타 불쾌감을 방지합니다. 그것도 엄청나게 빠릅니다. 우리는 브라우저가 제공하는 기술을 사용하고 이를 XSS 필터로 바꿉니다. 브라우저가 빠를수록 DOMPurify가 빨라집니다.

이것을 Cross-Site-Script => XSS라고 한다.

브라우저가 있고, 백엔드 부분, 데이터베이스가 있다.
이메일과 비밀번호를 입력하고 로그인을 클릭해서 login이라는 api를 요청한다.
데이터베이스에서는 비밀번호가 일치하는지 확인하고 액세스 토큰을 넘겨준다.
그 다음부터 액세스 토큰을 가지고 게시물 등록 등이 가능해지게 된다.

if(email === a@a.com && pw === 1234) {
  // accessToken 프론트에 보내줘
}

만약 백엔드에서 코드를 작성을 이렇게 했고,
비밀번호를 qqq || 1 === 1 (true)이라고 입력했을 때, 로그인이 성사가 되는 것이다.
이러한 SQL Injection은 ORM을 사용하면 막힌다.

Hydration-Issue

이상한 CSS

=> 내용 color를 blue로 지정했지만 적용X

프론트엔드 서버에서 프리렌더링을 전부 하는 것이 아니다.
브라우저에서 완전히 렌더링을 완료했을 때를 hydration이라고 한다.

프론트엔드 서버에서 프리렌더링을 할 때는 Dompurify 때문에 div 1개가 빠져서 렌더링이 됐고 브라우저에서는 div 4개가 렌더링이 됐지만 프리렌더링에서 렌더링이 전부 되지 않았던 것처럼 스타일이 적용되지 않고 렌더링이 되어버린다.
이것을 hyrdation Issue라고 한다.

그래서 서버에서 그릴 때도 div 갯수를 맞춰서 만들어야한다.

빈 div를 만들어서 스타일만 적용해주어도 적용이 된다.