CodeCamp 27일차

→ 슬리드로 보기

---

웹 에디터 => Web-Editor

많이 사용하는 두가지 Web-Editor 라이브러리

1. react-draft-wysiwyg

2. react-quill

3. toast-ui-editor

이 중에서 react-quill을 사용해보겠다.

LocalStorage => Cross-Site-Script(XSS)

cross-site-script는 해킹 기법인데 주석을 통해 설명하겠다.

owasp top10을 검색해보면 3~4년에 한번씩 자주 사용되는 해킹기법들이 공개된다.

자바스크립트에서 자주 사용되는 해킹 기법은 아래와 같다

XSS, CSRF, SQL-Injection

‏‏‎ ‎

1. SQL-Injection

브라우저에서 이메일 비밀번호를 입력하고 Backend로 login API를 요청하게되면 DB에서 확인을하고 브라우저로 accessToken을 넘겨주게 된다.

만약에 Backend에서 코드작성을 아래와 같이 했을때

if(email===a@a.com&&pw===1234){

//accessToken을 프론트에 보내줘

}

로그인 창에서 비밀번호 입력을 qqq || 1 === 1 했을 때 비밀번호가 틀렸으나 && 문장으로 인해 1이 true가 되어 로그인이 성사된다. 하지만 ORM을 사용하면 이런 해킹 방식을 자동으로 막아준다. 그렇다하더라도 모든걸 ORM으로 처리할 수 없기때문에 SQL-injection 문제가 아직까지 발생하고 있다.

‏‏‎ ‎

‏‏‎ ‎

하이드레이션에서 CSS 문제 발생 => Hydration-Issue

프론트엔드서버에서 미리 랜더링을 해보고

HTML CSS JS를 브라우저에 보내면 브라우저에서 프리랜더링 버전과 비교하면서 랜더링하는것이 Hydration이다.

주로 태그들의 위치 및 css를 랜더링한다.

하지만 프론트엔드 서버에서 프리랜더링할때는 브라우저에서 그려야할 div가 4개인데 프론트엔드 서버에서는 dompurify때문에 div가 하나 빠진채로 랜더링된다.

브라우저에서는 프리랜더링때 없던 div가 생기게되고 css 순서대로 뒤에까지 같은 css를 입혀버린다.

이걸 Hydration-Issue라고 한다.

간단하게 생각해보면 프론트엔드 서버에서도 div 개수를 맞춰주면 된다. dompurify는 빼줘야한다.

‏‏‎ ‎