제가 콘테스트 사이트를 새롭게 만들기 전에 이전 콘테스트 사이트에서 불편한 점이 몇개 있었습니다. 첫번째로 클라이언트가 풀 문제를 매 시간마다 올라옥 해야 하는데 그걸 관리자가 수동으로 처리한다는 점입니다. 두번째론 XE,Wordpress 처럼 관리 페이지가 콘테스트 대회랑 같은 디렉토리에 있고 콘테스트 홈페이지 경로를 변경해주면 관리자 접속 페이지가 나오는 방식이였습니다. 이 방법은 관리자가 관리페이지로 들어가는대는 편하지만 관리자용 페이지 소스를 다른 소스와 함께 있어 나중에 유지보수, 새로 구축할 때 매우 불편한 단점이 있습니다. 이 문제로 저는 새로운 대회 사이트와 새로운 관리 콘솔을 구축하였습니다.
프로젝트 이름 : Innovation of Web Technology. The new HSOC Wargame Contest Systemes.
워게임 = (콘테스트 이름)
Rconsole = REDREDGROUP Console 입니다. 글을 읽으실 때 참고 바랍니다.
소개에 사용된 콘솔 개발 버전 REDREDGROUP Console V3.x , RUI1.x
이 Console을 사용하는 클라이언트 사이트 입니다. 이 사이트도 제가 처음부터 구축한 사이트 입니다. 나중에 기회가 된다면 이 페이지가 작동하는 코드를 설명해 드리겠습니다.
HSOC 보안관제센터 워게임 사이트
우선 Web Management Console을 소개합니다. 이 Console 페이지는 이 콘테스트 사이트가 아닌 다른 사이트에서도 사용이 가능하도록 설계하였습니다.
이 로그인페이지를 보기 전 엔진엑스 또는 콘솔 내부에서 아이피 밴을 활성화 해두었으면 해당 아이피로는 접속이 불가능 한 시스템으로 되어 있습니다.
Console에 로그인을 하는 순간 Log 서버에 로그인한 아이피, 로그인 계정, 로그인 시간 을 기록합니다. 이를 기록하느 이유는 혹 일어날 계성 탈취 사고, 등록하지 않은 지역에서 로그인을 확인하기 위함 등 보안을 위해 로그서버에 해당 데이터를 기록합니다.
메인 – 대쉬보드
로그인 후 보여지는 대쉬보드 화면입니다. 이곳에서 콘테스트 대회 데이터가 있는 데이터베이스 상태, 이 Console이 설치되있는 데이터베이스 상태를 나타냅니다. 만약 이 둘중 하나가 DOWN상태거나 이미지 서버가 DOWN 상태라면 왼쪽에 있는 “시스템 요약”탭에 시스템 상태가 “이상 – 데이터베이스 서버를 확인하십시오” 라는 문구가 표시되며, 해당 데이터베이스 상태도 마찬가지로 “위험/연결끊김” 으로 표시됩니다 데이터베이스 상태는 소켓 io 통신으로 확인하기 때문에 사용자가 새로고침 하지 않고도 상태를 확인할 수 있게 설계하였습니다.
대시보드에서 시스템 점유율 과 이더넷 트래픽 상태도 볼 수 있습니다. 가상 이더넷 카드를 포함한 모든 이더넷 카드를 “이더넷 트래픽”에 표시합니다. (for 문을 사용하여 돌렸습니다.)
시스템 점유을은 Console이 설치되 있는 점유율만 불러올 수 있습니다. 왼쪽부터 CPU,Memory, Drive 크기 순입니다. 추후 REDREDGROUP Console v4.x 버전에서 이 점유율을 다른 서버에서도 끌어와서 한곳에서 볼 수 있게 설계할 예정입니다.
사용자 탭
사용자 추가 탭은 사용자 데이터베이스에 연결되 있는 “members” 테이블을 참고 합니다. 관리자가 사용자를 수동 추가할 수 있고 세션관리, 수정 및 제거도 가능합니다.
사용자 탭 (사용자 관리)
먼저 사용자 관리 입니다. members에 있는 모든 사용자를 불러와 테이블화 시켜 관리자에게 보여줍니다. (개인정보보호로 인해 일부 정보를 모자이크 처리하였습니다)
우측 상단에 있는 필터링 옵션으로 학교, 이메일 승인 상태 등을 필터링 할 수 있게 구축했습니다. 사용자 컬럼마다 수정 및 관리 버튼을 생성하여 해당 사용자를 수정할 수 있게 하였습니다. 수정 / 관리 탭의 구분키는 사용자 컬럼 맨 첫번째인 “auto_increment” 번호로 구분합니다.
사용자 탭 (회원정보 수정)
수정하고 싶은 사용자의 왼쪽 “수정 / 관리 및 제거” 버튼을 누르면 위의 수정창으로 이동하며 해당 사용자의 프로파일을 표시합니다.
보이는 리스트 값은 관리자가 요청한 값을 input value 값으로 보여주는 방식입니다. 사용자의 이름, 이메일주소, 생년월일 같은 데이터는 변경 후 “계정 수정” 버튼을 눌러 바로 수정할 수 있습니다.
계정 상태 변경은 해당 계정을 정상, 계정정지, 대회참여 정지(커스텀) 으로 변경할 수 있는 탭입니다. 사용자가 콘테스트 대회에서 부적절한 언어를 반복해서 사용하거나 무작위 대입 같은 공격을 할 경우 “계정정지” 버튼을 눌러 빠른 대처가 가능하게 설계하였습니다. 또한 SMTP메일서버가 오류로 인해 인증메일이 전송이 안될 시 관리자가 “이메일 승인 상태”로도 변경할 수 있습니다.
사용자의 민감한 개인정보인 “패스워드”는 회원가입 시 단방향 pbkf2 암호화로 이루어져 기록되므로 관리자가 읽을 수 없습니다. 만약 사용자가 임시 패스워드를 요청하면 중간에 보이는 “비밀번호 변경 후 {이메일 주소}로 전송합니다.” 버튼을 눌러 사용자의 이메일로 새로운 임시 패스워드를 전송합니다. 임시 패스워드가 암호화 되기 전은 관리자가 볼 수 없습다. 개인정보 보호 차원으로 관리자는 단방향으로 암호화된 암호만 볼 수 있습니다.
이 {이메일 주소} 혹시 모를 사고에 대비해 2번 관리자에게 질문하여 해당 계정을 정말로 지울껀지 물어봅니다. 계정 삭제를 하는 즉시 데이터베이스 상에서 바로 사용자의 정보가 삭제됩니다.
사용자 탭 (사용자 수동 추가)
이 탭에선 새로운 사용자를 추가할 수 있습니다. 대부분은 클라이언트 사이트를 통해서 회원가입을 처리하지만, 개인적인 문제, 이메일 서버 문제 등 때문에 수동 추가를 하는 경우도 있습니다. 여기서 회원가입 처리를 할 시 메일인증을 받지 않고 바로 승인계정으로 저장됩니다.
사용자 탭 (사용자 세션 관리)
사용자 세션을 한눈에 볼 수 있게 테이블로 구성되있습니다. 이 탭에서는 현재 세션 연결이 되어있는 사용자만 표시되고 관리자는 왼쪽에 보이는 “연결끊기”를 눌러 해당 세션 연결을 해제할 수 있게 설계하였습니다. 만료시간이나 세션ID는 Console 내부의 global_setting.js 에서변경할 수 있습니다.
사용자 탭 (사용자 세션 초기화)
사용자 세션 관리랑은 다른 메뉴입니다. 이 메뉴는 사용자 세션 전채를 삭제하는 탭으로 미리 설정해둔 매니저먼트 패스워드 (Management Password)를 알고 있어야 관리자는 모든 세션를 초기화 시킬 수 있습니다. 이 패스워드가 필요한 이유는 혹 있을 계정탈취나 해킹으로 인해 세션초기화 작업이 진행되는 것을 막기 위해 사전에 매니저먼트 패스워드를 알아야 초기화 할 수 있게 설계하였습니다.
여기서 몇가지 메뉴들은 서버 상황에 따라서 매우 달라지고 민감한 데이터가 포함되어 있어 바로 Wargame_Contest 설정 소개로 넘어가겠습니다.
Wargame_Contest 설정 / 알림 탭
이 탭에서는 제가 맨 위에서 소개한 “메인” 콘테스트 사이트 설정이라고 보셔도 됩니다. 이 탭에서는 워게임 대회 카테고리 설정, 문제설정, 공지사항 설정, 개인정보수집방침 설정 등을 할 수 있게 설계하였습니다. 기존에 있던 사이트들은 일일이 HTML 태그를 입력하여 개인정보수집방침을 수정하였지만, 오픈소스기반의 에티터를 포함하여 HTML 파일 수정 없이 바로 수정할 수 있게 된것이 바로 이전사이트보다 훨씬 좋아진 기능입니다!
Wargame_Contest 설정 / 알림 탭 (문제 실시간 스트림)
기존 웹페이지 (2015년부터 2019년) 은 SSH 클라이언트로 접속하여 로그 파일 감시를 하고 있어야 문제 로그를 볼 수 있었습니다. 그러나 이 방법은 관리자가 수시로 탭을 바꿔가며 봐야 했기에 관리페이지에서 볼 수 있게 구현하였습니다.
이 부분을 구현하는데 Socket.io 를 사용하였습니다. 이전에는 F5(새로고침)을 눌러야 반영되었지만, 소켓 io 를 사용한 덕분에 바로바로 업데이트 되게 설계했습니다. 이 로그를 실시간으로 보여주는 것을 관리자분들도 아주 만족해 하셨습니다. 굳이 창을 변경안해도 바로 볼 수 있었기 때문이죠.
Wargame_Contest 설정 / 알림 탭 (대회설정)
저는 이 설정이 개인적으로 아주 만족스러웠습니다. 기존 웹사이트는 대회 제목, 대회 횟수를 수동으로 바꿔줘야 했지만 저는 DB에서 해당 값을 읽어와 콘테스트 상태에 따라서 다른 페이지가 보여지게 설계하였고 대회 횟수 역시 년도로 계산하여 자동으로 변경되게 하였습니다. 이전에는 관리자가 HTML 파일을 일일이 수정했지만, 이전 버튼 하나만 눌러주면 대회 카테고리가 변경됩니다.
버튼을 클릭하면 그 상태값은 DB쿼리문으로 변경되고 바로 반영됩니다. 클라이언트 프론트 쪽에선 DB에서 Category Status , Contest_cate 를 읽어서 그에 맞게 표시해주도록 구현하였습니다. 카테고리 에 따라서 회원가입 개인정보수집방침, 회원가입 폼도 자동으로 변경되게 구현하였습니다!
Wargame_Contest 설정 / 알림 탭 (문제추가 및 변경)
제가 제일 공들인 탭중에 하나입니다. 왜냐하면 이전 페이지에선 이런 페이지가 없어 어떻게 구현해야되는지 감이 아예 잡히치 않았기 때문입니다. 그래서 관리자가 바로 알아볼 수 있다록 색으로 문제를 구분할 수 있게 하였습니다.
파란색 : 문제를 추가만 한 상태로 클라이언트에선 보이지 않음
초록색 : 문제가 클라이언트에 보여지고 풀 수 있는 상태가 됨
빨간색 : 문제를 풀 수 있는 시간이 초과되어 읽기전용 모드
회색 : 문제를 올렸지만 문제가 발견되어 폐기된 문제
이렇게 색으로 구분한 결과 문제 상태를 바로 알 수 있었으며 관리가 편했습니다. 그 밖에도 문제추가, 문제 모두 보이기, 문제 모두 가리기, 문제 전채 삭제 등 기존 사이트에 없던 기능을 추가하여 문제 관리에 힘을 썻습니다.
Wargame_Contest 설정 / 알림 탭 (문제추가 및 변경 -> 문제추가 )
문제를 추가할 때 기존에는 textarea 태그 안에 HTML 태그를 수동으로 작성하여 문제를 올렸지만 텍스트 에디터를 추가하여 HTML 태그를 수동으로 입력할 필요가 없어졌습니다. 문제 점수 설정 , 카테고리 설정도 사용자 직관적으로 배치하여 바로 수정할 수 있게 구현하였습니다.
Wargame_Contest 설정 / 알림 탭 (Wargame 공지사항 작성)
워게임 사이트에 접속하면 바로 보이는 공지사항을 추가하거나 삭제할 수 있는 탭입니다. 이도 마찬가지로 텍스트 에디터를 사용하여 HTML 태그 를 일일이 입력하지 않아도 된다는 엄청난 장점이 생겼습니다. 그리고 공지를 삭제하지 않아도 “공지사항 모두 표시 않하기”버튼 한번이면 모든 공지사항이 표시되지 않게 하여 공지를 변경할 때 모두 삭제해야하는 불편한 단점을 없엤습니다.
Wargame_Contest 설정 / 알림 탭 (Wargame 대회안내 작성)
대회안내 작성은 워게임 사이트의 대회 안내를 작성하는 곳입니다. 기존에 대회안내도 HTML 파일을 수정하여 업로드 하였지만 이제는 DB에서 불러온 값을 수정 및 관리합니다. 물론 텍스트 에티터가 있어 수동으로 태그를 삽입하지 않아도 됩니다.
Wargame_Contest 설정 / 알림 탭 (Wargame 개인정보수집방침 작성)
이 개인정보수집방침은 워게이 사이트 하단 또는 회원가입 버튼을 눌러 확인하실 수 있습니다 이 처리방침을 변경하면 회원가입 동의 안내 내용도 같이 변경됩니다. 기존 페이지는 개인정보수집방침 페이지를 변경하면 회원가입 폼에도 다시 넣어줘야 했지만 이젠 한곳에서 수정하면 모든 데이터가 자동으로 변경됩니다.
이렇게 제가 처음으로 만든 콘솔 페이지가 콘테스트 대회에서 사용되니 정말 신기한 기분입니다. 이번 v3.x 버전 이전에도 Console을 만들었지만 이건 제가 저의 프로젝트 내부 관리를 위해 잠깐 사용하였지만 기능이 부족하고 UI디자인이 매우 안좋았습니다. 다음 콘솔 제작은 React 를 사용하여 제작할 예정입니다. 이번 v3.0보다 UI면에서 엄청나게 개선 될 것이며 DB백업 이중화 같은 부가기능도 제공할 예정입니다.
이번 REDREDGROUP Console 과 함께 워게임 사이트를 만들어 HSOC보안관제센터에서 운영한 콘테스트를 성공적으로 마쳤습니다. HSOC 보안관제센터 워게임 7회 8회 대회도 많은 관심 바랍니다. 감사합니다!
보안뉴스 기사 : https://www.boannews.com/media/view.asp?idx=92593
데일리시큐 기사 : https://www.dailysecu.com/news/articleView.html?idxno=116622
