Day-37
어제 못다한 typeof window !=== 'undefined' 을 검색해 보다가 오늘 에디터 라이브러리를 설치 하면서 배운것들이 있다.
크게 보면 Next 와 React의 차이로 서버 사이드 렌더링을 지원 하냐 안하냐의 차이였고, 윈도우가 없다는 것은 서버를 의미한다.라고 입력해줘야 했다.
다양한 웹 공격중에서 xxs(Cross-Site Scripting)에 대해 살짝 알아 보았다.
- 웹 에디터
- 다이나믹 임폴트
- Html 삽입
- 웹 공격(XXS)
1. 웹 에디터(Web Editor)
대표적인 에디터 라이브러리
draft
사용법은 npm에 있는 그대로 ReactQuill을 불러와서 사용 하면된다.
▶︎사용시 문제점 1
라이브러리 설치하고 사용하려고 할때 가끔
이러한 에러가 뜨는 경우가 있다.
react와 next의 구조적인 차이를 이해해야할 필요가 있었고
next는 서버사이드렌더링(SSR)을 지원하는 react 전용 서버사이드 프레임워크이기 때문에, 프론트엔드 서버에서 먼저 한 번 그려지고,
브라우저에서 다운로드 받은 html, css, javascript를 다시 한 번 그리게 된다.
(이 때는 태그의 위치 구조 정도만 그림)
이 두가지의 구조를 비교하는 과정을 diffing, 이 내용들을 종합적으로 브라우저에 그려내는 과정을 hydration(하이드레이션)
여기서 중요한 점!, 서버에서 그릴 때는 browser가 없기 때문에, document, window 이런 녀석들이 존재하지 않는다.
따라서, localStorage에 접근하는 로직, 브라우저에서 사용하는 웹에디터 등은 서버사이드에서는 무시 할 필요가 있다..
이를 위해 특정 라이브러리들은 다이나믹 임포트로 브라우저(=클라이언트사이드)에서만 임포트할 수 있도록 적용해 주는 방법!
다이나믹 임폴트
브라우저에서만 작동가능한 라이브러리들을
다이나믹 임포트로 임포트 해주면 된다.
▶︎사용시 문제점 2
ReactQuill 같은 에디터를 사용 할때
에디터가 해주는 역할은 그만 붙혀주는 역할이라서 입력 값이 이렇게 나온다.
Html 삽입 으로 문자열이 아닌 기능 자체를 넣어 주는 역할
Html 삽입
dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법.
▶︎ 주의사항 3
태그가 그 기능 자체로 만들다 보니
누군가 이런식으로 정보를 가져 가버리는 경우가 발생 할 수 있다. 생각 할 수 있다.(그래서 Token을 스토리지에 넣지 않는다)
다양한 웹 공격
태그가 아닌 형태로 보내주기 때문에 1차적으로 스크립트 공격을 막을 수 있다.
(태그를 의미하는 단어인 '<', '>' 등을 <, >와 같이 변경하여 차단)
(리엑트 퀼이 해주는 역할일 뿐)
이러한 사이트 간 스크립팅(XSS)공격에 쉽게 노출 당한다.
XSS (Cross-Site Scripting)
XSS Attack이고, 사용자의 세션을 탈취하는 프로세스를 나타내고 있습니다. 해커가 XSS 공격에 취약한 웹사이트에 악의적인 스크립트를 삽입하고, 그 스크립트가 있는 게시글을 열람한 사용자는 악성스크립트로 인해 본인의 쿠키가 해커에게 전송, 세션ID가 포함된 쿠키를 탈취한 해커는 탈취한 사용자의 계정으로 로그인 하게 된다.
이러한 코드를 방지하기 위해, dompurify의 sanitize를 활용하여 막아줬습니다.
이러한 코딩을 시큐어코딩
dompurify 라이브러리(정답은 아님)
이거 또한 DOM이니깐
마무리
특정 라이브러리들은 다이나믹 임포트로 브라우저(=클라이언트사이드)에서만 임포트할 수 있도록 적용해 주는 방법이 있었고
또한, if(typeof window === "undefined") 를 사용하여 서버에서 처리할 내용(또는 그 반대 !==를 활용하여 브라우저에만 처리할 내용)을 적어주는 방법이 있다.
