JavaScript
웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어
웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어
최근 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되는 중
웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망
역사
HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를 해결하기 위해서 네스케이프에서 제작
이후에 이 언어는 마이크로소프트의 인터넷 익스플로러에 jscript라는 이름으로 탑재되었고 후에 ECMA라는 표준화 기구로 이 언어의 관리 주체가 옮겨짐
-영향을 준 언어-
Java : 기본적인 문법
Scheme : 1급함수(first-class function) 함수의 인자와 반환값으로 함수를 사용
Self : prototype 기반의 상속 개념
JavaScript로 할 수 있는 일들
웹페이지 스크립팅 - DOM
서버 측 스크립팅 - node.js
브라우저 확장기능
Adobe PDF
Tools in the Adobe Creative Suite
OpenOffice.org
Unity 게임 엔진
Google Apps Script
채팅 시스템
주석
주석(comment)으로 코드에 부가적인 설명을 쓰거나 사용하지 않는 코드를 비활성화시키기 위해서 사용
//뒤에 따라오는 내용은 해석되지 않음
// 한줄짜리
/*여러줄
여러줄
여러줄*/
줄바꿈
세미콜론(;): 하나의 구문이 끝났음을 명시적으로 나타내는 기호
JavaScript에서는 세미콜론을 생략할 수 있는데, 이 경우 줄바꿈을 명령의 끝으로 간주
한줄에 여러구문을 사용하고 싶을 때 유용
ex) a = 1; alert(a+1);
숫자와 문자
숫자
자바스크립트에서는 큰따옴표나 작은따옴표가 붙지 않은 숫자는 숫자로 인식
Math.pow(3,2); // 9, 3의 2승
Math.round(10.6); // 11, 10.6을 반올림
Math.ceil(10.2); // 11, 10.2를 올림
Math.floor(10.6); // 10, 10.6을 내림
Math.sqrt(9); // 3, 3의 제곱근
Math.random(); // 0부터 1.0 사이의 랜덤한 숫자
문자(String)
"(큰 따옴표) 혹은 '(작은 따옴표) 중의 하나로 감싸야 하며 큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 함
숫자를 따옴표로 감싸면 문자가 됨
ex)
alert(typeof "1") // string 문자
alert(typeof 1) // number 숫자
*typeof는 값의 데이터 형을 알려주는 기능
이스케이프(escape)기법- 문자열 안에 작은 따옴표나 큰따옴표를 넣고 싶은 경우
alert('egoing\'s javascript') 처럼 \를 ' 앞에 위치시키면 ' 를 문자열의 시작과 끝을 구분하는 구분자가 아니라 단순히 문자로 해석하도록 강제 가능
\n는 줄바꿈을 의미하는 문자로 이를 이용하여 여러줄을 표시함
문자와 문자를 더할 때
ex) alert("coding"+" everybody"); //coding everybody
문자 뒤에 .length를 붙이면 문자의 길이를 구할 수 있음
ex) alert("coding everybody".length) //16
더 자세한 내용은 http://opentutorials.org/course/50/37을 참고
변수(Variable)
(문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용
여기에 담겨진 값은 다른 값으로 변경 가능
변수의 이름은 $, _, 혹은 특수 문자를 제외한 모든 문자로 시작할 수 있으며 코드의 재활용성을 높여줌
하나의 데이터를 저장하기 위한 것
JavaScript에서 변수는 var로 시작하며 변수를 선언하겠다는 것을 의미임
var을 생략 가능할 수도 있지만 유효범위라는 것에 영향을 미침
비교
프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미
연산자
값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호
비교 연산자
비교 연산자의 결과는 true나 false 중의 하나
true는 비교 결과가 참이라는 의미이고, false는 거짓이라는 뜻
참과 거짓은 숫자와 문자처럼 언어에서 제공하는 데이터 형으로 Boolean(불린)이라고 부름
불린은 조건문에서 핵심적인 역할을 담당하며 올 수 있는 값은 true와 false 두가지 밖에 없음
관습적인 이유로 0는 false, 0이 아닌 값은 true로 간주함
동등 연산자(==)
좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false
'='가 하나인 것은 대입 연산자로 우항의 값을 좌항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다름
ex)
alert(1==2) //false
alert(1==1) //true
alert("one"=="two") //false
alert("one"=="one") //true
일치 연산자(===)
좌항과 우항이 '정확'하게 같을 때 true 다르면 false
여기서 정확하다는 말의 의미: 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우에만 같다고 판단
ex)
alert(1=='1'); //true
alert(1==='1'); //false
null과 undefined는 값이 없다는 의미의 데이터 형
null은 값이 없음을 명시적으로 표시한 것
undefined는 그냥 값이 없는 상태라고 생각
NaN은 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터 형인데 숫자가 아니라는 뜻
ex2)
alert(null == undefined); //true
alert(null === undefined); //false
alert(true == 1); //true
alert(true === 1); //false
alert(true == '1'); //true
alert(true === '1'); //false
alert(0 === -0); //true
alert(NaN === NaN); //false
not 연산자(!)
부정의 의미로, Boolean의 값을 역전시킴
같지 않다(!=)
ex)
alert(1!=2); //true
alert(1!=1); //false
alert("one"!="two"); //true
alert("one"!="one"); //false
정확하게 같지 않다(!==)
ex)
alert(1!=='1'); //true
좌항이 우항보다 크다(>)
좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자
'<'는 반대의 의미
ex)
alert(10>20); //false
alert(10>1); //true
alert(10>10); //false
좌항이 우항보다 크거나 같다(>=)
<='는 반대의 의미
ex)
alert(10>=20); //false
alert(10>=1); //true
alert(10>=10); //true
논리 연산자
조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있도록 도와줌
and 연산자(&&)
&&는 좌항과 우항이 모두 참(true)일 때 전체가 참이 되는 것
or 연산자(||)
'||'의 좌우항 중에 하나라도 true라면 true
|기호는 통상 엔터키 위에 있는 원화표시 키를 쉬프트와 함께 누르면 입력됨
조건문
조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다.
문법
if로 시작하며 if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean임
Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행됨
즉, if 문의 조건이 참이면 중괄호의 시작({}부터 중괄호의 끝(})까지의 구간이 실행 거짓이면 중괄호 구간이 실행되지 않음
ex)
if(false){
alert('result : true');
} //if 뒤에 false가 왔기 때문에 아무것도 출력되지 않음
if만으로는 좀 더 복잡한 상황을 처리하는데 부족하므로 주어진 조건이 거짓일 때 실행할 구간을 정의하는 else를 사용
if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행함
ex)
if(true){
alert(1);
}
else {
alert(2);
} // 1
else if
else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공
else if의 특징: if나 else와는 다르게 여러개가 올 수 있음
else if의 모든 조건이 false라면 else가 실행되며 else는 생략 가능
조건문 중첩
조건문은 조건문 안에 중첩해서 사용 가능
ex1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.'); // 사용자가 입력한 값을 가져와서 id 변수의 값으로 대입함
if(id=='egoing'){
password = prompt('비밀번호를 입력해주세요.');
if(password==='111111'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}
} else {
alert('인증에 실패 했습니다.');
}
</script>
</body>
</html>
ex2) ex1을 and연산자 사용하여 개선한 경우
<script>
id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if(id=='egoing' && password=='111111'){ //"id의 값이 egoing이고 password의 값이 111111이면 참이다"
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}
</script>
ex3) id 값으로 egoing, k8805, sorialgi 중의 하나를 사용하고 비밀번호는 111111을 입력하면 right 외의 경우에는 wrong를 출력하는 예시
id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
// 연산자 연산 순서는 사칙 연산을 할 때와 같이 괄호부터 계산
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}
반복문
조건문 중첩처럼 반복문 안에도 다시 반복문이 나타날 수 있음
문법
각각의 구문은 서로 대체 가능하기 때문에 상황과 취향에 따라서 선택해서 사용하면 됨
while
while (조건){
반복해서 실행할 코드
}
while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행하고 조건이 false면 반복문이 실행되지 않음
여기서 true와 false는 종료조건으로 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있음
반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는 경우가 발생함
ex) i의 값을 1씩 순차적으로 증가시킴으로서 반복의 지속 여부를 결정
var i = 0;
while(i < 10){ // 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false
document.write('coding everybody <br />');
// 반복이 실행될 때마다 coding everybody <br />이 출력, <br /> 줄바꿈을 의미하는 HTML 태그
i++ // i의 값이 1씩 증가
}
for
for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
반복해서 실행될 코드
}
ex)
for(var i = 0; i < 10; i++){
document.write('coding everybody'+i+'<br />');
}
break
반복작업을 중간에 중단시키고 싶을때 사용
반복문 안에서 break가 실행되면 반복문을 즉시 종료시킴
ex)
for(var i = 0; i < 10; i++){ // 종료조건에 따르면 10행이 출력돼야 함
if(i === 5) { //i의 값이 5일 때 break 문이 실행되면서 반복문이 완전히 종료
break;
}
document.write('coding everybody'+i+'<br />');
} // 5행만 출력
continue
실행을 즉시 중단 하면서 반복은 지속
ex)
for(var i = 0; i < 10; i++){
if(i === 5) { //i의 값이 5가 되었을 때 실행이 중단
continue; //continue 이후의 구문이 실행되지 않음
}
document.write('coding everybody'+i+'<br />');
} //하지만 반복문은 중단되지 않았기 때문에 나머지 결과가 출력됨
함수(function)
하나의 로직을 재실행 할 수 있도록 하는 것
코드의 재사용성을 높여줌
function 뒤에 함수의 이름이 오고, 소괄호가 따라옴
소괄호에 인자라는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수(인자는 생략 가능)
함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 옴
function 함수명( [인자...[,인자]] ){
코드
return 반환값
}
입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할임
return
함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환하는 동시에 함수를 종료시킴
ex)
function get_member(){
return 'egoing'; //return 'egoing'을 실행한 후에 함수가 종료되었기 때문에
return 'k8805'; //return 'k8805' 이하는 어떠한 경우도 실행되지 않음
return 'sorialgi';
}
alert(get_member()); //egoing
인자(argument)
함수로 유입되는 입력 값
어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있음
]\
배열(array)
연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입
배열은 복수의 데이터를 효율적으로 관리, 전달하기 위한 목적으로 고안된 데이터 타입
여러 개의 데이터를 하나의 변수에 저장
대괄호([])는 배열을 만드는 기호로 대괄호 안에 데이터를 콤마(,)로 구분해서 나열함
각각의 데이터를 원소(Element)이라고 부른다.
배열에 담겨있는(저장된) 값을 가져올 때는 색인(index)사용-0부터 시작
ex)
var member = ['egoing', 'k8805', 'sorialgi']
alert(member[0]); //egoing
alert(member[1]); //k8805
alert(member[2]); //sorialgi
반복문으로 리스트에 담긴 정보를 하나씩 꺼내서 처리 할 수 있기 때문에 배열의 진가는 반복문과 결합했을 때 나타남
ex2)
function get_members(){
return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려줌
for(i = 0; i < members.length; i++){
// members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환
document.write(members[i].toUpperCase());
document.write('<br />');
}
/* 결과
egoing
k8805
sorialgi */
배열의 조작
.push
전달된 값을 배열에 추가하는 명령
.concat
복수의 원소를 배열에 추가하는 방법으로 전달된 값을 추가하는 명령
.unshift
전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킴
.splice
첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가함
.shift
배열의 첫번째 원소를 제거
.pop
배열 끝점의 원소를 배열에서 제거
.sort
정렬
.reverse
역순으로 정렬
객체(Object)
배열은 아이템에 대한 식별자로 숫자를 사용
데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 됨
이 인덱스를 이용해서 데이터를 가져오게 되는 것인데 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 함다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당함
객체에는 객체를 담을수도 있고, 함수도 담을 수 있음
모듈(module)
순수한 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않음
하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공됨
*호스트 환경: 자바스크립트가 구동되는 환경을 의미
ex) 함수 welcome을 main.html의 외부 파일로 분리
greeting.js
function welcome(){
return 'Hello world';
}
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
// script 태그: 브라우저에게 어디서부터 어디까지가 JavaScript이고, HTML인지를 구분해서 알려줌
<script src="greeting.js"></script> //브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킴
//greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있는 것
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>
라이브러리
모듈과 비슷한 개념
모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미
API(Application Programming Interface)
프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치
UI (User Intertace)
디지털 기기를 작동시키는 명령어나 기법을 포함하는 사용자 환경
정규표현식(regular expression)
문자열에서 특정한 문자를 찾아내는 도구
컴파일(compile)
검출하고자 하는 패턴을 만드는 일
ex) a라는 텍스트를 찾아내는 정규표현식
var pattern = /a/ //정규표현식 리터럴
var pattern = new RegExp('a'); //정규표현식 객체 생성자
두가지 모두 같은 결과를 만들지만 각자가 장단점 존재
정규표현식 메소드 실행(execution)
RegExp.exec()
console.log(pattern.exec('abcdef')); // ["a"] :문자열 a를 값으로 하는 배열을 리턴
console.log(pattern.exec('bcdefg')); // null :'bcdef'에는 a가 없기 때문에 null을 리턴
RegExp.test()
test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴
console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false
문자열 메소드 실행(execution)
String.match()
RegExp.exec()와 비슷
console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null
String.replace()
문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴함
console.log('abcdef'.replace(pattern, 'A')); // Abcdef
옵션
옵션에 따라서 검출되는 데이터가 달라짐
i
대소문자를 구분 x
ex)
var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];
g
검색된 모든 결과를 리턴
ex)
var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og));
Write-up
1. javascript- source
먼저 크롬 개발자 도구를 켜본다.
어... 아무것도 안뜬다. 확인을 눌러보자.
휴 다행이다. 뜬다.
스크립트 부분만 보면 if (pass == "123456azerty")에서 123456azerty가 password임으로 입력해주면
해결!!
2.javascript- authentication 2
크롬 개발자 도구를 켜본다.
앞에서 배운 모듈인가 보다. Source로 가서 login.js라는 자바스크립트 파일을 살펴보자
여기서 username과 password에 각각 아이디와 비밀번호를 입력 해야 한다.
username에 GOD ,password에 HIDDEN을 입력하면
해결!!
**
TheLists라는 배열에 "GOD:HIDDEN"이라는 문자열이 들어가있는데 TheLists.length=1이므로 for문은 한 번만 실행된다
"GOD:HIDDEN"(if문 안에서 TheLists[0])을 ' : '기준으로 나눈 문자열 2개를 TheSplit에 배열형태로 저장하면
TheSplit[0](="GOD")은 TheUsername에 저장되고, TheSplit[1](="HIDDEN")은 ThePassword에 저장된다.
그러므로 위와 같은 과정을 거치면 문제가 해결되는 것이다.
3. webhacking.kr- 14번
크롬 개발자 도구를 켜본다.
indexof는 문자열 내에서 특정한 문자열의 index 값을 리턴한다.
따라서 우리는 이 document.URL에서 .kr의 위치를 찾아야한다.
console창에서 아래와 같이 입력하면
18이라고 뜬다. 이 숫자에 30을 곱하면 540이 되고 이것이 모두 계산된 ul이다.
따라서 540을 입력하면 해결!!
4.webhacking.kr - 15번
힌트를 이용해 burp suite를 사용하자.
burp suite와 Foxy Proxy를 이용해 다음과 같은 창을 얻을 수 있는데
나는 여기서 forward만 계속 누르다가 Access_Denied->초기화면->위협받고 있다는 창에서 고급설정->Access_Denied라는 무한반복에 갇혔다.
Action에서 Send to repeat를 누르고 Repeater창으로 이동해 Send를 누르면 아래와 같은 창을 얻을 수 있다.
흑흑 드디어 어디서 본게 나왔다. script부분만 자세히 살펴보면
Access_Denied를 alert 창을 나오게 하고 해당 페이지를 가장 최상위 페이지로 이동하도록 하는 명령어다.
이로서 앞에서 한 행동의 이유를 알게 되었다...
burp suite와 Foxy Proxy 둘 다 끄고 다시 문제로 들어와 https://webhacking.kr/challenge/js-2/ 뒤에 ?getFlag를 입력하였더니 문제가 해결되었다.
(솔직히 왜 풀렸는지 모르겠다.)
아무튼 해결!!
'Hacking Study > 웹 해킹 스터디(2020-1) 과제' 카테고리의 다른 글
| 6주차 과제 (0) | 2020.05.21 |
|---|---|
| 5주차 과제 (0) | 2020.05.16 |
| 웹해킹 4주차 (0) | 2020.04.19 |
| 2주차 과제 (0) | 2020.04.05 |
| 1주차 과제 (0) | 2020.03.25 |