Web
인터넷은 모든 기종의 컴퓨터들을 연결한 통신망으로 TCP/IP를 사용한다.
웹, 이메일, FTP, DNS 등이 인터넷 서비스에 해당한다.
웹 (World Wide Web)은 하나의 사이트 혹은 사이트들 간의 관계가 복잡하게 얽혀있으며, 하이퍼텍스트 구조를 활용해 수많은 정보들을 연결한다.
HTML, HTTP, URL 등으로 구성된다.
웹은 프론트엔드와 백엔드로 나뉜다.
프론트엔드는 눈에 보이는 클라이언트에 위치하는 정적 페이지로 수동적이며 고정적으로 처리되며 단방향 통신이 이루어진다.
주로 사용하는 언어는 HTML, CSS, Javascript 이다.
프레임워크는 Angular JS, Bootstrap을 사용한다.
백엔드는 서버에 위치하는 동적 페이지로 처리도 통신도 실시간으로 이루어진다.
주로 사용하는 언어는 PHP, Java, C++, C#, Python 이다.
프레임워크는 Express, Laravel을 사용한다.
HTML
HTML 은 웹 문서, 주로 홈페이지를 만들 때 사용하는 기본적인 웹 언어의 한 종류이다.
문서의 글자 크기, 색, 글꼴, 그래픽, 하이퍼링크 등을 정의하는 명령어이다.
태그는 html에서 사용되는 명령어로 <> 기호를 사용한다. <h1> 이런 식으로.
속성은 태그에 추가 정보를 부여할 때 사용하며, 시작 태그 안에서만 값을 설정할 수 있다.
html 페이지의 구성은 다음과 같다.
현재 웹페이지가 html 문서임을 알려주는 <!DOCTYPE>,
문서의 시작과 종료를 의미하는 <HTML>,
아래 출력부에서 필요한 것을 제공하는 선언부 <HEAD>,
사용자에게 보이는 출력부 <BODY>.
<!DOCTYPE>
<html>
<head>
<title> 페이지 타이틀 </title>
</head>
<body>
<h1> 제목 </h1>
<p> 문장 </p>
</body>
</html>
폼을 정의하는 최상위 태그인 폼 태그 <form> 의 속성
action 은 입력 데이터의 전달 위치를 지정하고, method는 입력 데이터의 전달 방식을 선택한다.
즉, 정보는 form 태그에 저장된 action 속성의 장소로 method 속성에 적힌 방식으로 전달된다.
<body>
<form>
</form>
</body>
이때 자주 사용되는 method 속성에는
주소에 한정된 용량의 데이터를 입력해서 보내는 방식인 GET 요청과,
주소가 변경되지 않고 비밀스럽게 용량 제한 없이 데이터를 전달하는 방식인 POST 요청이 있다.
<body>
<form method="post">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
폼 태그 <input> 는 사용자가 입력할 수 있는 태그로 속성은 아래와 같다.
입력 양식을 설정하는 type,
입력 양식을 식별하기 위한 이름을 설정하는 name,
입력 양식의 초깃값을 설정하는 value,
버튼을 생성하는 button,
체크박스를 나타내는 checkbox,
파일을 입력하는 file,
비밀번호를 입력하는 방식인 password,
하나의 라디오 버튼인 radio,
다중 초기화를 담당하는 reset,
제출하는 submit,
글자를 입력하는 text.
<!DOCTYPE>
<html>
<head>
<title> Document </title>
</head>
<body>
<form>
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
</html>
폼 태그 <select> 는 여러 개의 목록에서 몇가지 선택할 수 있는 입력 양식 요소이다. 속성에는 다음과 같은 것들이 있다.
목록 상자를 식별하기 위한 이름을 설정하는 name,
한 번에 표시할 항목 개수를 나타내는 size,
다중 선택을 하는 multiple.
<!DOCTYPE>
<html>
<head>
<title> Document </title>
</head>
<body>
<select name="food" size="4">
<option>김밥</option>
<option>떡볶이</option>
</select>
</body>
</html>
그 외에도 다양한 태그들이 있다.
<title> 태그는 웹 브라우저 상단 제목이다.
<a> 태그는 다른 페이지로 이동하게 하며 링크 주소를 나타내는 href 속성을 가진다.
<ul> 태그는 순서가 없는 목록의 태그로 disc, circle, square, none 등의 type 속성을 가진다.
<ol> 태그는 순서가 있는 목록의 태그로 1, a, A, i, I 등의 type 속성을 가진다.
<table> 태그는 표를 나타내는 것으로 속성에는 셀의 높이를 지정하는 rowspan과, 셀의 너비를 지정하는 colspan이 있다.
<img> 태그는 이미지를 출력하며 속성에는 이미지 경로를 지정하는 src, 이미지가 없을 때 나오는 글자인 alt, 이미지의 너비와 높이를 의미하는 width & height가 있다.
PHP
PHP는 동적인 웹사이트를 위한 서버 측 스크립트 언어로 웹 서버에서 해석되며,
개인 홈페이지를 제작하는 스크립트 언어에서 발전했기 때문에 웹 개발에 특화되어 있다.
C언어 기반 언어라 C에서 지원하는 함수를 사용할 수 있다.
PHP로 작성된 코드를 HTML 소스 문서 안에 넣으면 PHP 처리 기능이 있는 웹 서버에서 해당 코드를 인식하여 작성자가 원하는 웹 페이지를 생성할 수 있게 된다.
PHP를 기반으로 만들어진 사이트에는 위키피디아, 페이스북 등이 있다.
오픈소스이기 때문에 무료이고 접근하기 용이하다.
윈도우나 리눅스 계열의 대부분의 운영체제에서 이용이 가능하다. (<-> ASP는 윈도우에서만 사용 가능하다.)
웹 개발에 특화되어 있어 복잡한 사이트 구축에 비효율적이다.
PHP 동작 원리
1. 사용자가 브라우저를 통해 웹 서버에 웹 페이지를 요청한다.
2. 웹 서버가 웹 페이지의 데이터 베이스와 연동을 위해 PHP 파서에 스크립트 실행을 요청한다.
3. PHP 파서는 데이터 베이스와 작업을 한다.
4. PHP 파서는 작업 처리 결과를 웹 서버로 전달한다.
5. 웹 서버는 전달받은 데이터로 웹 페이지를 완성해 사용자의 브라우저로 응답을 전송한다.
PHP 기초 문법
PHP 권장 스타일은 다음과 같다.
<?php
echo "PHP"
?>
주석을 다는 스타일은 C언어와 동일하다.
//주석문 : 한 줄 주석
/*주석문*/ : 여러 줄 주석
#주석문 : 한 줄 쉘 스타일 주석
echo() 함수는 HTML 스트링에 문자를 출력하는 함수이고
실제 함수가 아니기 때문에 인수 전달 시 괄호를 생략하는 것이 가능하며
키워드, 클래스, 함수, 사용자 함수 이름의 대소문자를 구분하지 않는다.
PHP는 변수 선언 시 달러 기호 $를 사용한다.
C언어와 달리 변수 선언 시 타입을 명시하지 않고 해당 변수에 대입하는 값에 따라 자동으로 결정된다.
PHP 관련 취약점
GET /POST 파라미터를 통한 Injection
쿠키를 통한 Injection
HTTP Header 부분의 Injection
대표 공격 : XSS, SQL Injection, 파일 시스템 공격 등
Javascript
Javascript는 웹 페이지의 동작을 담당하는 객체지향 스크립트 언어로, 동적이며 타입을 명시할 필요가 없다.
또한 번역과 동시에 실행이 이루어지는 인터프리터 언어에 속한다.
C와 같은 언어는 소스 파일을 작성하고 컴파일하여 실행 파일(.exe)로 만들어 사용하지만,
SQL, Python, Scratch 등과 같은 인터프리터 언어는 컴파일 작업을 거치지 않고도 소스 코드를 바로 사용할 수 있다.
Javascript 기초 문법
기본 <script> ... </script>
주석 /*...*/, // ...
출력 document.write("...")
입력값 받기 변수 = prompt("...")
변수 선언은 var 로 한다.
var a=1;
var b="coding";
var c='coding';
단, 이미 선언된 변수를 수정할 때는 var을 사용하지 않는다.
줄바꿈을 명령의 끝으로 간주하면 세미콜론(;)은 생략이 가능하다.
7개의 데이터 타입을 제공하는데 이는 원시 타입과 객체 타입(object)으로 나뉜다.
원시 타입의 변수인 number, boolean, string, null, undefined, symbol 은 데이터 복사가 일어났을 때 메모리 공간을 새로 확보해 독립적인 값을 저장한다.
변수 선언 시 데이터 타입을 명시하지 않으며,
변수에 할당된 값의 타입에 의해 동적으로 변수 타입이 결정되는데 이를 동적 타이핑이라고 한다.
//number
var num1=1001;
var num2=10.50;
//string
var string1='Hello';
var string2="World";
//boolean
var bool=true;
//null
var foo=null;
//undefined
var bar;
//object
var obj={name:'Lee', gender:'male'};
//array
var array={1, 2, 3};
//function
var foo=function() {};
'WEB HACKING' 카테고리의 다른 글
| [SWING] Web Hacking 06 (0) | 2022.11.19 |
|---|---|
| [SWING] Web Hacking 05 (0) | 2022.11.12 |
| [SWING] Web Hacking 04 (0) | 2022.11.06 |
| [SWING] Web Hacking 03 (0) | 2022.09.24 |
| [SWING] Web Hacking 02 (0) | 2022.09.20 |
