쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터다. 브라우저는 이 데이터(쿠키)들을 저장해 두었다가 동일한 서버에서 재 요청 시 저장된 데이터(쿠키)들을 같이 전송한다.

 

http 프로토콜은 하나의 요청에 하나의 응답을 한 후 네트워크 연결을 끊는 connectionless의 특징과 네트워크가 연결이 끝맺을 때 상태를 유지하지 않는 stateless 속성을 갖기 때문에 http 요청마다 새로운 커넥션을 열어 인증을 계속 해야한다는 단점 때문에 쿠키라는 개념이 생겼다.

 

쿠키생성

쿠키는 http 헤더의 Set-Cookie 헤더로 저장하고, 브라우저는 Cookie 헤더로 저장되있던 쿠키들을 서버로 전송한다.

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: id=phulasso
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: id=phulasso

Javascript의 document.cookie를 통해서도 쿠키를 저장할 수 있다.

document.cookie = "id=phulasso;"

 

쿠키소멸

쿠키를 생성할 때 ; 뒤에 Expires 속성이나 Max-Age 속성으로 삭제 기간을 정할 수 있다.

Set-Cookie: id=phulasso; Expires=Sun, 15 Nov 2020 07:28:00 GMT;

세션 쿠키는 현재 세션이 끝날 때 삭제된다. 어떤 브라우저는 재시작 할때 세션을 복원하여 쿠키가 무기한 존재할 수 있도록 하기도 한다.

'Web > Technical' 카테고리의 다른 글

Session  (0) 2020.11.16
JSON(JavaScript Object Notation)  (0) 2019.10.18

직렬화는 데이터 구조나 객체를 동일하거나 다른 컴퓨터 환경에 저장하고, 나중에 재구성할 수 있는 포맷으로 변환하는 과정이다. 직렬화한 데이터를 다시 추출하는 과정은 역직렬화 라고 한다.

 

자바스크립트에서 직렬화를 하기 위해 node-serialize 라는 모듈을 사용하겠다.

 

 serialize() 함수를 통해 직렬화를 진행하고, unserialize() 함수를 통해 역직렬화를 진행한다.

 

'Web > Develop' 카테고리의 다른 글

[NodeJS] 접속자 아이피 가져오기  (0) 2020.11.19
[Javascript] IIFE  (0) 2020.10.28
[Javascript] 사칙연산 계산기  (0) 2020.08.21
[PHP] isset()  (0) 2020.06.14
[PHP] PDO로 데이터베이스(mysql) 연결  (0) 2020.06.14

IIFE는 즉시 실행 함수 표현을 의미한다.(Immediately Invoked Function Expression)

정의되자마자 즉시 실행되는 함수를 말한다.

함수 전체를 괄호()로 감싸고 즉시 실행 함수를 생성하는 괄호()를 붙이면 자바스크립트 엔진은 함수를 즉시 해석하여 실행한다.

ex)

(function hi(){
    console.log('hi');
})();

 

 

'Web > Develop' 카테고리의 다른 글

[NodeJS] 접속자 아이피 가져오기  (0) 2020.11.19
[Javascript] serialization(직렬화)  (0) 2020.11.04
[Javascript] 사칙연산 계산기  (0) 2020.08.21
[PHP] isset()  (0) 2020.06.14
[PHP] PDO로 데이터베이스(mysql) 연결  (0) 2020.06.14 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CALC</title>
    <script>
        // 숫자와 연산기호 입력
        function input_num(calc_num){
            document.getElementById("formula").value += calc_num;
        }

        // 사칙연산 수행
        function calculate(result){
           var formula = document.getElementById("formula").value;
           result = eval(formula);

           document.getElementById("result").value = result;
        }

        // 초기화
        function reset(){
            document.getElementById("formula").value = null;
            document.getElementById("result").value = null;
        }


    </script>
