모던 리액트 deep dive 스터디 - 14장 발표 정리

모던 리액트 deep dive 스터디 - 14장 발표 정리

 

 

 

주제: 14장 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈(874p~902p)

---

크로스 사이트 스크립팅(XSS)

웹사이트 개발자가 아닌 제3자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점

 

 

xss 이슈가 발생할 수 있는 방법

 

dangerouslySetInnerHTML prop

 

- 특정 브라우저 DOM의 innerHTML을 특정한 내용으로 교체할 수 있는 방법

- 인수로 받는 문자열에는 제한이 없다. (검증 필요)

 

 

useRef를 활용한 직접 삽입

 

- useRef를 활용하면 직접 DOM에 접근 가능하져 보안에 취약해진다.

 

 

 

xss 문제를 피하는 방법

 

- 제3자가 삽입할 수 있는 HTML을 안전한 HTML 코드로 한 번 치환하는 것(sanitize or escape)

- sanitize library (DOM purity, sanitize-html, js-xss)

- 서버는 '클라이언트에서 사용자가 입력한 데이터는 일단 의심한다'라는 자세 가지기

- query, GET 파라미터, 서버에 저장된 사용자가 입력한 데이터 등 외부에 존재하는 모든 코드는 위험한 코드로 간주

 

 

---

getServerSideProps와 서버 컴포넌트를 주의하자

 

getServerSideProps가 반환하는 값 또는 서버 컴포넌트가 클라이언트 컴포넌트에 반환하는 props는 반드시 필요한 값으로만 철저히 제한

 

 

 

<a> 태그의 값에 적절한 제한을 둬야 한다.

- <a> 태그는 반드시 페이지 이동이 있을 때만 사용

- 이동 없이 핸들러 작동이 목적이라면 button 사용

- href 내에 JS 코드가 존재하면 이를 실행하여 보안 이슈로 이어질 수 있음. (의도적으로 주소 주입)

 

 

HTTP 보안 헤더 설정하기

*HTTP 보안 헤더: 브라우저가 렌더링하는 내용과 관련된 보안 취약점을 미연에 방지하기 위해 브라우저와 함께 작동하는 헤더

 

Strict-Transport-Security

모든 사이트가 HTTPS를 통해 접근해야 함

 

X-XSS-Protection

비표준 기술 (사파리 & 구형 브라우저에서만 제공)

XSS 취약점이 발견되면 페이지 로딩을 중단

 

X-Frame-Options

페이지를 frame, iframe, embed, object 내부에서 렌더링을 허용할지를 나타냄

X-Frame-Options: deny 옵션을 주면 <iframe>으로 삽입되는 것을 막아줌

sameOrigin은 같은 origin 내에서는 허용

 

Permissions-Policy

웹사이트에서 사용할 수 있는 기능과 사용할 수 없는 기능을 명시적으로 선언

 

X-Content-Type-Options

웹서버가 브라우저에 강제로 파일을 읽는 방식을 지정하는 것

 

Referrer-Policy

Referer: 현재 요청을 보낸 페이지의 주소

참고로 Referrer은 오타이지만 이미 표준으로 등록되어 수정하지 못했다

 

Content-Security-Policy

XSS 공격이나 데이터 삽입 공격과 같은 다양한 보안 위협을 막기 위해 설계

 

 

---

 

보안 헤더 확인하기

https://securityheaders.com에 접속하면 현재 서비스중인 웹사이트의 보안 헤더를 확인할 수 있다.

 

 

취약점이 있는 패키지의 사용 피하기

깃허브의 Dependabot이 발견한 취약점은 빠르게 조치하기