웹에디터, 다이나믹 임포트, 웹 공격, react-quill

8/10

작성한 내용의 앞 뒤로 <u> <strong> 등의 태그를 붙여서 데이터베이스에 저장했을 뿐이었다.
이 내용들이 문자열이 아닌, 태그의 기능 그 자체로 인식하게 만들기 위해 dangerouslySetInnerHTML 이라는 속성을 사용해서 해결했다.

여기서 한가지 호기심이 생길 수 있다.
<script></script> 태그처럼 자바스크립트로 해킹 기능을 작성하면...?

이 때, 누군가 글 상세보기를 클릭하면, 작성된 자바스크립트 코드가 실행될 것이고, 
해킹(예, 토큰 탈취, 탈취된 토큰으로 유해 게시물 생성 및 중요 게시물 삭제 등)을 당할 수 있다.
react-quill 라이브러리에서는 이를 사전에 차단해 준다. (태그를 의미하는 단어인 '<', '>' 등을 &lt, &gt와 같이 변경하여 차단)

하지만, react-quill만 믿고 방심 했다가는, 다른 어느 곳에 취약점이 있을지 모른다.
(연습했던 토큰 탈취 예제를 떠올려 보자.)

따라서, 이러한 코드를 방지하기 위해, dompurify의 sanitize를 활용하여 막아줬다.
이러한 코딩을 시큐어코딩 이라고 합니다.

dompurify 또는 react-quill 등의 라이브러리를 사용하기 위해 react와 next의 구조적인 차이를 이해해야할 필요가 있었다.
next는 서버사이드렌더링(SSR)을 지원하는 react 전용 서버사이드 프레임워크이기 때문에, 프론트엔드 서버에서 먼저 한 번 그려지고,
브라우저에서 다운로드 받은 html, css, javascript를 다시 한 번 그리게 된다.(브라우저에서는 태그의 위치 구조 정도만 그려진다.)
이 두가지의 구조를 비교하는 과정을 diffing, 이 내용들을 종합적으로 브라우저에 그려내는 과정을 hydration(하이드레이션) 이라고 했었죠!

여기서 중요한 점! 서버에서 그릴 때는 browser가 없기 때문에, document, window 이런 녀석들이 존재하지 않는다.
따라서, localStorage에 접근하는 로직, 브라우저에서 사용하는 웹에디터 등은 서버사이드에서는 무시할 필요가 있다.
이를 위해 특정 라이브러리들은 다이나믹 임포트로 브라우저(=클라이언트사이드)에서만 임포트할 수 있도록 적용해 주는 방법이 있다.
또한, if(typeof window === "undefined") 를 사용하여 서버에서 처리할 내용(또는 그 반대 !==를 활용하여 브라우저에만 처리할 내용)을 적어주는 방법이 있다.

오늘 진행됐던 해킹 기법은 XSS(Cross-Site-Script).
스크립트 작성해서 공격하는 방법이다.
이와 비슷하게 CSRF(Cross-Site-Request-Fogery) 공격 기법이 있다.
XSS랑 비슷한데, 탈취한 토큰으로 API 를 요청하는 공격 방법이다.
이러한 보안 이슈들은 OWASP TOP 10 이라고 검색하면,
최근 많이 사용되는 공격기법 10가지가 소개된다. 이는 3~4년 주기로 업데이트된다.

서비스 규모가 커질수록 중요한 부분이다. 

 

그동안 텍스트 에어리어로 단순히 사용했다

react-quill

yarn add react-quill

 

훅폼 쓰면서 필요 없음(온클릭버튼)

async

aaa면 aaa

 

왼쪽 등록하기
오른쪽 보여주기

벨류를 말함

set벨류 = 강제로 넣게 됨

내용을 변경하면 강제로 리액트 훅 폼에 넣게 됨

 

한번 먼저 보여주고 브라우져로 가는 것
하이드레이션
윈도우가 없다는 건 서버를 말함

임폴트를 관리해야함
다이나믹 임폴트

브라우져에서만 불러줘~ = 다이나믹 임폴트
서버에서는 그리지마~ = {ssr: false}

 

& 엔퍼센트 &

XSS

 

DOMPurify = 방어

4개 페이지

검증

강제로 넣었기 때문에 체인지했다는 알림을 줘야함

트리거 22번줄과 48번줄

태그가 남음
비어있으면 내용을 입력해주세요 - 이런식으로 하는데 남아있는 것

강제로 없는걸로 바꿔야 한다