</head>
<body>
    <div align='center'>
        <input type="text" name="formula" id="formula" size="30"><br> <!-- size:30 == 180pt -->
        <input type="text" name="result" id="result" size="30"><br>

        <input type="button" value="초기화" style="width: 90pt;" onclick="reset()">
        <input type="button" value="=" size="15" id="result_btn" style="width: 90pt;" onclick="calculate()"><br>

        <input type="button" style="width: 45pt;" id="btn" value="7" onclick="input_num('7')">
        <input type="button" style="width: 45pt;" id="btn" value="8" onclick="input_num('8')">
        <input type="button" value="9" style="width: 45pt;" id="btn" onclick="input_num('9')">
        <input type="button" value="+" style="width: 45pt;" id="btn" onclick="input_num('+')"><br>

        <input type="button" value="4" style="width: 45pt;" id="btn" onclick="input_num('4')">
        <input type="button" value="5" style="width: 45pt;" id="btn" onclick="input_num('5')">
        <input type="button" value="6" style="width: 45pt;" id="btn" onclick="input_num('6')">
        <input type="button" value="-" style="width: 45pt;" id="btn" onclick="input_num('-')"><br>

        <input type="button" value="1" style="width: 45pt;" id="btn" onclick="input_num('1')">
        <input type="button" value="2" style="width: 45pt;" id="btn" onclick="input_num('2')">
        <input type="button" value="3" style="width: 45pt;" id="btn" onclick="input_num('3')">
        <input type="button" value="*" style="width: 45pt;" id="btn" onclick="input_num('*')"><br>

        <input type="button" value="0" style="width: 60pt;" id="btn" onclick="input_num('0')">
        <input type="button" value="." style="width: 60pt;" id="btn" onclick="input_num('.')"> 
        <input type="button" value="/" style="width: 60pt;" id="btn" onclick="input_num('/')"><br>
    </div>
</body>
</html>

 

'Web > Develop' 카테고리의 다른 글

[Javascript] serialization(직렬화)  (0) 2020.11.04
[Javascript] IIFE  (0) 2020.10.28
[PHP] isset()  (0) 2020.06.14
[PHP] PDO로 데이터베이스(mysql) 연결  (0) 2020.06.14
[PHP] phpinfo  (0) 2020.06.12

화살표 함수: 화살표 기호(=>)를 이용하여 함수를 작성하는 방법. 기존 함수보다 단순하고 간결한 문법으로 함수를 만들 수 있다. 

 

let sum (a,b) => a + b; //화살표함수

let sum = function(a, b){	//원래 함수
	return a+b;
};

 

'Web > Develop' 카테고리의 다른 글

[PHP] PDO로 데이터베이스(mysql) 연결  (0) 2020.06.14
[PHP] phpinfo  (0) 2020.06.12
[JavaScript] 함수 표현식과 함수 선언문  (0) 2020.01.27
[JavaScript] confirm()  (0) 2020.01.27
[JavaScript] prompt()  (0) 2020.01.26 
// 함수 선언문
function sum(a, b){
	return a+b;
}
// 함수 표현식
let sum = function(a, b){
	return a+b;
};

함수 선언문은 스크립트 실행 준비 단계에서 생성되기 때문에 함수 선언문의 앞에서도 호출이 가능하나 함수 표현식은 코드의 순서대로 순차적으로 생성 되어 표현식이 선언된 후에만 접근할 수 있다.

'Web > Develop' 카테고리의 다른 글

[PHP] PDO로 데이터베이스(mysql) 연결  (0) 2020.06.14
[PHP] phpinfo  (0) 2020.06.12
[JavaScript] 화살표 함수  (0) 2020.02.02
[JavaScript] confirm()  (0) 2020.01.27
[JavaScript] prompt()  (0) 2020.01.26

confirm : 매개 변수로 받은 질문과 확인 및 취소 버튼이 있는 창을 띄우는 함수

확인을 누르면 참(true), 취소를 누르면 거짓(false)를 반환.

 

confirm('Are you female??')

 

'Web > Develop' 카테고리의 다른 글

