웹해킹 스터디 3주차 과제(Javascript 학습 & 워게임)

글 작성자: caputdraconis

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>웹해킹 스터디</title>
</head>
<body>
    <script>
      //여기다가!!!
    </script>
</body>

</html>

자바스크립트 코드는 hmtl 코드에서 와 사이에 들어간다.

다른 많은 코드들과 같이 한 명령문이 끝날때에는 세미콜론(;)을 붙여 마무리한다.

alert(1);

*alert( ) * alert 함수는 괄호 안의 숫자 혹은 문자열을 알림창 형태로 출력한다. 로그인 할때 비밀번호 오류 알림창과 같은 형태이다.

자바스크립트에서는 큰 따옴표(" ") 혹은 작은 따옴표(' ')로 감싸져있는 것은 문자열, 그렇지 않은 것은 숫자로 인식한다.

크롬 기준 f12를 누르면 나오는 개발자 도구의 console 창에서 자바스크립트 코드를 입력하며 실행 결과를 확인할 수 있다.

Math라는 객체에 수학과 관련된 함수들이 굉장히 많다!

Math.pow( ) 첫 인자값의 두번째 인자 승을 반환한다. 위의 Math.pow(6,4)는 6의 4승을 반환한다.

*Math.round( ) * 괄호 안의 숫자를 반올림한다. 위의 Math.round(20.1)은 반올림 결과로 20이 반환된다.

Math.ceil( ) 괄호 안의 숫자를 올림한다. ceil은 천장! 뭔가 '위'의 이미지다. 그래서 올린다..! 위의 Math.ceil(10.6)은 10.6의 올림값인 11을 반환한다.

*Math.floor( ) * 괄호 안의 숫자를 내림한다. floor은 바닥! 밑에 깔려있는 이미지,, 위의 Math.floor(5.4)은 5.4의 내림값인 5를 반환한다.

Math.sqrt( ) 괄호 안의 숫자의 제곱근을 반환한다. 네이버를 찾아보니 제곱근이 영어로 square root다. 앞에서 sq, 뒤에서 r을 따서 지은 이름같다. 암튼 위의 Math.sqtr(81)은 81의 제곱근인 9를 반환한다.

Math,random( ) 0부터 1 사이의 소수값을 랜덤으로 반환한다. Math.round(100*Math.random( ))와 같이 사용 가능하다! 0과 1사이의 소수값에 100을 곱한 후 그 값을 반올림한 값을 반환한당

위와 같이 문자열을 큰 따옴표(" ") 혹은 작은 따옴표(' ')로 감싸줘야 한다. 특히 저 둘은 쌍이 맞아야한다. 큰 따옴표로 시작하면 큰 따옴표로 마무리! 작은 따옴표로 시작하면 작은 따옴표로 마무리!

혹시..

alert("으아아아아아"배고파 ");

이렇게 코드를 넣게 되면 어떤 결과가 출력이 될까!?

자바스크립트가 명령어를 해석할때 큰 따옴표로 으아아아아아아 를 문자열로 인식하고 뒤에 '배고파'는 문자열로 인식하지 않는다. 그렇다면 문자열에 따옴표를 넣고 싶다면 어떻게 해야할까. 두 가지 방법이 있다.

사용하고 싶은 따옴표의 종류와 다른 따옴표를 문자열을 감쌀 때 사용한다. ex) alert("건탁's 수많은 과제들");
백슬래시(\)를 사용한다. 백슬래시는 문자열 중간에 나온 따옴표를 문자열의 시작과 끝을 구분하는 구분자가 아니라 단순한 문자로 해석하도록 시킨다! 이 기법을 이스케이프(escape) 라고 한다!! ex) alert(' 건탁\'s 수많은 과제들')

줄바꿈(\n) 문자열을 작성할때 줄바꿈은 어떻게 표현할까.

평소 컴퓨터를 사용할때 사용했던 줄바꿈 방법인 엔터를 사용했는데 언뜻 보기에도 오류가 났다,,

