TIL 26

Web-Editor

• react-quill
• react-draft-wysiwvg

웹 에디터의 대표적 라이브러리들이고, 여기서는 react-quill을 다룬다.

yarn add react-quill 

로 설치해주고

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'

를 통해 임포트해주어 사용한다.

• ReferenceError: document is not defined

라는 에러는 html dom 관련한 에러이다.
웹에디터를 사용할때는 Br에서 FE에 요청할 떄 프리랜더링 과정에서 document, window등이 없기 떄문에 발생한 에러.

이럴 경우 사용하려는 라이브러리를 useEffect 혹은 서버가 아닐 때 랜더링되게끔 설정해서 해결할 수 있지만 ‘process.browser’ 이런식으로 브라우저일 때 실행하라는 명령어를 입력해도 같은 오류가 난다.
그 이유는 임포트 자체가 안되기 때문인데 이 해결책은 상태가 브라우저 일때만 임포르해서 가져오게 설정을 해주면 되고 이를 동적 임포트라고 한다.
즉, 서버에서는 임포트를 하지 않고 브라우저에서 임포트하게 설정하는 것.

import dynamic from 'next/dynamic

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

위의 코드와 같은 방법으로 동적 임포트를 설정해 줄 수 있다.

웹 에디터를 통해 작성한 내용은 그대로 출력할 경우 문자열로 인식되어 태그 자체가 출력된다.
따라서

<div
        dangerouslySetInnerHTML={{
          __html: String(data?.fetchBoard.contents),
        }}
      ></div>

이런식으로 문자열이 아닌 태그로 인식하게끔 설정을 해줘야 하지만 이렇게 태그를 설정해주는 경우 외부 공격에 노출될 수 있다. 즉 위험한 방법.
대표적으로는 XSS 공격에 노출된다.

Cross-Site-Script (XSS)

다른 사이트에 접속해 스크립트를 주입해서 정보를 탈취하는 공격
태그 자체를 출력하지 않게끔 하려고 작성한 태그가 잘못된 값으로 실행되지 않을 경우 onerror=‘’ 옵션을 통해 따옴표 내의 코드가 실행되게끔 설정할 수 있는데 이를 이용해 일부러 잘못된 값을 넣고 onerror 옵션에 악의적인 코드를 적어서 토큰 등의 정보를 탈취할 수 있다

react-quill 에서는 물론 꺽쇠를 다른 문자로 바꿔 위험할 수 있는 문자를 방어해주지만 BE에 공격이 들어간다면 치명적일 수 있으나 라이브러리를 사용해 이런 공격을 차단하는 방법도 있다.

yarn add dompurify 
yarn add @types/dompurify —dev

를 통해 설치하고

import Dompurify from "dompurify";

임포트를 통해 불러와준 후 출력하고자 하는 문자열에

{process.browser && (
        <div
          dangerouslySetInnerHTML={{
            __html: Dompurify.sanitize(String(data?.fetchBoard.contents)),
          }}
        ></div>
      )}

Dompurify.sanitize() 를 통해 공격 차단이 가능하다.

SQL-Injection

login API
if(id=== $id && pw === $pw){
	login()
}

라는 로그인 API가 있다고 가정할 때,
id :a@a.com
pw: asd || 1===1
을 작성한다.
그러면 로그인 API의 조건에서 pw 부분의 ‘ || 1===1’ 때문에 비밀번호도 true라는 값이 리턴되어 로그인을 성공하게 만드는 방식이다.

BE작성시 ORM을 통해 이런 공격을 방지할 수 있다.

Hydration-Issue

pre-render 와 Br의 랜더 결과를 비교하는 diffing 과정에서 모든 요소를 비교할 수는 없으니 태그끼리 구조를 비교하고 차이가 없다면 결과를 그려주는 hydration이 발생한다.

hydration-issue는 diffing과정에서 프리랜더링의 태그 갯수가 차이나기 때문에 마지막 hydration과정에서 발생한다.
결국 개수를 비교하기 때문에 이런 문제를 해결하기 위해서는 태그의 개수를 맞춰주어야 한다.

즉 삼항 연산자 등의 연산을 사용할 경우 데이터가 false일때 보여주는 쪽의 조건에 빈 값을 넣으면 서버에서는 인식하지 못하지만 브라우저에서는 인식해서 생기는 태그 개수의 차이를 빈 태그를 넣어서라도 맞춰줘야한다는 뜻이다.