# DOMPurify

13개의 포스트
post-thumbnail

[TIL 0419] 웹 에디터 (React-quill)

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

2023년 4월 19일
·
0개의 댓글
·
post-thumbnail

2023. 4. 19

Index 웹에디터(React-quill), react-hook-form과 함께 사용, 크로스 사이트 스크립트, OWASP TOP 10, Hydration Issue 웹 에디터 (React-quill) 게시물 등록 페이지 : 작성자, 내용 담는 부분 필요 (inpu

2023년 4월 19일
·
0개의 댓글
·

HTML Sanitizer, mXSS

HTML Sanitizer HTML Sanitizer API 사용자의 입력값을 웹 페이지에 넣고 싶을 때 HTML Injection이나 XSS를 방지하기 위해서 사용 Client-side templating solution 다른 사이트에서 가져온 f

2023년 1월 1일
·
3개의 댓글
·
post-thumbnail

27day - XSS, CSRF

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

2022년 12월 11일
·
0개의 댓글
·
post-thumbnail

[React] 웹에디터(React-quill) 적용, 크로스 사이트 스크립트(XSS)를 막기 위해 Dompurify를 설치하자!, Hydration Issue

React에서 쓸 수 있는 에디터 라이브러리로는 React-quill, React Draft Wysiwyg 등이 있고 국내에서 만든 것은 TOAST UI Editor이 있다.📍나중에 팀플할 때 적용해 볼 것!설치하는 법yarn add react-quill또는 npm

2022년 12월 7일
·
0개의 댓글
·
post-thumbnail

27일차-2) [React/JS] 크로스사이트스크립트(XSS) / OWASP TOP10 / hydration issue

다른 사이트의 취약점을 노려 Javascript와 HTML로 악의적 코드를 웹 브라우저에 심고 사용자 접속 시 그 악성 코드가 실행되도록 하는 것을 크로스 사이트 스크립트(XSS)라고 한다.예시onerror는 img태그를 정상적으로 불러오지 못했을 때 실행되는 요소이를

2022년 8월 11일
·
0개의 댓글
·

dangerouslySetInnerHTML

dangerouslySetInnerHTML React에서 DOM을 조작할 때, innerHtml 대신 권장하는 방법이다. 그 이유는 사이트 간 스크립팅 공격에 쉽게 노출 될 수 있기 때문이라고 한다.

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

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

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

2022년 6월 1일
·
0개의 댓글
·

XSS 방어 dompurify 라이브러리사용하기

yarn add dompurify yarn add -D @types/dompurify 설치 후에 해서 사용해주면된다~! 실습 코드

2021년 12월 11일
·
0개의 댓글
·
post-thumbnail

React-Quill

해킹의 위험성을 없앤상태로 React-Quill 에디터 라이브러리를 쓰는 방법을 설명

2021년 10월 23일
·
0개의 댓글
·
post-thumbnail

react-quill 과 Dompurify

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

2021년 10월 13일
·
1개의 댓글
·
post-thumbnail

DOM 조작과 크로스 사이트 스크립팅

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

2021년 10월 4일
·
0개의 댓글
·