자바스크립트에서는 c언어의 문자열 줄바꿈과 같은 방법으로 \n을 사용한다.

alert("수많은\n과제");

문자열 사이에 줄바꿈할 곳에 \n을 넣어주면 아까 보았던 줄바꿈된 팝업창이 출력된다. 이는 아까 말했던 기법인 이스케이프 중 하나이다. n을 문자열의 일부가 아닌 특수한 능력을 하는 친구로 여긴다.

위의 사진과 같이 문자열과 문자열은 더하기(+) 기호로 연결할 수 있다. 대신 띄어쓰기가 없으니 alert("수많은"+" "+"과제")와 같이 가운데 공백 문자열을 이용할 수 있당

indexOf( ) 대충 딱 보면 감이 잡힌다! 괄호 안의 문자열이 몇 번째인지 반환한다. c의 배열과 같이 0부터 시작한다!!

*_변수 *_변수를 선언할때에는 'var 변수이름'을 사용한다. 위와 같이 선언과 동시에 초기화 가능

     변수는 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용. 다른 값으로 변경 가능  

     변수에 다른 값을 대입할때는 '  변수이름= 대입할 값 '을 사용한다.

숫자는 물론이고 문자열도 변수에 대입 가능하다.위의 실행결과는!?

아까 문자열 2개를 연결할때와 마찬가지로 더하기 기호(+)를 사용하여 출력하였다.

주석

// 한 줄짜리 주석이다. //이 있는 줄 기준 //뒤의 문자는 코드로 인식이 안된다.

/* */ 여러줄 주석이다. /*과 */ 사이에 뭐가 들어오든 그것은 그냥 무시해버린다..

줄바꿈과 여백

위에서부터 한 명령이 끝날때마다 붙여오던 새미콜론

물론 새미콜론을 붙이는게 낫지만 자바스크립에서는 한 줄이 끝날때 자동으로 '한 명령이 끝나는구나'라고 인식을 한다.

그래서 위의 코드에서 a를 alert 했을때 1이 출력되고, b를 alert 했을때 2가 정상적으로 출력이 된다!

연산자

1.대입 연산자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>웹해킹 스터디</title>
</head>
<body>
    <script>
        var a=1;
    </script>
</body>

</html>

말 그대로 대입하는 연산자이다. 위의 코드에서는 a라는 변수에 1이라는 값을 대입하고 있다.

2.비교 연산자

비교 연산자는 ==과 ===이 있다. ===는 ==보다 조금 더 엄격한 비교라고 생각하면 된다.

위의 예제처럼 1=="1"은 true다. 그 이유는 ==는 ===보다 덜 엄격한 비교연산자이기 때문에 다른 자료형이더라도 값이 같으면 true를 반환한다. 그에 반해 1==="1'은 값이 같더라고 자료형이 다르기 때문에 false를 반환한다.

null과 undefined는 의미는 값이 없다는 의미에서 비슷하지만, null은 값이 없음을 명시적으로 표시한 것이고, undefined는 그냥 값이 없는 상태라는 점에서 조금 차이가 있다. 그래서 ===를 사용하여 비교하였을때 false가 나온다.

*!= !== * ==과 ===사이의 관계와 같다. !=는 같지 않다, !==는 정확하게 같지 않다로 볼 수 있다.

조건문

*if문 * if문의 표현식이 true라면 중괄호{ } 안의 명령을 실행한다. 그리고 그 밑의 else if 와 else는 실행하지 않고 지나간다. if문의 표현식이 false라면 그 밑의 명령은 실행 된다.

위의 코드처럼 조건문 안에 조건문, 조건문 중첩이 가능하다. 로그인 기능을 조건문을 사용해 구현!

