Burp로 반응형 웹앱 테스트: 모바일 뷰와 스크립트 검증

개요

반응형 웹앱은 화면 크기와 환경에 따라 레이아웃과 스크립트 동작이 달라진다. Burp를 활용하면 모바일 뷰에서의 렌더링과 자바스크립트 실행 상태를 프록시 레벨에서 관찰하고 조작할 수 있다. 이 글은 처음 접하는 사람도 이해할 수 있도록 모바일 에뮬레이션 설정, 요청·응답 변조, 스크립트 동작 점검 방법을 단계별로 설명한다.

준비

필수 도구와 환경

• Burp Suite(Community 또는 Professional)
• 테스트 대상 웹앱(로컬 또는 개발 서버 권장)
• 브라우저(시스템 프록시를 Burp로 설정하거나 Burp의 내장 브라우저 사용)

기본 설정

Burp를 설치한 뒤 Proxy 리스너가 활성화되어 있는지 확인한다. 브라우저에서 Burp의 프록시를 사용하도록 설정하거나 Burp 내장 브라우저를 사용하면 모바일 에뮬레이션과 콘솔 확인이 수월하다.

모바일 뷰 설정

사용자에이전트와 뷰포트 조작

모바일 렌더링은 사용자에이전트(UA)와 meta viewport에 의해 영향받는다. Burp에서 요청 헤더를 수정해 모바일 UA를 전송하거나 응답의 HTML을 수정해 뷰포트 메타를 강제로 삽입해 테스트한다.

예시: 요청 헤더에서 UA 변경

GET /path HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0 Mobile Safari/537.36
Accept: text/html

응답 HTML에 뷰포트 메타 삽입 예시

<meta name='viewport' content='width=device-width, initial-scale=1'>

Burp 내장 브라우저와 디바이스 에뮬레이션

Burp Professional은 내장 브라우저에서 기기 크기와 디바이스 픽셀 비율을 조절할 수 있다. Community 버전은 브라우저의 개발자 도구로 모바일 에뮬레이션을 사용하고 Burp 프록시를 통해 트래픽을 캡처하는 방식이 현실적이다.

자바스크립트 동작 점검

콘솔 로그와 에러 확인

브라우저 개발자 도구 콘솔은 기능 누락이나 런타임 오류를 바로 보여준다. Burp의 Proxy History로 네트워크 요청을 확인하면서 콘솔 에러와 연계하면, 특정 스크립트 파일이 로드되지 않거나 CORS 오류가 발생하는 경우 원인 파악이 쉬워진다.

XHR / Fetch 요청 관찰

AJAX 요청은 모바일 뷰에서 경로가 달라지거나 파라미터가 변경될 수 있다. Burp의 HTTP history와 Repeater를 이용해 XHR 요청을 재전송하고 응답을 비교하면 모바일과 데스크톱 간 차이를 확인할 수 있다.

응답 변조로 스크립트 동작 확인

Burp의 Match and Replace 또는 Proxy의 응답 수정 기능을 사용하면 특정 스크립트를 교체하거나 로그를 삽입해 실행 흐름을 관찰할 수 있다. 예를 들어, 테스트용 콘솔 로그를 삽입하면 브라우저에서 해당 시점의 상태를 파악하기 쉽다.

응답 수정 예시: 간단한 로그 삽입

<script>console.log('mobile view test: script loaded')</script>

실전 절차(권장 순서)

• Burp 프록시 활성화 및 브라우저 연결
• 모바일 UA로 요청 전송하여 기본 렌더링 차이 확인
• Proxy History에서 주요 HTML, JS 파일을 식별
• 필요 시 응답에 뷰포트 메타나 로그 삽입 후 재로드
• 개발자 도구 콘솔과 네트워크 탭으로 에러 및 XHR 확인
• Reproduce가 필요한 요청은 Repeater로 재전송해 파라미터 변경 테스트

문제 사례와 점검 포인트

레이아웃 깨짐이지만 데스크톱 정상

뷰포트 메타 누락 또는 모바일 전용 CSS 미적용을 의심한다. HTML 응답에서 meta 태그와 링크된 CSS를 확인하고, 미디어쿼리가 올바르게 동작하는지 확인한다.

모바일에서 특정 기능 비활성

스크립트가 디바이스 혹은 스크린 너비에 따라 분기하는 로직을 확인한다. 콘솔 로그 삽입 또는 응답 교체로 분기 진입 여부를 확인하면 원인을 좁힐 수 있다.

주의사항

• 테스트는 반드시 허가된 범위에서 수행한다.
• 운영 서비스에 무해한 방식으로 점검하고, 응답 변조는 테스트 환경 우선 적용한다.
• 민감한 데이터는 로깅과 저장에서 제외한다.

마무리

Burp를 통해 모바일 뷰와 자바스크립트 동작을 함께 점검하면 반응형 웹앱의 문제를 보다 정확히 진단할 수 있다. 프록시에서 요청·응답을 관찰하고, UA·뷰포트 조작과 응답 변조를 병행하면 모바일 특화 이슈를 빠르게 찾아낸다. 위 절차를 바탕으로 환경에 맞게 순서를 조정하면 효과적인 점검이 가능하다.