(1) 왜 프론트엔드 보안인가
'A유머 사이트에서 웃음 대신 좀비 PC 얻다!' 2012년, 모 인터넷 신문에 올라왔던 뉴스 기사의 제목이다. 이는 악성 코드를 심은 게시물을 통해 사이트 방문자들의 컴퓨터가 악의적인 스크립트를 실행하도록 조종¹⁾하고, 다시 피해 PC가 악성 코드 유포 게시물을 재생산하도록 하는 방식으로 수많은 좀비 PC를 만들어낸 사건을 기사화한 것이다. 만약 공격이 게시물 생성에 그치지 않고, 피해자의 비밀번호를 비롯한 개인 정보를 탈취하거나, 랜섬웨어를 설치하거나, 해당 PC를 다른 사기에 이용했다면 피해의 정도는 더욱 심각했을 것이다.
이와 같은 사건은 2024년 현재도 심심치 않게 일어나고 있다. 위와 같은 XSS 공격 방식으로 워드프레스의 인기 플러그인을 통해 3천개 이상의 사이트가 멀웨어에 감염되는²⁾ 등 보안 사고 뉴스는 주기적으로 들려온다. 그리고 해당 서비스를 사랑하는 이용자가 많을수록 피해는 더 커진다. 보안 사고가 발생하면 이용자는 서비스를 떠난다. 관리되지 않은 보안 취약점(vulnerability)³⁾은 서비스의 신뢰를 떨어트린다.
다행이 프론트엔드 개발자의 보안 지식은 많은 보안 문제를 예방할 수 있다. 사용자의 입력 값을 검증하고, 민감 정보를 안전하게 처리하여 서버로 전달하는 과정에서 악의적인 요청이 서버에 도달하지 않도록 1차 방어선 역할을 하기 때문이다. 이는 웹 공격의 피해를 최소화하여 사용자들의 정보를 보호하는 데 크게 기여하게 된다. 결론적으로 서비스의 안정성과 신뢰도를 유지하여 서비스의 지속가능성을 향상시키는 의의를 지닌다. 따라서 프론트엔드 개발자는 프론트엔드에 특화된 보안 지식을 갖추고, 변화하는 보안 동향을 살피며 가능한 취약점에 대해서 적극적으로 대응해야 한다.
¹⁾ XSS(Cross-Site Scripting): 대표적인 보안 취약점 공격 중 하나. 공격자가 이용 대상이 많은 게시판, 메일 등에 악성 스크립트를 삽입하는 공격 방식. 즉, 사이트를 매개로 상대 PC에 스크립팅을 시도하는 것
³⁾ 보안 취약점(vulnerability): 시스템 전체의 보안을 약화시키는 시스템의 결함. 시스템의 취약한 부분으로 이해하면 된다. 공격자는 이 취약점을 이용해 시스템을 공격(익스플로잇)한다.
(2) 웹 보안과 프론트엔드의 보안
웹 보안은 컴퓨터 보안의 한 분야로, 웹의 취약점을 이용한 공격으로부터 자산을 보호하는 전략을 다룬다. 여기에는 암호화, 네트워크 보안, 인터넷 프로토콜, 브라우저 환경, 웹사이트 보안 지식 등을 배경으로 한다. 주요 웹 보안 위협 유형으로는 SQL Injection, XSS(Cross-Site Scripting), CSRF(Cross-Site Request Forgery)이 있다.¹⁾
프론트엔드 보안은 이러한 웹 보안의 한 영역으로, 클라이언트 측에서 이루어지는 보안 조치를 말한다. 주로 브라우저 실행 환경과 사용자 인터페이스(UI) 상호작용 중에 발생할 수 있는 취약점에 대응하는 데 집중한다.
백엔드 보안은 시스템 레벨에서의 보다 깊이 있는 보호가 이루어지는 영역이며, 서버와 데이터베이스 측에서 데이터의 보안, 관리를 말한다.
아래 구체적인 예시를 통해 실제 웹 서비스에서의 보안 플로우를 살펴보자.
유저 로그인 시나리오
- 사용자가 로그인 폼에 아이디와 비밀번호를 입력함
- 프론트엔드: 아이디와 비밀번호 값의 유효성 검사 수행. XSS 공격 방지를 위해 특수문자 이스케이프 처리
- 프론트엔드: HTTPS로 데이터를 암호화하여 서버로 전송
- 백엔드: 전송된 데이터의 무결성 확인
- 백엔드: SQL Injection 방지를 위해 prepared statement로 데이터베이스 쿼리 실행
- 백엔드: 비밀번호를 해시 알고리즘으로 암호화
- 백엔드: 무차별 대입 공격 방지를 위해 로그인 시도 횟수 제한
- 백엔드: 로그인 성공 시 인증 토큰 생성 및 전송
- 프론트엔드: 받은 토큰을 안전하게 저장, 사용
이 예시에서 프론트엔드와 백엔드는 같은 데이터를 각기 다른 부분에 집중해 다룬다는 것을 알 수 있다.
프론트엔드: 사용자 입력 검증, 데이터 표시 보안 처리, 안전한 데이터 전송
백엔드: 원본 데이터 암호화, 저장, 검증, 접근 제어
이처럼 두 영역은 상호보완적이며 협력적이다. 프론트엔드에서 1차적으로 보안을 강화하고, 백엔드에서 추가 보안 조치를 수행하는 구조는 전체 시스템의 보안 수준을 높이면서도, 각 영역의 보안 취약점이 다른 쪽으로 확산되지 않도록 책임을 분리할 수 있다.
¹⁾ 이에 대해 자세한 내용은 3장에서 다룬다.