*_prompt *_alert처럼 경고문이 뜨지만 입력창이 포함되어있다! 그 입력창에 무언가를 입력하고 확인 버튼을 딱 누르면 그 값을 반환한다. 위의 코드에서는 id와 pwd라는 이름의 변수를 선언하고 prompt를 사용해 값을 할당시킨다.

논리연산자

if(true && true){
    alert("AND당");
    }

*_&& *_AND와 같다. 양 옆의 표현식이 true여야 true다.

논리연산자 &&을 사용해 아까 구현했던 로그인 코드를 더 간단하게 했당. id가 caputdraconis 이며 pwd가 11111111여야!?로그인 성공이 alert된다.

*_|| *_OR과 같다. 양 옆의 표현식 중 하나만 true라면 true 가 된다.

*_! *_부정. NOT의 효과를 한다.

if(!true==false){
    alert("힣 부정");
    }

true의 부정값(반대값)은 false이기 때문에 alert문이 실행된다.

boolean의 대체제

*_0과 1 *_0은 false, 0이 아닌 수는 모두 true로 취급된다.

또한 빈 문자열, undefined, null, Nan, 값이 할당되지 않은 변수가 모두 false로 취급된당.

반복문

while

while(조건) {
반복해서 실행할 코드
}

위의 문법으로 작성한다.

다른 조건을 걸지 않고 while(true)로 해버리면 무한 루프에 걸린다. 컴퓨터가 힘들어한다.

보통은 변수 하나를 선언하여 아래와 같은 방식으로 사용한다.

var i=0;
while(i<10){
    반복해서 실행할 코드
    i++;
    }

for

for(변수 초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행할 코드
}

위의 형식으로 사용된다. while 문에서 필요했던 사용할 변수 초기화, 조건을 위한 변수 값 변경이 for문에서는 한 괄호 안에 쫘아아아악

for(int i=0;i<10;i++){
    반복해서 실행할 코드
}

i가 0일때, i가 1일때, i가 2일때

i가 9일때까지 중괄호 안의 코드가 실행이 되며, i가 10일때 반복조건에 걸려 for문은 끝나게 된다.

반복문의 제어

*continue *

for(int i=0;i<10;i++){
    if(i==5){
    continue;                }
    document.write(i+"<br />");

}

