[WEB] 웹 브라우저 개발자 도구

1.웹 브라우저 개발자 도구란? (브라우저 개발자 도구)

 'C'나 'Java'로 작성되는 프로그램들은 작성된 소스코드를 컴파일하고, 실행하여 결과를 알 수 있는데, 이 점은 '웹'도 동일하게 HTML, CSS, Javascript로 작성된 부분이 서버에 배포하는 단계를 거쳐 결과를 확인할 수 있다.

 때문에, 개발자는 개발도구와 웹 브라우저를 바꿔가며 수정을 반복하게 되고, 디자인 작업이 주를 이루는 CSS에서의 수정은 엄청난 번거로움이 발생하게 된다.

 

 이를 웹 브라우저 개발자 도구를 통해서 일부 완화 시킬 수 있는데,  웹 브라우저에서 HTML, CSS, Javascript를 수정하고 결과를 바로 웹 브라우저에서 확인할 수 있도록 하여 개발자의 편의성을 돕는 도구라고 볼 수 있다.

2.웹 브라우저 개발자 도구의 기능

 웹 브라우저 개발자 도구는, 각 웹 브라우저들마다 지원해주는 기능에 다소 차이점이 존재한다. 보편적으로 동일하게 지원해주는 기능이 있으며 각 브라우저 별로 차이점이 있는 부분도 있다.

 

 여러 웹 브라우저 개발자 도구들은, 다양한 기능을 포함하고 있으며 일반적으로 아래의 기능을 포함하고 있다. 단, 기능 명칭은 상이할 수 있다.

구분	기능	설명
1	Elements (요소)	표시된 페이지의 HTML, CSS, Javascript 등의 코드가 반영된 개괄적인 정보 표시 기능을 이용하여 HTML 코드 수정 가능
2	Console (콘솔)	브라우저에서 발생된 에러, 로그 등의 메시지를 표시 개발자(이용자)가 입력하는 Javascript 코드 실행
3	Sources (소스)	현재 페이지를 구성하는 웹 리소스 자원 확인 Debug 기능을 이용하여 실행 흐름에 따른 디버깅 수행 가능
4	Network (네트워크)	웹 브라우저와 서버 간 통싱된 네트워크 패킷 정보 확인 요청 네트워크 패킷의 헤디, 바디와 응답 결과 확인 재전송 기능을 통해서 동일한 네트워크 패킷을 재전송할 수 있는 기능 제공
5	Storage (저장소)	쿠키, 캐시 등의 웹 브라우저에서 이용된 리소스들의 저장소
6	Memory (메모리)	웹 브라우저에서 이용 중인 메모리 내역, 정보 등을 확인

3.웹 브라우저 개발자 도구의 비애

 앞서, 웹 브라우저 개발자 도구에서 HTML, CSS, Javascript를 수정하여 결과를 바로 알 수 있어, 개발자의 편의성을 돕는다고 설명하였다. 하지만, 편의성은 개발자에게만 주어지는 것이 아니란 점이 문제이다.

 

 첫째, 일부 기능을 통해 개발된 HTML 코드를 수정하여 웹 취약점을 진단하는 이 또는 악의적인 목적을 가진 공격자가 원하는 기능으로 동작하도록 수정할 수 있다. 예를 들면, 인가되지 않은 사용자에게 'disable' 처리된 기능을 활성화 시킴으로써 사용할수 있는 경우가 발생할 수 있다.

 

 둘째,  웹 브라우저와 서버 간 네트워크 패킷 정보를 상세히 표시해줌으로써 프로토콜 또는 헤더 등에 포함되는 서버 버전 정보 등을 쉽게 확인할 수 있게 해준다.

 

 셋째, 웹 페이지의 디버깅 기능을 제공하므로 Javascript의 변수 값이 어떻게 변경되는지, 최종적으로 이용되는 변수 값을 확인할 수 있게 된다. 이는 '.js' 파일의 난독화된 코드에서도 공격자가 원하는 값을 획득할 수 있는 조건을 제공하게 된다.

 

 넷째, 웹 브라우저와 서버 간 통신된 HTTP 메시지에 대해서, 재전송 및 변조된 데이터를 전송할 수 있는 기능 또는 명령어를 작성하는데 도움을 준다. 전송된 HTTP 요청 메시지를 'curl' 등의 명령어 구조로 세션 등의 중요정보가 포함된 상태로 생성할 수 있는데, 공격자는 이를 재전송하거나 변조를 통해 악의적인 행위를 수행할 수 있게 된다.

 

 기타 등 등이 있을 수 있겠지만, 이와 같이 개발자 도구는 '개발자'의 편의성을 위한 도구이지만, '개발자'만의 편의를 보장하지 않는다는 점이다.

4.보안적인 관점에서는...

 앞서 언급했듯 취약점 진단을 위해 목적의 안전한 '보안'을 위해 이용될 수도 있으나, 공격자의 공격 행위를 위해서 악용될 소지도 있다. 무조건적이라고 할 순 없으나, 중요 기능을 제공하는 웹 서비스에서는 개발자 도구를 이용한 일반적인 공격 패턴을 방지하기 위해서, 개발자 도구의 활성화를 탐지하거나 방지하는 로직의 적용도 고려해볼 수 있다고 생각한다.