Day 27.

wisdomdom·2022년 2월 22일
0

TIL

목록 보기
26/26

[ Web-Editor ]

React-draft-wysiwyg
React-quill 을 사용하자!

yarn add react-quill
📌 import 해오자 (둘 중 골라서 쓰기)
import ReactQuill from 'react-quill'; // ES6
import * as ReactQuill from 'react-quill'; // Typescript

📌 css import 해오자
import 'react-quill/dist/quill.snow.css'; // ES6

1️⃣ 기본형

onChange : html의 onChange 기능이 아니라, react-quill의 기능 ➡️ 값이 event로 들어오는게 아니라 value로 들어온다!

<ReactQuill onChange={handleChange} />
...
const handleChange = (value) => {
    console.log(value);
  };

문제 발생 🔥

🔥 내 오류 : ReferenceError: Cannot access 'schema' before initialization

react와 다르게 Next에서 오류가 발생하는 이유
Next는 서버사이드렌더링(SSR)을 지원하는 react 전용 서버사이드 프레임워크이기 때문에, 프론트엔드 서버에서 먼저 한 번 그려지고, 브라우저에서 다운로드 받은 html, css, javascript를 다시 한 번 그린다(pre-rendering)
이 두가지의 구조를 비교하는 과정을 diffing, 이 내용들을 종합적으로 브라우저에 그려내는 과정을 hydration이라고 한다
하지만 pre-rendering 시에 document나 window가 존재하지 않아 그려줄 수 없기때문에 웹 에디터를 그려줄 수 없다.(Web-Editor는 돔을 조작해야하는 라이브러리)

그럼 전에 배웠던 3가지 방법 중 하나로 하면 되지 않을까?
➡️ 1) process.browser 2) window 3) useEffect

❌ 안됨! import 자체가 안된다

➡️ 그러면 import 자체를 브라우저가 있을 때 불러오자! dynamic import "next/dynamic" (동적 import)

      dynamic 안에 화살표함수를 사용하고 , import 해온다, 그리고 서버사이드에서는 그리지마 
                        ⬇️                 ⬇️                  ⬇️
const ReactQuill = dynamic( ( ) => import("react-quill"), {ssr: false})

2️⃣ react-hook-form 과 함께 사용

handleChange가 일어났을 때 강제로 값을 읽어와야한다
➡️ useForm의 setValue를 이용해 값을 가져와서 넣어주기

문제 발생 🔥

값이 비어있는데 태그가 남아있으니 지워주자

📌 <p><br><p>가 남아있으면 빈값으로 만들어줘~
setValue("contents", value === "<p><br><p>" ? "" : value)

yup에서 onChange를 인식을 못한다 (값변화는 인식하는데 change는 인식 못함)
➡️ 둘다 알려줘야한다! (trigger 추가)

📌 웹 에디터 등록과 조회

문자열이 그대로 등록되기 때문에, 태그를 반영해주려면 태그 자체를 넘겨줘야한다

yarn add dompurify
yarn add @types/dompurify --dev

아래서 자세히 합시다~

[ 로컬스트리지 XSS ]

스크립트를 활용한 토큰 탈취 처럼 취약점을 노려서 javascript 와 HTML로 악의적 코드를 웹 브라우저에 심어, 사용자 접속시 그 악성코드가 실행되는 것을 크로스 사이드 스크립트
이미지 태그는 다운로드를 받아와야해서 느리게 들어온다. 이미지에는 주소가 있기 때문에, 요청할 때 안좋은 경로로 넣거나, 이미지 실패했을 때 실행될 js 코드를 적을 수 있는데 악의적인 코드를 심을 수 있다 -> 예를 들면 localStorage.getItem 해서 액세스토큰을 받아온다

당연히 실패하는 <img src =“”> 경로를 넣고, 이미지 실패했을 때 실행될 js 코드를 localStorage.getItem~ 넣는다. -> 페이지에 접속했더니 액세스토큰이 빠져나간다 XSS

리액트퀼이 꺽새를 방어해준다

근데 해커가 백엔드(플레이그라운드)를 공격하면?
DdangerouslySetInnerHTML={{ __html: String(data?.fetchBoard.contents), }}
여기다 넣으면 코드가 실행된다 -> 토큰 탈취당함

DOMPurify 공격을 자동으로 차단시켜주는 라이브러리

yarn add dompurify
yarn add -D @types/dompurify

돔 영역이라 얘도 process.browser~ 필요하다

OWASP

OWASP란 Open Web Application Security Project의 약자로 오픈소스 웹 애플리케이션 보안 프로젝트 입니다.
주로, 웹 관련 정보노출이나 악성파일 및 스크립트, 보안 취약점을 연구하며 10대 취약점을 발표합니다.
매년 탑 1을 유지하는 것이 Injection 입니다.
SQL쿼리문을 작성할때 조건을 통해 데이터를 주고 받는데, 이 조건을 직접 조작하여 공격합니다. 이를 현재는 ORM을 사용해 막고 있습니다.
그 외 여러 공격들이 있는데, 이는 OWASP 발표에서 확인 할 수 있습니다.

orm을 안쓰면 위(sql injection)의 공격을 받을 수 있다

profile
가보자고~

0개의 댓글