위의 코드를 실행하면 0부터 9까지 출력이 되면서 5를 건너뛰게 된다. 그 이유는 for문 안의 조건문 때문인데, i의 값이 5인 경우 continue로 인해 document.write(i+"
")를 실행하지 않는다. continue는 지금 실행되고 있는 반복문 차시를 건너뛴다. 다시 while문 꼭대기로~

break

var i=0;
while(true){
    if(i==22){
        break;
        }
    document.write(i+"<br />");    
    i++;
}

break는 자신이 속해있는 반복문 하나를 탈출한다. 반복문 여러개 안에 속해있는 경우 가장 안쪽꺼 하나를 탈출! (방금 위의 코드를 작성할때 i++를 작성하지 않은 채 크롬을 통해 열었다가 맥북에서 헬리콥터 소리가 나는 신기한 경험을 했다.)

함수

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

함수는 하나의 로직(한 줄의 코드부터 수많은 코드까지!!!)을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.

function myName(){
    return "Guntak";
}

alert( myName()    );

함수 호출은 저렇게 함수명 뒤에 괄호를 붙여주면 된다. 인자를 필요로하는 함수라면 저 괄호 안에 인자값을 넣어주면 된당~

위의 코드를 실행하면 Guntak이 경고창으로 뜬다. 무섭다.

어엇!? return!? 저건 뭘까. return은 return 뒤에 따라오는 값을 함수의 결과로 반환하는 친구다. 동시에 함수도 종료시킨다. 그럼 한 함수에 return이 여러개 나오면!!!!????? 첫번째 return에서 값을 반환하고 함수를 종료시키기 때문에 밑의 코드는 실행이 되지 않는다. 불쌍하다.

function get_argument(arg){
    return arg;
}
function get_argument(arg1, arg2){
    document.write(arg1 + arg2 +"<br />");
    return 0;
}
alert(get_argument(5));
alert(get_argument("오이잉"));

get_argument("오이이잉", "우이이이이잉");

get_argument 함수에서는 arg라는 이름의 매개변수가 있다. 그 함수를 호출할때 괄호안에 인자를 주면 매개변수에 그 인자값이 저장된다.
두번째 함수처럼 매개변수 여러개도 가능.

배열

var members= ['egoing', 'k8805', 'guntak']
for(int i=0;i<3;i++){
    document.write(members[i]+"<br />");
}

배열을 생성할 때에는 [] 대괄호 안에 배열값을 넣는다! 배열명[인덱스], 인덱스 값을 바꾸어가며 원하는 데이터로 접근할 수 있다.

위에서는 for 반복문을 사용하여 길이가 3인 배열을 모두 출력했다.

var arr=[1,2,3,4,56,7,8];
for(int i=0;i<arr.length;i++){
    //코드~
    }

아까처럼 배열의 길이를 안다면 for 문을 사용할때 그대로 사용해도 되지만, 무지막지하게 큰 배열이라면,, 다 세는건 어려우니깐 arr.length를 사용할 수 있다. 배열명.length 는 배열의 길이를 반환한다.

배열의 조.작.

push!!!!!! 배열의 뒤통수에 추가할 원소를 밀어버린다.

원소 여러개를 추가할때는 concat을 사용한다. li.concat(['f','g'])는 기존의 li 배열에 f와 g 원소를 추가한 버젼을 return한다. 그 값을 다시 li에 할당하는 코드다.

push와 concat은 모두 뒤통수에 박았다. 하지만 여기서 사용된 unshift는 인자로 전달한 값을 뒤가 아닌 첫번째 원소로 추가하고 나머지 원래 있던 애들의 인덱스를 1씩 더한다.

뒤와 앞에 넣는걸 배웠으니 다음은 중간에 넣는걸 가르쳐주신다. 그 아이는 splice!! 두둥,,

splice는 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 반환한다.

그 다음 3,4,5,6,~~번째 인자들을 아까 주어진 첫번째 인자의 원소 뒤에 추가한다.

위의 코드에서는 첫번째 인자인 2에 해당하는 원소가 b이기 때문에 b에서 시작하여 0개의 문자를 지우고 난 후 b의 뒤에 'B'를 추가한다.

원소의 삭제와 정렬

*_shift *_배열의 첫번째 원소를 삭제한다. 위의 코드는 1이 제외된 [2,3,4,5,6,7,8]이 arr 배열에 들어가있다.

*pop * 팝!!!! 튄다. 마지막 원소의 값이 팝 튀어서 사라진다.

var arr=['e', 'g', 'h', 'f','d'];
arr.sort();
alert(arr);

*sort * 정렬해준다. 순서대로 파바박.

*reverse * 반대로 정렬해준다.

객체

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};객체

파이썬에서의 딕셔너리와 같다. 키(key)와 값(value)가 쌍을 이루어 저장된다.

var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

위와 같이 빈 객체를 grades 변수에 저장해두고 하나하나 값을 대입시키는 방법도 있다.

객체 정보에 대한 접근은 배열과 비슷하게 객체명[ key ]를 사용한다. 또는 객체명.key 를 사용해서도 가능하다!

배열에서는 for 문을 사용해 반복이 가능했다. 그 이유는 배열은 숫자로 된 인덱스가 각 값마다 할당되어 있었기에 숫자로 접근이 가능했다. 객체는 key와 value가 쌍을 이루어 저장되기 때문에 인덱스는 없다. 그래서 사용하는게!!!

for in

var height = {'Dad' : 174, 'Mom' : 162, 'Me' : 171};
for(var key in height){
    document.write("key : " + key+" value : "+ height[key]+"<br  />");
}

