[모던 리액트 딥다이브] 14장 웹사이트 보안 이슈

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

• 웹 애플리케이션에서 가장 많이 보이는 취약점 중 하나
• 웹사이트 개발자가 아닌 제3자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점
• 이 취약점은 일반적으로 게시판과 같이 사용자가 입력을 할 수 있고, 이 입력을 다른 사용자에게 보여줄 수 있는 경우에 발생함
• 악성 스크립트가 실행 되면, 개발자가 할 수 있는 모든 작업을 함께 수행할 수 있으며 쿠키를 획득해 사용자의 로그인 세션 등을 탈취하거나 사용자의 데이터를 변경하는 등 각종 위험성이 있음

 

리액트에서의 XSS 이슈

• dangerouslySetInnerHTML props
  • 특정 브라우저 DOM의 innerHTML을 특정한 내용으로 교체할 수 있는 방법
  • 일반적으로 게시판과 같이 사용자나 관리자가 입력한 내용을 브라우저에 표시하는 용도로 사용
  • 오직 __html을 키로 가진 객체만 인수로 받을 수 있으며, 이 인수로 넘겨받은 문자열을 DOM에 그대로 표시하는 역할
  • 하지만 인수로 받는 문자열에 제한이 없어 위험성이 있음
• useRef를 활용한 직접 삽입
  • useRef를 활용해 직접 DOM에 접근할 수 있음

 

 

리액트에서 XSS 문제를 피하는 방법

• 제3자가 삽입할 수 있는 HTML을 안전한 HTML 코드로 한 번 치환하는 것 => 새니타이즈 또는 이스케이프
• DOMpurity, sanitize-html, js-xss 라이브러리를 사용할 수 있음
• sanitize-html 방식은 허용할 태그와 목록을 일일히 나열하는 이른바 허용 목록 방식을 채택하기 때문에 매우 귀찮지만 훨씬 안전함
• 단순히 보여줄 때뿐만 아니라 사용자가 콘텐츠를 저장할 때도 한번 이스케이프 과정을 거치는 것이 더 효율적이고 안전함
• 또한, 치환 과정은 되도록 서버에서 수행하는 것이 좋음.
• 쿼리스트링에 있는 내용을 그대로 실행하거나 보여주는 경우에도 보안 취약점이 발생할 수 있음

 

 

getServerSideProps와 서버 컴포넌트 주의

• getServerSideProps가 반환하는 props 값은 모두 사용자의 HTML에 기록되고, 전역 변수로 기록되어 스크립트로 충분히 접근할 수 있는 보안 위협에 노출되는 값이 됨.
• getServerSideProps에서 처리할 수 있는 리다이렉트가 클라이언트에서 실행되어 성능 측면에서도 손해임
• 따라서, getServerSideProps가 반환하는 값 또는 서버 컴포넌트가 클라이언트 컴포넌트에 반환하는 props는 반드시 필요한 값으로만 철처히 제한해야 함
• 리덕스에서 서버 사이드에서 가져온 상태로 가져오는 window.__PRELOADED_STATE__의 값도 XSS에 취약할 수 있음

 

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

• href에 javascript:;를 사용하는 것은 안티 패턴
• 즉, href로 들어갈 수 있는 값을 제한해야 함
• 또한, 피싱 사이트로 이동하는 것을 막기 위해 가능하다면 origin도 확인해 처리하는 것이 좋음

 

 

HTTP 보안 헤더

• 브라우저가 렌더링하는 내용과 관련된 보안 취약점을 미연에 방지하기 위해 브라우저와 함께 작동하는 헤더를 의미
• 종류
  • Strict-Transport-Security
    • 모든 사이트가 HTTPS를 통해 접근해야 하며, 만약 HTTP로 접근하는 경우 모든 시도는 HTTPS로 변경되게 함
    • Strict-Transport-Security : max-age=<expire-time>; includeSubDomains
    • expire-time은 이 설정을 브라우저가 기억해야 하는 시간을 의미, 초단위로 기억
    • includeSubDomains가 있을 경우 이러한 규칙이 모든 하위 도메인에도 적용됨
  • X-XSS-Protection
    • 비표준 기술, 현재 사파리와 구형 브라우저에서만 제공되는 기술
    • 페이지에서  XSS 취약점이 발견되면 페이지 로딩을 중단하는 헤더
  • X-Frame-Options
    • 페이지를 frame, iframe, embed, object 내부에서 렌더링을 허용할지를 나타냄
  • Permissions-Policy
    • 웹사이트에서 사용할 수 있는 기능과 사용할 수 없는 기능을 명시적으로 선언하는 헤더
    • 개발자는 다양한 브라우저의 기능이나 API를 선택적으로 활성화하거나 필요에 따라서는 비활성화할 수 있음 (카메라나 GPS와 같이 브라우저가 제공하는 기능)
  • X-Content-Type-Options
    • MIME : Multipurpose Internet Mail Extensions의 약자, Content-type의 값으로 사용됨. 원래는 메일을 전송할 때 사용하던 인코딩 방식. jpg, CSS, JSON 등 다양함
    • Content-type 헤더에서 제공하는 MIME 유형이 브라우저에 의해 임의로 변경되지 않게 하는 헤더
    • 즉, Content-type : text/css 헤더가 없는 파일은 브라우저가 임의로 CSS로 사용할 수 없으며
    • Content-type: text/javascript나 Content-type: application/javascript 헤더가 없는 파일은 자바스크립트로 해석할 수 없음
    • 즉, 웹서버가 브라우저에 강제로 이 파일을 읽는 방식을 지정하는 것
  • Referrer-Policy
    • HTTP 요청에는 Referer라는 헤더가 존재하는데, 이 헤더에는 현재 요청을 보낸 페이지의 주소가 나타남
    • 만약 링크를 통해 들어왔다면 해당 링크를 포함하고 있는 페이지 주소가, 다른 도메인에 요청을 보낸다면 해당 리소스를 사용하는 페이지의 주소가 포함됨
    • 사용자가 어디서 와서 방문 중인지 인식할 수 있는 헤더지만, 반대로 사용자 입장에서는 원치 않는 정보가 노출될 위험도 존재함
    • 따라서 Referrer-Policy 헤더는 Referer 헤더에서 사용할 수 있는 데이터를 나타냄
    • 페이지의 <meta name="referrer" content="origin"/> 태그로도 다음과 같이 설정할 수 있음
  • Content-Security-Policy
    • XSS 공격이나 데이터 삽입 공격과 같은 다양한 보안 위협을 막기 위해 설계됨
    • -src : 다양한 src를 제어할 수 있는 지시문