챗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와 대화를 나누며 최상의 해결 방법을 찾으면 좋을 것 같습니다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F83c75a39-3aba-4ba4-a792-7aefe4b07895%252Fa233a021-9d71-493a-a3d2-0d4afefe67b3%252FUntitled.png%3Ftable%3Dblock%26id%3D3ba86fa8-8cfe-469f-9e2a-4f54c138ef54%26cache%3Dv2&w=3840&q=75)
내일배움캠프가 여러분의 러닝메이트가 되어드리겠습니다
내일배움캠프의 많은 수강생들이 부트캠프 생활을 수료하고 현업에서 개발자로 활약하고 있습니다. 내일배움캠프는 모든 운영진이 교육, 특강, 12시간 밀착 케어, 찐한 관리, 인재 채용까지 열과 성을 다해 수강생들의 꿈을 지원하고 있습니다. 수많은 장애물을 넘을 수 있도록 내일배움캠프가 든든한 러닝메이트가 되어드리겠습니다. 내일배움캠프과 함께 여러분의 개발자 여정을 시작하세요.
CREDIT
글 | 손창현 내일배움캠프 수료생
편집 | 정효재 팀스파르타 에디터
취업 준비, 어디서부터 시작해야 할지 모르겠다면?
🧐비전공자인데 IT 업계 취업할 수 있을까?
😟프로젝트 경험이 부족한데, 어떻게 준비해야 할까?
🥺IT 기업으로 이직하고 싶은데 뭐부터 시작해야 할까?
이런 고민을 하고 있다면, 내일배움캠프의 IT 취업 컨설팅을 받아보세요.
취업 코칭 전문가들이 여러분의 고민을 해결해 드립니다.
다음 링크에 이메일을 입력하시면 메일로 1:1 커리어 상담권과 취준 자료집을 보내드릴게요.
Share article
Subscribe to our newsletter