for문이 한 번 실행될때마다 변수 key에는 height의 키가 할당된다. 반복문 안에서는 할당된 key 값을 사용해 객체 value에 접근한다!

객체의 value 값으로는 또 다른 객체나 함수까지 올 수 있다.

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};

*_this *_현재 포함되어 있는 객체를 가르킨다. 위의 코드에서의 this는 grades 객체를 가리킨다.

모듈 코드를 여러개의 파일로 분리하여 사용하는 것. 프로그램을 구성하는 작은 부품. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있고 코드 수정이 빠르다는 이점이 있다.

*_라이브러리 *_자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미.

API(Application Programming Interface) 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치.

*_UI(User Interface) *_UI는 사용자가 제품 또는 서비스를 사용할 때, 마주하게 되는 면..?화면..?

*_정규표현식 *_문자열에서 특정한 문자를 찾아내는 도구. 하나의 언어.

               정규표현식은 두가지 단계, 컴파일과 실행으로 이루어진다.

컴파일! 컴파일은 검출하고자 하는 패턴을 만드는 일이다.

정규표현식 리터럴
정규표현식 객체 생성자

var patter= /a/;

정규표현식 리터럴을 사용하여 정규표현식 객체를 만들었다. 일반 텍스트로 인식되지 않기 위해 슬래시(/)로 감싸준다.

a라는 문자를 찾고자 한다라는 것을 컴퓨터에게 알려준다.

var pattern= new RegExp('a');

정규표현식 객체 생성자를 이용하여 정규표현식 객체를 만들었다. RegExp는 Regular Expression의 약자라고 한다...?ㅎㅎ

console.log(pattern.exec('abcdef'));

*RegExp.exec() *아까 위에서 pattern에 /a/를 할당시켜 놓았기 때문에 위의 'abcdef'에서 a를 찾으면 ['a']가 출력된다. 만약 a가 포함되지 않은, 예를 들어 'bcdefg'와 같은 문자열에서 a를 찾는다면 null이 반환된다.

RegExp.test() RegExp.test()는 인자 안에 패턴에 해당되는 문자열이 있는지 없는지를 boolean값으로 반환한다.

*String.match() * RegExp.exec와 비슷하다. 문자열에 .을 붙이고 인자로 패턴을 준다는게 다른 점이다.

String.replace() 문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴한다. 위에서는 abcdef에서 패턴인 a를 'A'로 변경하고 리턴하다.

옵션

var oi=/a/i;
console.log("Abcde",match(oi));

*i *패턴을 선언할때 /뒤에 i를 붙여주면 패턴검색시 대소문자를 구분하지 않겠다는 것이다. 보시다시피 "a"가 아닌 "A"가 포함된 문자열에서 "a"를 찾고있는데 옵션 i를 붙이지 않았다면 null이 반환되었겠지만! 위의 코드는 ["A"]이 리턴된다.

var og = /a/g;
console.log("abcdea".match(og));

*g *g를 붙여주면!? 검색된 모든 결과를 리턴한다. 위의 코드를 실행하면 ["a" , "a"]이 반환된다.

1. javascript- source

영어로 설정하는걸 깜빡했다. 비밀번호를 입력하래요!!

이번주 과제가 자바스크립트였으니 script 태그부터 찾아보는 꼼수를 부렸다. 역시나 pass라는 변수에 비밀번호를 입력받고 받은 그 값이 "123456azerty"와 같은지 비교를 한다. 그럼 저걸 딱!! 입력해주면?

성공 흐헿

2. javascript- authentication 2

ㅎㅎㅎㅎㅎㅎㅎㅎㅎ

login을 눌렀더니 아이디 비밀번호 창이 나온다. 당황해서 취소를 눌렀더니 이 새끼가 시비를 건다.

head 태그 안에 login.js라는 자바스크립트 파일을 불러왔다. 그리고 body태그에서는 login.js 안에 선언되었다고 추측되는 connexion()이라는 함수를 호출하고 있다. 그럼 login.js 를 봐야징

