DIL: 모던 리액트 딥 다이브, 8주차-1

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive

---

DIL-week8-1_2024-04-23

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---------- | ---- | ----------- | | 8주차 | 14장, 15장 | | |

오늘 읽은 내용을 markdown으로 간단히 메모 중간 저장

---

웹 사이트 보안을 위한 리액트와 웹페이지 보안 이슈

• 프론트엔드 분야 또한 보안 위험성이 증대하고 있다. 외부에 위협에도 안전한 웹사이트를 만들어야 할 책임

리액트와 XSS

1. dangerouslySetInnerHTML
   • 특정 브라우저 DOM의 innerHTML을 특정 내용으로 교체할 수 있는 props
   • __ html을 키로 가지고 있는 개체만 인수로 받음

const __html = "<p><script>alert(1)</script><svg/onload=alert(origin)></p>"

<div dangerouslySetInnerHTML={{__html}}/>

1. useRef

<div ref={divRef}>

• a 태그에 잘못된 href, 이벤트 활용 ex) onclick, onload

방지법

• 새니타이즈 & 이스케이프 라이브러리: sanitize-html, DOMpurity, js-xss
• sanitize-html : allow list 방식 = 안전
• 이스케이프는?
  • 사용자가 콘텐츠를 저장할 때, 서버에서 진행하는 것이 효율적
  • 클라이언트에서 진행 시 >> 사용자가 POST나 curl을 날려서 이스케이프를 우회하는 등의 가능성 있음