1. 관찰: 까보자


이번엔 크롬의 개발자도구를 쓸거야


개발자 도구 가보면 Network탭에 요청이 가는게 보이거든

그걸 잘 보면 주소에 나오는 정보뿐만 아니라 실제로 어떤 데이터들이 오고가는지 더 많이 볼 수 있어


viewimage.php?id=3dafdf21f7d335ab67b1d1&no=29bcc427b28b77a16fb3dab004c86b6fdc843afe757eec57b07102ec3efadaa9f87c19e9fb5e400eaf8033bceb69164ed702232692774cf5f2f9f6b88596837126


이제 어떤 글의 삭제 메뉴에서 잘못된 비밀번호를 누르고 요청을 볼거야


viewimage.php?id=3dafdf21f7d335ab67b1d1&no=29bcc427b28b77a16fb3dab004c86b6fdc843afe757eec57b07102ec3efadaa9f87c19e9fb5e400eaf8033bceb69164ed7022326922e42f0f7ada4ee84968371f0

비밀번호를 가령 PaSsWoRd라고 치고 엔터를 쳐보자. 아 그 전에 Network탭을 미리 켜놔.



viewimage.php?id=3dafdf21f7d335ab67b1d1&no=29bcc427b28b77a16fb3dab004c86b6fdc843afe757eec57b07102ec3efadaa9f87c19e9fb5e045df4e633bfe3651d4d91a7f2520ddbe9a2db2783721d


자 이제 이 메세지박스가 뜨고 네트워크탭에는 새로운 요청이 하나 기록될거야. 클릭해봐


viewimage.php?id=3dafdf21f7d335ab67b1d1&no=29bcc427b28b77a16fb3dab004c86b6fdc843afe757eec57b07102ec3efadaa9f87c19e9fb5e400eaf8033bceb69164ed7022326927614a7abfda7bdd9968371b7


실화냐? 졸라많네

자 이제 저 졸라 많은걸 보낼거야

근데 저 졸라 많은 값들을 어떻게 얻어와야할까?


답은 소스 코드에 있어

웹페이지에서 Ctrl+U를 누르거나 주소 앞에 view-source:를 붙이거나 해서 볼 수 있거든


뭐 어떻게 잘 찾아보다보면(주소 값으로 찾아봐도 되겠지) 이런게 보여


viewimage.php?id=3dafdf21f7d335ab67b1d1&no=29bcc427b28b77a16fb3dab004c86b6fdc843afe757eec57b07102ec3efadaa9f87c19e9fb5e400eaf8033bceb69164ed702232692784cfaa6ffa1ebd696837179


input 태그를 보면 돼.


뭐 여러 개의 값이 있지? 저걸 파싱을 하거나 프레임 열어서 패스워드 넣고 요청을 시키는 방법이 있을거같은데..

그냥 글 검색처럼 HTML 파싱만 하고 저 값들만 jQuery롤 뽑아내서 요청을 보내보도록 하자.


HTML파서는 1번 코드에서 봤을지 모르겠지만 $(html코드) 하면 알아서 jQuery가 파싱을 해주는 것 같아.

원래는 XMLHttpRequest라는 jQuery에서 요청할때 쓰는 거기에서도 바로 뽑아올 수 있는데... jQuery에서 지원을 안하나.. 쒸익쒸익...


쨌던 뭐 해보도록 하자


2. 구현


난 이렇게 했어

function delete_article(no) { $.ajax({ // 똑같아 type: 'get', dataType: 'html', url: '/board/delete/?id=programming&no='</span> <span style="color:#e28964">+</span> no, headers: {<span style="color:#65b042">'X-Requested-With': '?'} }).success(function(html) { var $document; var data = {}; data.password = 'PaSsWoRd'; // 내 패스워드 $document = $(html); $document.find('#delete input[type=hidden]').each((x, y)=> { // #delete form에 있는 hidden type인 input을 목록화함 var $this = $(y); var name = $this.attr('name'); var value = $this.val(); data[name] = value; }) $.post('/forms/delete_password_submit', data, function(data) { // 응답 데이터가 궁금하면 console.log로 봐봐. // console.log(data); 뭐 이렇게. 주석 푸는건 // 지우면 됨 if(data.substr(0, 5) == 'false') { console.log('비밀번호 시도 실패! no: ' + no); } else { console.log('비밀번호 시도 성공! no: ' + no); } }) }) } delete_article(724697)

1번 게시글의 소스랑 잘 조합하면 되겠군


즐 디시질 하렴