개발자 도구에서 위에 있는 메뉴바에서 sources를 누르면 사용되는 파일들을 볼 수 있었다.

login.js 파일이다. username과 password에 각각 아이디와 비밀번호를 입력받는다. TheLists라는 배열에 "GOD:HIDDEN"이라는 문자열이 들어가있다. TheLists.length는 1이기 때문에 for문은 한 번만 실행된다. if문 안에서 TheLists[0], 즉 "GOD:HIDDEN"을 ' : '기준으로 나눠서 그 나뉜 문자열 2개를 TheSplit에 배열형태로 저장한다. TheSplit[0], 즉 "GOD"를 TheUsername에 저장하고, TheSplit[1], 즉 "HIDDEN"을 ThePassword에 저장한다. 이 두 값과 사용자가 입력한 두 값을 if문을 사용해 비교한다. 같다면?

로그인 했다!

3. webhacking.kr- 14번

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ이건 뭐지

check 버튼을 눌렀을때 자바스크립트의 ck() 함수가 실행된다.

ul이라는 변수에 document.URL의 값을 저장하는데,, 이게 뭔지 모르겠어서 구글링을 해봤다. 현재 주소를 반환하는 능력을 가지고 있다고 한다. 그럼 ul이라는 변수에는 "https://webhacking.kr/challenge/js-1/"이 저장될 것이다. 그리고 나서 ".kr"의 인덱스값을 다시 ul에 저장한다.

직접 세기 귀찮아서 크롬 콘솔창에 위처럼 입력해보았다. 위의 결과대로 ul에는 19가 저장되었을 것이다. 그 다음~ 19에 30을 곱한 값을 다시 저장. 그럼 ul은 570. 사용자가 비밀번호로 입력한 값이 ul과 같다면 뭔가 좋은게 실행되는거 같다. 그럼 그 하얀 네모칸에 570을 입력해보자!

앗.. 아까 크롬 콘솔창에서 인덱스값을 찾을때 .kr이 아닌 kr을 입력했었다.. 그럼 앞에 .이 더 붙었으니 값은 18일테고 18*30=540이 pwd값이면 되니깐 540을 입력해보면!?

후힣

4. webhacking.kr - 15번 (hint: burpsuite 사용해주세요!)

burpsuite를 사용하라고 선배님이 힌트를 주셨다.

고이 모셔뒀던 저 아이를 키고 문제를 연다.

아니 그 전에 이 친구 심상치 않다.

이번꺼 왜 이러죠,, 사용해야 하는 툴은 어려워보이고,, 이번 문제는 다짜고짜 문을 닫아버린다.

foxyproxy를 키고 다시 들어가니 BurpSuite에 위와 같이 서버와 클라이언트 사이에 전송되는 내용을 확인할 수 있었다. BurpSuite 사용법에 대해서 구글링을 하다가 어떤 블로그에서 forward를 누르라길래 한 5번 정도 연타를 했다. 그랬더니..?

자바스크립트로 인해 계속 다른 사이트로 이동되고 있었다. 저기 document.write로 링크가 하나 적히는데 그 전에 사이트의 주소는 홈으로 변경된다. 그러므로 ?getFlag를 https://webhacking.kr/challenge/js-2/ 뒤에 붙여 접속하면 뭔지는 모르겠지만 15번 문제 옆에 체크가 생긴다. 뭔가 잘못 푼거같은데 하 모르겠다

웹해킹 스터디 3주차 과제(Javascript 학습 & 워게임)

댓글

이 글 공유하기

티스토리툴바

댓글

이 글 공유하기

다른 글

<2/2> 웹해킹 5주차 과제 뚜두두두두두두두두둥 [XSS]

<1/2>웹해킹 5주차 과제 뚜두두두두두두둥 [XSS]

웹해킹 4주차 [ PHP 학습 & 워 게임~]

웹해킹 스터디 2주차 과제

티스토리툴바