# 웹 에디터 (React-quill) 적용 # 로그인 토큰 및 Domqurify

박경찬·2022년 4월 23일
0

1주일정리

목록 보기
3/8

먼저, 터미널을 실행한 후

yarn add react-quill 명령어로 React-Quill 을 설치합니다.

❗yarn add react-quill**
npm install react-quill

설치가 완료되었다면,

웹 에디터를 추가하고 싶은 페이지의 최상단에서

React-Quill 을 호출해줘야 합니다.

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

React-Quill 에서 사용될 스타일 CSS 파일까지 함께 호출해서

스타일도 함께 적용해주겠습니다.

여기까지 적용이 완료되었다면 첫화면에서 만나는 아이는 에러 창일겁니다!
당황하지 마시궁 NextJs 프로젝트를 사용하고 계신다면 정상이라는겁니돠~
document.defined 라는 오류를 확인됩니다.

Next JS 는 기본적으로 서버사이드 렌더링을 지원하게 되는데
서버로부터 웹 페이지를 렌더링하는 시점에서는
window 또는 document object 를 선언하기 전이기 때문에
document 가 선언되지 않았다는 에러가 발생하게 됩니다.이 문제를 해결하기 위해서는React-Quill 을 import 하게 되는 시점을
document 가 선언된 시점 이후에 선언할 수 있게 해야합니다.

호출하는 시점을 살짝 변경해주는건데 doc에 대한 정보가 선언된 후의 시점으로 옮겨서 호출을 할수 있게 도와줍니다.
ssr{서버사이드 렌더링}

즉, 빌드되는 시점에서 호출하는 게 아닌 런타임 시점에서 모듈을 호출을 해서이미 documnet 가 선언되어 있는 시점의 환경을 제공해줄 수 있습니다.

onChange함수를 사용하여 작성한 내용들을 가져올수도 있습니다.

실제로 사용하게 되어도 별로 달라지는 건 없어요!! 전 useForm을 사용해서 실제로 만들어봤고 만들면서 생기는 문제점이 있었습니다.

작성된 내용을 짧게 설명하자면 useForm을 사용해서 가짜 onChange를 만들어줬습니다.

그리고 value에 보면 "<\p><\br><\p>"태그들이 보이는데 Reactquill에서 빈값을 입력하게되면 저태그들이 입력됩니다 이 태그값들을 막기위해서 value 연산자를 대입시켜 내용이 없을때는 빈값이 들어올수 있도록 해줬습니다.

리엑트 퀼을 변경하게되면 컨텐츠를 trigger 하겠다!

이말은 컨텐츠라는 키가 실행되면 react-hooks-form에 알려주는기능입니다!

Domqurify

위코드의 목적이 무엇인가!!
간단히 설명하자면 유저가 상품을 등록하거나 게시물에 작성을 하게 되면 브라우저나 세션에 유저만의 고유한 토큰이 저장이 되는데 익명의 사용자(해킹) 가 너무나 쉽게 가져갈수 있습니다.

한번 알아보죠 ~~

잠깐 토큰이 생성되는 과정을 간략하게 한번 보고 넘어 갈게여!!

예전에 보안문제로 인해 시큐리티를 적용시켜야 해서 공부했던 내용인데,.. 기억을 살려..한번 해보죠... 돌아와....

AnonymousAuthenticationFilter

라는게 있어요! 이거의 기본적인 언어는 자바!! 입니다 스프링 시큐리티 기반으로 설명 하겠습니돠~
물론 다른언어도 비슷할거라고 생각해요!!

익명 사용자가 인증 시도도 하지 않고 권한도 없이 서버 자원에 접근을 시도하는 경우에 AnonymousAuthenticationFilter가 호출됩니다!
만약 사용자가 익명 사용자라고 한다 AnonymousAuthenticationToken을 만들어서 SecurityContext에 저장하게되고 이후에 현재 사용자가 익명사용자인지 인증된 사용자인지 판단하게 됩니다.

SessionManagementFilter

여기서 시큐리티는 필터를 요청하게 되는데 Session이 만료되거나 무효화 되는경우 이필터가 3가지 과정을 거치게 되요 ! . 현재 사용자가 동일한 계정으로 접근을하는지 아니면 우회 해서 접근을 하는지 체크하게되죠~

자자 본론으로 넘어가서 다시 한번 보죠~~!
이미지 태그를 사용해서 해당 이미지 주소를 무작위로 작성하고 이태그가 실패 했을때 onError를 사용해서 사용자의 로컬스토리지에 저장되어 있는 토큰을 탈취할수 있습니다.

javascript 와 HTML로 악의적 코드를 웹 브라우저에 심어, 사용자 접속시 그 악성코드가 실행되는 것을 크로스 사이드 스크립트 라고 합니다.

그런행위들을 막기위해 Domqurify를 사용하여 막을수가 있습니다!

npm에서 확인해보면 sanitize를 활용하게 되면 꺽새가 들어가 활용된 문장을 자동으로 차단하게 할수 있습니다.

yarn add dompurify
yarn add -D @types/dompurify

컴포넌트에 적용시켜서 웹을 구동시키게 되면 Hydration Issue가 생깁니다.

SSR 시 렌더링되는 컴포넌트와 CSR 시 렌더링되는 컴포넌트가 있기에 DOM 에서 읽어주는 순서가 꼬이게 되어버린다. 이를 방지하기위해 SSR / CSR 렌더링 컴포넌트를 동일하기 주기 위해 빈값을 넣어주어 해결해 줍니다.

자주사용되는 해킹중 CSRF 라는것도 있다고 해요
풀어 쓰게되면 사이트를 가로질러서 요청을 위조 한다!
예를 들어서 유명 인물의 트윗터를 해킹하여 작성하는 해킹기술이애요!

잠깐 설명을 하자묜~~ 보안이 너무 궁금해서 잠깐 스프링 시큐리티를 공부한적이 있는데 고때의 기억을 되살려 한번 끄적여봤습니다...

OWASP TOP 10

위에서 알아본 크로스 사이드 스크립트 처럼 웹에는 여러 공격들이 있고, 그 만큼 사람들은 보안에 신경을 많이 쓰게 되었습니다.

OWASP란 Open Web Application Security Project의 약자로 오픈소스 웹 애플리케이션 보안 프로젝트 입니다.

주로, 웹 관련 정보노출이나 악성파일 및 스크립트, 보안 취약점을 연구하며 10대 취약점을 발표합니다.

매년 탑 1을 유지하는 것이 Injection 입니다.

SQL쿼리문을 작성할때 조건을 통해 데이터를 주고 받는데, 이 조건을 직접 조작하여 공격합니다. 이를 현재는 ORM을 사용해 막고 있습니다.

그 외 여러 공격들이 있는데, 이는 OWASP 발표에서 확인 할 수 있습니다.

0개의 댓글