[챗GPT로 코딩 공부] 프론트엔드 코드 취약점 발견하기

내일배움캠프 수료생들은 챗GPT를 어떻게 개발 공부에 활용할까요?

Jun 26, 2024

Contents

문제: 한 유저가 1초만에 쿠폰 100개를 가져갔다 코드의 문제점: ‘가능한 타이밍 공격’ 내일배움캠프가 여러분의 러닝메이트가 되어드리겠습니다

✍🏼

챗GPT, 개발 공부에 있어서 든든한 친구 같은 존재이죠. 내일배움캠프의 수강생들도 혼자 공부할 때에는 챗GPT의 도움을 받고 있는데요. 오늘은 내일배움캠프 수료생들의 챗GPT 경험담을 보고, 여러분의 개발 공부에 적용해봅시다.

문제: 한 유저가 1초만에 쿠폰 100개를 가져갔다

JavaScript를 사용하여 프론트엔드에서 버튼 이벤트 코드를 작성할 때, GPT를 활용하거나 JS에 미숙한 제가 코드를 작성했을 때, 많은 취약점이 존재합니다. 실제로 쿠폰 발급 페이지에서 쿠폰 발급 버튼을 JS를 이용하여 작성하였는데 한 유저가 1초만에 쿠폰을 100개를 가져가버리는 사태가 발생하였습니다.

이를 보완하기 위해서 GPT에게 코드 전문을 보여주며 취약점 분석을 요청하여 해당 문제를 해결하였습니다.


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout=http://www.ultraq.net.nz/thymeleaf/layout
      layout:decorate="~{common/layout/layout}">
<body>
<div layout:fragment="content">
  <div class="extra-coupon">
    <img class="coupon-event-img" src="/images/eventcouponimage.png">
  </div>
  <p class="extra-coupon">남은 쿠폰 개수 <span th:text="${couponCount}"></span></p>
  <div class="extra-coupon">
    <button class="coupon-issue-btn" th:if="${couponCount > 0}" onclick="claimCoupon()">쿠폰 받기
    </button>
  </div>
  <div th:unless="${couponCount > 0}">
    <div class="extra-coupon">
      <p>쿠폰이 모두 소진되었습니다.</p>
    </div>
  </div>
</div>
</body>
<script layout:fragment="script">
  function claimCoupon() {

    var xhr = new XMLHttpRequest();
    var url = "/coupons/event";
    var redirectUrl = "/coupons/event";

    xhr.open("POST", url, true);

    xhr.onload = function () {
      if (xhr.status === 200) {
        alert("쿠폰 받기 성공!");
        window.location.href = redirectUrl;
      } else if (xhr.status === 400) {
        alert("쿠폰 받기 실패. 유효하지 않은 요청 또는 쿠폰 소진됨.");
        window.location.href = redirectUrl;
      }
    };

    xhr.send();
  }
</script>
</html>

<코드 전문>

코드의 문제점: ‘가능한 타이밍 공격’

GPT가 발견한 취약점은 아래와 같았습니다.

CSRF 보호 부족

오픈 리디렉션 취약점

HTTP 상태 코드의 안전하지 않은 처리

HTTPS 적용 부족

가능한 타이밍 공격

onload 함수의 부적절한 오류 처리

위와 같이 여러가지 문제점이 있었고, 특히나 이 중 우리가 발견했던 5번의 문제점에 대해 잘 설명해주고 해결법을 제시해주었습니다.

‘가능한 타이밍 공격’ 문제는 경쟁 조건(race condition)으로 인한 것입니다. 이 문제와 해결책에 대해 설명드리겠습니다:

문제

사용자 인터페이스에서 쿠폰 수량을 확인하고 버튼을 표시합니다.

사용자가 버튼을 클릭하면 서버에 쿠폰 발급 요청을 보냅니다.

그러나 버튼을 클릭한 시점과 서버가 요청을 처리하는 시점 사이에 다른 사용자가 쿠폰을 가져갈 수 있습니다.

이로 인해 실제로는 쿠폰이 없음에도 불구하고 여러 사용자에게 쿠폰이 발급될 수 있습니다.

해결책

서버 측 검증: 쿠폰 발급 전 서버에서 다시 한 번 쿠폰 수량을 확인합니다.

동시성 제어: 데이터베이스 수준에서 트랜잭션과 락(lock)을 사용하여 동시 접근을 제어합니다.

쿠폰 예약 시스템: 클릭 시 쿠폰을 잠시 예약하고, 일정 시간 내 미사용 시 취소하는 방식을 도입합니다.

큐 시스템 사용: 요청을 큐에 넣고 순차적으로 처리하여 동시성 문제를 해결합니다.

실시간 업데이트: WebSocket 등을 사용해 쿠폰 수량을 실시간으로 업데이트합니다.

이러한 방법들을 조합하여 사용하면 타이밍 공격 문제를 효과적으로 해결할 수 있습니다. 특히 서버 측 검증과 동시성 제어는 필수적으로 구현해야 합니다.

이로 인해서 html내에 onclick으로 주지 않고 이벤트 리스너를 이용한 클릭 이벤트를 만들어 해당 취약점을 해결하였습니다. 위와 같이 프론트의 문제점뿐만 아니라 내가 작성한 백엔드 코드에 대해서도 취약점을 찾아가고 최적화를 진행하며 프로젝트를 개발하였습니다.

챗GPT를 사용할 때에는 구체적으로 어떤 문제점이 발생할지 예상한 다음 해결 방법을 구글링으로 따로 찾아본뒤 전문적인 지식을 가진 상태에서 해당 취약점과 해결 방법에 대해서 gpt와 대화를 나누며 최상의 해결 방법을 찾으면 좋을 것 같습니다.

내일배움캠프가 여러분의 러닝메이트가 되어드리겠습니다

내일배움캠프의 많은 수강생들이 부트캠프 생활을 수료하고 현업에서 개발자로 활약하고 있습니다. 내일배움캠프는 모든 운영진이 교육, 특강, 12시간 밀착 케어, 찐한 관리, 인재 채용까지 열과 성을 다해 수강생들의 꿈을 지원하고 있습니다. 수많은 장애물을 넘을 수 있도록 내일배움캠프가 든든한 러닝메이트가 되어드리겠습니다. 내일배움캠프과 함께 여러분의 개발자 여정을 시작하세요.

CREDIT

글 | 손창현 내일배움캠프 수료생 편집 | 정효재 팀스파르타 에디터