[React] XSS 공격에 안전할까

리액트의 Input 컴포넌트를 만들고 사용하다가 문득 어떻게 하면 XSS 공격을 방어할 수 있을까 궁금해졌습니다.

일단, 답부터 말하자면 리액트는 따로 코드를 작성하지 않아도 XSS를 방어할 수 있습니다. 그 이유는 다음과 같은 특징을 갖고 있기 떄문입니다.

리액트의 특징

리액트는 JSX( JavaScript + XML )문법을 사용하는데 JSX는 다음과 같은 특징을 같습니다.

---

• 하나의 파일에 JavaScript, HTML을 동시에 작성한다.

• 자바스크립트 표현식을 사용할 땐 {}로 감싸준다.

• if문은 사용할 수 없다.

• class 대신 className을 사용한다. → class는 자바스크립트 예약어라 JSX 내부 HTML 태그에서 사용할 수 없다.

• JSX에 삽입된 모든 값은 렌더링 전에 이스케이프 처리 된다.

  • 원래 기능에 벗어난 문자열로 변환하기 때문에 스크립트를 주입하려해도 HTML 본연의 태그나 스크립트 기능이 제거된 채 렌더링이 되기에 공격이 먹히지 않습니다. 공식문서에도 이 부분을 명시하고 있습니다.
  📜 리액트 공식문서
  
  • 단, dangerouslySetInnerHTML 또는 앵커태그 href를 사용하면 XSS 공격의 가능성이 생기기 때문에 지양해야 합니다. ( 초록집사는 사용하지 않음 )

---

즉, 이스케이프처리 덕분에 별로의 코드 작성 없이도 XSS 공격을 방어할 수 있지만 dangerouslySetInnerHTML, 앵커태그 href는 지양해야합니다.

그렇다면 다른 부분은 안전할까?

그럼 다른 부분은 안전할지 Mozilla observatory로 보안 점수를 평가해보도록 하겠습니다.

Mozilla observatory 참고

Test 점수

제가 만든 사이트는 d+ 점수를 받았고 test 결과 몇가지 보안 항목에 문제가 있어보입니다. 어떤게 문제인지 하나하나 살펴볼까요?

• Content Security Policy

  서버의 응답을 감염시켜서 공격하는 XSS공격을 방지하기 위해 만들어진 헤더 속성 (SOP와 비슷)

  • 태그 내에 스크립트 실행 금지 설정 가능
  • 특정 웹사이트 리소스만 불러오도록 설정 가능
  • 웹사이트에 본래 존재하는 스크립트 외 다른 스크립트 사입 방지

  • 아래 메타 태그로 프론트단에서 CSP 처리를 해줄 수 있다.

    현재 script-src만 해당 사이트와 같은 출처로 지정했는데 리액트처럼 인라인 스크립트 자체를 사용하지 않을 땐 필요가 없습니다. 다른 설정도 추가하고 싶다면 아래 CSP 문서를 참고!

  <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
  
  

• X-Content-Type-Options

  text/javascript또는 application/javascript을 가져야만 JavaScript로 해석하겠다는 헤더 속성 - XSS 방어

• X-Frame-Options 해당 사이트를 iframe, frame, object등의 태그에 삽입할 수 있는지 결정하는 응답 **헤더 속성입니다. 현재 초록집사의 서버는 해당 속성을 지정하지 않아서 다른 곳에 삽입가능한데 이러면 다음과 같은 **보안 문제가 발생할 수 있습니다.**

  • 클릭재킹: 웹페이지에 iframe 태그를 숨기고 실제페이지의 클릭을 iframe내 해커가 지정한 내용의 클릭으로 인식되게 한다.
  • 디도스 공격: 실제페이지를 참조하는 iframe 태그를 여러개 만들고 여러번 로드하면 한번에 수십 수백개의 요청을 만들 수 있다.
  • 해결방법: 서버에서 응답 헤더에 X-Frame-Options 를 추가하고 값을 deny 또는 same origin으로 준다.

• X-XSS-Protection

결론

나의 프로젝트엔 적용 불가

현재 리액트로 클라이언트 쪽 XSS 공격 방어는 잘 하고 있지만 서버는 그렇지 못 합니다. 응답헤더에 보안과 관련된 설정을 추가해야하는데, 안타깝게도 현재 저는 서버를 바꿀 수 없는 제한이 있기에 프로젝트엔 적용할 수 없습니다.

다음에 적용

다음 프로젝트엔 변경 불가한 고정 서버가 아닌 백엔드와 협업이 가능하기에 이 부분도 신경 써서 변경하도록 해야 겠습니다.

참고

💻 React Content Security Policy Guide: 리액트 CSP

💻 Mozilla Observatory: 사이트 보안 테스트

💻 CSP란?

💻 리액트에서 XSS 방어가 안되는 경우 ⬇

웹 개발을 위해 꼭 알아야하는 보안 공격