# DOMPurify

[TIL 0419] 웹 에디터 (React-quill)
React-Quill: textarea의 단점들을 보완해 stylish 하게 내용을 작성할 수 있도록 도와주는 웹 에디터 라이브러리설치명령어yarn add react-quill실습ReactQuil의 onChange는 개발자가 만들어 놓은 커스텀 요소로,이름만 같을 뿐

2023. 4. 19
Index 웹에디터(React-quill), react-hook-form과 함께 사용, 크로스 사이트 스크립트, OWASP TOP 10, Hydration Issue 웹 에디터 (React-quill) 게시물 등록 페이지 : 작성자, 내용 담는 부분 필요 (inpu
HTML Sanitizer, mXSS
HTML Sanitizer HTML Sanitizer API 사용자의 입력값을 웹 페이지에 넣고 싶을 때 HTML Injection이나 XSS를 방지하기 위해서 사용 Client-side templating solution 다른 사이트에서 가져온 f

27day - XSS, CSRF
브라우저보다 Next.js에서 화면이 먼저 그려져서(pre-rendering) 생기는 에러이다.이것을 해결할 수 있는 방법은 세 가지가 있다.1\. useEffect2\. typeof3\. process.brower이렇게 해도 import 자체가 안되는 라이브러리들이

[React] 웹에디터(React-quill) 적용, 크로스 사이트 스크립트(XSS)를 막기 위해 Dompurify를 설치하자!, Hydration Issue
React에서 쓸 수 있는 에디터 라이브러리로는 React-quill, React Draft Wysiwyg 등이 있고 국내에서 만든 것은 TOAST UI Editor이 있다.📍나중에 팀플할 때 적용해 볼 것!설치하는 법yarn add react-quill또는 npm

27일차-2) [React/JS] 크로스사이트스크립트(XSS) / OWASP TOP10 / hydration issue
다른 사이트의 취약점을 노려 Javascript와 HTML로 악의적 코드를 웹 브라우저에 심고 사용자 접속 시 그 악성 코드가 실행되도록 하는 것을 크로스 사이트 스크립트(XSS)라고 한다.예시onerror는 img태그를 정상적으로 불러오지 못했을 때 실행되는 요소이를
dangerouslySetInnerHTML
dangerouslySetInnerHTML React에서 DOM을 조작할 때, innerHtml 대신 권장하는 방법이다. 그 이유는 사이트 간 스크립팅 공격에 쉽게 노출 될 수 있기 때문이라고 한다.

[vue] v-html은 사용하고 싶지만, 크로스 사이트 스크립팅은 피하고 싶어
v-html은 사용하고 싶지만, 크로스 사이트 스크립팅은 피하고 싶어

27일) 언제까지 Input type="text"쓸꺼야! 예쁜 웹에디터를 쓰자 ! /react-quill/ dynamic import/ XSS 크로스사이드스크립트 / 제가 개발자인데도 무서워요 잘 막아볼게요 OWASP TOP 10 / Code Camp FE 6기 / 코드캠프
웹에디터 이해크로스사이드스크립트(XSS)OWASP TOP 10
XSS 방어 dompurify 라이브러리사용하기
yarn add dompurify yarn add -D @types/dompurify 설치 후에 해서 사용해주면된다~! 실습 코드

react-quill 과 Dompurify
텍스트 에디터 라이브러리 react-quill을 소개합니다.발음은 퀼 입니다.지금 쓰는 벨로그의 텍스트 입력창처럼 html 꾸미기의 기본 기능을 제공하는 텍스트 입력창라이브러리 입니다. 이것을 사용하면 사용자가 텍스트를 입력시에 강조효과, 기울이기 등 편집을 할 수 있

DOM 조작과 크로스 사이트 스크립팅
브라우저는 서버로부터 자원을 요청하고 이를 받아서 랜더링 엔진에 의해서 파싱 과정을 거쳐 화면에 최종 랜더링을 하게 된다. 이때 서버로부터 받아온 HTML 파일을 파싱하는 과정에서 DOM을 구성하여, HTML의 노드들의 상속 관계를 트리 구조 형태로 만든다고 배웠다.