[PHP] PDO로 데이터베이스(mysql) 연결  (0) 2020.06.14
[PHP] phpinfo  (0) 2020.06.12
[JavaScript] 화살표 함수  (0) 2020.02.02
[JavaScript] 함수 표현식과 함수 선언문  (0) 2020.01.27
[JavaScript] prompt()  (0) 2020.01.26

JSON(JavaScript Object Notation)

json은 "속성 - 값" 또는 "키 - 값" 쌍으로 이루어진 데이터 오브젝트를 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.  AJAX, XML 등을 대체하며 .json 확장자를 가진다.

 

JSON 기본 자료형

자료형으로는 number, string, boolean, array, object, null 이 있다. 다음은 이 자료형 들의 특징이다.

number : 8진수, 16진수, 표현 방법은 지원하지 않는다.

string : 항상 큰따옴표(")로 묶어야 하고, 역슬래시(\)는 제어 문자를 표현한다.

  • \b 백스페이스
    \f 폼 피드
    \n 개행
    \r 캐리지 리턴
    \t 탭
    \" 따옴표
    \/ 슬래시
    \\ 역슬래시
    \uHHHH 16진수 네자리로되어 있는 유니코드 문자

array : 대괄호[]로 나타내며, 각 요소들은 (,)로 구분한다. 요소간의 순서에 의미가 있다.

  • ex) [10, {"k":10}, [1,"one"]]

object : 순서가 없는 "이름-값" 쌍의 집합으로 이름은 항상 string 자료형이다. 중괄호{}를 사용한다.

 

JSON 객체 예시 ( 키-값 패턴으로 표기)
 {
    "이름": "phulasso",
    "나이": 18,
    "성별": "남",
    "주소": "경기도 수원시",
 }

 

JSON 장점

  • 텍스트로 이루어져 있어 사람과 기계 모두 읽고 쓰기 쉽다.
  • 프로그래밍 언어와 플랫폼에 독립적이므로 서로 다른 시스템 간 객체를 교환하기에 좋다.
  • js문법을 채용하여 eval 명령으로 곧바로 실행이 가능하다. 그러나 외부에서 악성코드 유입 가능성이 있다. 최신 웹 브라우저 들은 json 전용 파서 기능을 내장하고 있고, 더 안전하고 빠르다.

 

 

 

'Web > Technical' 카테고리의 다른 글

Session  (0) 2020.11.16
Cookie  (0) 2020.11.14

문제 설명을 보면 자바스크립트 게임이고, 시스템을 우회하여 클리어 할 수 있냐고 물어보는 것 같다.

 

문제 페이지를 보면 어떤 게임을 할 수 있는 것 같다.

게임을 플레이 해 보면 31337점을 얻어야 게임을 클리어 할 수 있을 것 같다.

 

소스코드를 보면 다음과 같이 난독화된 자바스크립트 코드를 확인할 수 있다.

https://beautifier.io/ 라는 사이트에서 자바스크립트 코드의 난독화를 해제할 수 있다.

코드를 잘 살펴보다 보면 다음과 같이 score 값을 조작할 수 있는 부분을 발견할 수 있게 된다.

저기에 BTunnelGame['getScore']() 를 지우고 목표 점수인 31337으로 수정한후

전체 코드를 웹 페이지의 콘솔창에 입력한 후 게임을 실행하면 게임오버시 플래그를 얻을 수 있다.

 

 

알게된 점 : 자바스크립트 코드 난독화를 해제하는 사이트

'Security & Hacking > Wargame' 카테고리의 다른 글

[Wargame.kr] DB is really GOOD  (0) 2019.09.02
[Wargame.kr] md5 password  (0) 2019.08.29
[Wargame.kr] WTF_CODE  (0) 2019.08.27
[Wargame.kr] login filtering  (0) 2019.08.25
[Wargame.kr] QR CODE PUZZLE  (0) 2019.08.25

+ Recent posts

티스토리툴바