1-4) id, class / 서버연동 / javascript

style 까지 적용을 했었던 지난번 예제를 다시 확인하자.

글로벌 속성 : id, class

 - 자바스크립트에서도 객체 접근시 자주 사용되기 때문에 잘 알아둬야함

1. id : 유일한 요소를 표현

2. class : 여러 요소를 표현하는게 가능

지난 예제를 다시 확인해 보면, 

# 지난 예제

p (paragraph) 전체에 스타일 적용을 했기 때문에, 가사내용 전체가 동일한 스타일이다.

스타일 태그를 작성하는것 보다, 직접 적용하는것이 우선순위가 더 높다.

직접 해주게 되면 각 단락별로 (내가 원하는곳에만) 적용 가능하다.

이럴경우 id, class 를 이용해서 적용시켜주면 유용하다.

즉, 

# 위와같이 적용해 주는것 보다

# 위와 같은 방법으로 지정해주는 것이 훨씬 효율적이다.

이럴경우 셀렉터를 지정해 주어야 한다.

id는 유일한 요소를 표현하는데 적합하고, class는 여러 요소를 공통적으로 표현하는데 적합하기 때문에

둘을 적절하게 사용한 예제를 확인해보도록 하자.

# id와 class를 활용, 셀렉터 지정

위와같이 <style> 태그 내에 셀렉터를 지정해주고, <p class="multi"> 또는 <p id="unique"> 와 같이

<p [class or id]="name"> 과 같은 형태로 적용.

셀렉터로 지정할 때 앞에오는 문자 -> # : id, . = : class 이다.

unique(id) 는 유일한 요소를 표현하는데 적합하다고 하였으나, 만약 중복된 이름을 사용하게 될 경우

에러가 나거나 문제가 되진 않는다. 중복된 성격으로 접근이 되는데 단지 id만이 갖는 속성을 잃게될 뿐.

태그를 따로 파일로 뺀것을 CSS 라고 한다.

CSS ( Cascading Style Sheet ) : 서식파일로 따로 스타일을 빼 놓은 것. 

셀렉터 및 속성 만 따로 파일로 저장해둬서 라이브러리를 구축.

확장자명 .css 를 사용해서 파일로 따로 빼고 lyrics 예제 에서 스타일을 제거한 것이다.

따라서 lyrics 에서 css를 포함시켜서 style을 적용시키는것을 해보도록 하자.

html파일과 css파일이 같은 경로에 있는것을 권장. 그렇지 않을경우 절대경로를 입력해줘야 한다.

*)_ bootstrap 같은 프레임워크들이 css를 라이브러리 화 해놓은 것이다.

그러면 이 css파일을 해당 html 파일에 적용시키는 방법?

 - 링크 를 사용.

 - anchor : 하이퍼링크

 - link : 해당 문서와 연결된 정보

따라서 link 탭에 css를 정의해주면 자동으로 인식해준다(링크는 셀프클로징 태그).

꼭 지정해줘야 하는 세가지로는 type(타입), href(경로), rel(참고) 가 있다.

<link type="타입" href="경로" rel="참고/비고" /> 

href에 들어갈 경로는 css파일이 html파일과 같은 경로에 있다면 상대경로만 입력해주어도 된다.

다른 경로에 저장되어 있다면 당연히 절대경로로 지정해주어야 함.

# 위와같이 같은 경로에 css파일을 따로 빼서 저장해 둔다음

# 링크를 통해 css파일을 적용시킨다.

그러면 이번엔 이 html파일을 서버와 결합시켜보자.

#> yum list installed httpd

설치가 잘 되어있는지부터 확인해 보자. 위 명령어 입력시 좌측 하단에 httpd.i686이 나타난다면 잘 설치 된 것이다.

이것이 있어야 아파치 서버를 실행시킬 수 있다. *)_ httpd : 하이퍼텍스트를 전송하기위한 데몬 프로그램

#> service httpd start

서버를 구동시키겠다는 명령어이다. 그 이후

#> ifconfig

입력하여 하단에 보이는 IP주소를 URL창에 입력헀을 때

# 다음과 같이 CentOS 페이지가 나오면 성공적으로 아파치가 실행중이라는 의미이다.

위와같이 서버가 구동이 됐다는 의미는 내 html을 전송할 준비가 되었다는 것이다.

#> cat /etc/passwd

입력시 파일들의 홈 디렉토리 값을 확인 할 수 있다.

# 저 html까지의 경로가 아파치 홈 디렉토리의 html 디폴트경로 이다. (홈 디렉토리 내의 다큐먼트 루트)

이 의미를 잘 이해를 해야하는데, 우리가 컴퓨터를 부팅하여 최초로 접속하는곳은 해당 사용자의 홈 디렉토리 이다.

마찬가지로 아파치 내의 html 홈 디렉토리는 가장 기본이 되는 경로라고 볼 수 있다.

따라서 100.100.100.110에 접속을 한다는 의미는 해당 서버의 다큐먼트 루트에 접근하여 파일에 접속을 시도하는 것이다.

기본적으로 디폴트값은 index.html 파일이므로 뒤에 아무것도 입력하지 않고 100.100.100.110에 접속을 하면

100.100.100.110/index.html 파일이 디폴트 값으로 연결이 된다.

마찬가지로 100.100.100.110/test 란 

100.100.100.110 해당 서버 다큐먼트 루트에 있는 test파일을 찾아 들어간다 는 의미이다.

따라서 내 서버의 주소만 알고 있으면 누구든 내 파일에 접근 할 수 있다.

#> cd /var/www/html

따라서 아파치 html 홈디렉토리에 접근하여 index.html 파일을 생성해주자.

# 작성 이후 아까 URL창에 IP를 입력하여 접속한 웹페이지를 새로고침 하게되면

# 내가 작성한 내용이 나오게 된다.

같은 원리이다. 우리가 작성해 둔 lyrics.html 파일을 이 창에 옮기기만 하면

해당 아이피로 접근이 가능하다.

*)_ 명령어

그냥 cd 누르면 최상위로 한번에 올라감

파일을 그냥 복사 붙혀넣기 해도 된다. Xshell 사용해서 복사 붙혀넣기를 하게되면 더 편리하다.

인코딩방식때문에 한글은 깨질 수 있다. 

콘솔(가상머신)자체에서 사용하려면 머신 상단 메뉴 edit -> 붙혀넣기

여기에 스타일까지 적용시켜주려면, css파일도 같이 넣어주면 됨

# 위와같이 index.html 파일을 생성해준다. 우리가 기존에 작성한 lyrics.html 의 내용을 그대로 붙혀넣기 하였다.

# 마찬가지로 style.css 파일을 생성하여 기존에 작성된 코드를 그대로 붙혀넣기 하였다.

# 따라서 최종적으로 아파치 html 홈디렉토리엔 두개의 파일이 존재하고 있다.

# 내 서버에서 동작중인 모습이다.

이렇게 두개 파일(index.html, style.css) 모두 지정해주면 서버와 html을 일대일 대응 시키는 방법이다.

여기까지가 WEB 1.0 에 관련된 내용이다. WEB 2.0으로 넘어가는 과도기에 Javascript가 등장 하였지만, 

최초 등장시에는 엄청난 파장을 일으키지는 않았다.

WEB 2.0 에서의 관건은 CGI 이다. CGI로 넘어가기 전에 자바스크립트를 학습 하는것이 좋다.

요새는 자바스크립트가 동적 제어의 표준이 되었기 때문에 매우 중요하다.

Javascript -> Ajax -> Jquery -> Angular JS 같은 라이브러리 전부 알고 있어야 한다.

자바스크립트는 Client Side Script Language 이다.

Client Side Script Language : 클라이언트 측에서 실행되는 방식

 - HTML, javascript, XML, ...

이와 대립되는 개념이 CGI 이다.

CGI

 - 서버측에서 실행시켜서 결과만 볼 수 있는 방식

자바스크립트는 서버에서 실행되는것이 아니라, 웹브라우저에서 실행되는 것이다.

즉, 서버가 실행해서 돌려주는것이 아니라, 소스코드 자체를 돌려준다.

서버에게 소스코드를 전달받아 웹브라우저가 실행을 시키는 것.

위 개념을 잘 숙지해야 공격시에 적절한 루트를 고려할 수 있다.

Client Side Script Language

 - 서버에서 실행된 결과를 보여주는것이 아니라, 웹브라우저가 서버로부터 소스코드를 전달받아 실행시키고 있는것이다. 

그렇기때문에 웹브라우저에서 소스코드를 그대로 열어볼 수가 있는것이다.

소스코드를 통채로 받아와서 웹브라우저에서 실행시키고 있는것.

소스코드를 볼 수 있는 유일한 언어가 자바스크립트이고, 

자바스크립트는 웹브라우저에서 실행을 해야하기때문에 소스코드가 안보일래야 안보일 수가 없다. 

이런개념이 공격할때 매우 중요한 단서가 된다.

Javascript 기초

0. hello, javascript 출력

출력문의 종류에는

    - alert                    // 출력문

    - console.log()

    - document.write()

    - prompt()               // 입력 받아옴

    - confirm()               // 이 두개로 실행된다는 것은 자바스크립트 내에서 실행이 된다는것을 알고있어야 한다.

1. 연산자 : 산술(더하기,빼기,곱하기..), 논리, 비트, 관계

2. 변수 : 일반변수(정수, 실수, 문자)

배열

3. 제어문 : 분기(if/switch), 반복(for/while)

4. 함수 : 모듈화 가능

5. 객체

자바스크립트의 특징만 건들고 기본적인 문법같은건 타 언어와 동일하다고 볼 수 있으니 간단하게만 살펴보도록 하자.

기본적인 자바스크립트 튜토리얼은 www.w3schools.com 에 잘정리되어있다.

크롬의 F11(개발자모드)는 웹페이지 분석을 쉽게하도록 도움을 준다.

또한 크롬에선 개발자모드를 이용해서 콘솔에서 직접 실행하는게 가능하다.

# 콘솔창에서 alert() 입력 한 결과

URL 창에서도 사용이 가능하다.

URL 창에 javascript:alert('Hello, Javascript') 입력시

# 위와같이 경고창을 띄울 수 있다.

아니면 서버에다가 자바스크립트 페이지를 제작해도 된다.

# 아예 서버내에 javascript.html 파일을 하나 생성을 해서, javascript.html로 직접 접근을 하는것도 하나의 방법이다.

# 자바스크립트의 내용은 헤드에넣건 바디에넣건 크게 상관이 없다.

# 크롬 -> 개발자모드 에서는 이 모든 내용을 확인할 수 있다.

alert() : 웹에 직접 출력

document.write() : 웹페이지에 출력, 현재 열고있는 웹페이지에 그대로 출력을 하게 됨

console.log() : 콘솔 창에 출력(주로 에러메세지)

# 자바스크립트는 변수 사용도 쉽다. 파이썬 변수와 비슷한데, 타입을 가리지 않는다.

기본적으로 앞에 var 를 붙히지 않고 변수에 값을 할당해도 되지만, var를 붙혀주는것이 여러 측면에서 좋다.

# typeof(변수명) 명령어로 변수의 타입을 확인 할 수 있다. 

자바스크립트에서는 세미콜론 (;) 이 optional이다. 

다만 한줄에 여러 명령어를 작성하는 경우엔 반드시 붙혀야 함.

(html에서는 스타일부분, 셀렉터 사용할 때 세미콜론 썼었지만 자바스크립트는 옵셔널 함)

근데 붙혔을때는 문제가 안생기는데 안붙혔을때는 문제가 생기는 경우가 있으므로 세미콜론은 그냥 붙혀 쓰는것을 권장한다.

주석문 : c, java와 동일 // 이렇게 사용하면 된다.

자바스크립트에서는 배열도 하나의 객체로 취급됨.

자바스크립트 기본구조

<script>                //스크립트 태그 안에 들어가야 자바스크립트 코드로 인식. 그 밖은 

//자바스크립트 코드로 인식하지 않음

</script>

페이지가 다시 로드되면, 해당 페이지에서 입력한 자바스크립트 내의 변수들은 사라진다. 따라서 리눅스창에 넣어둬야함

var ret = confirm();

값을 할당해주는것 (사용자한테 입력받은 코드를)

# confirm() 으로 사용자에게 값을 받아와서 대입시킴.

Yes or No 여부에 따라 ret에는 True or False 값이 대입됨.

# 헤드와 바디의 결과가 결국 하나의 내용임(연계됨) 을 알 수 있다.

# prompt(인자1, 인자2) : 값을 받아오는 두번째 방법. prompt() 함수는 인자를 두개까지 받아올 수 있다.

# 사용자의 입력을 출력 뿐 아니라 콘솔창에서 직접 변수로 확인이 가능하다.

그말인 즉, 자바스크립트 특성상 콘솔창에서 해당 변수를 사용도 가능하다는 의미.

이런 언어적 특징을 이해하고 있는것이 매우 중요하다.

공격할때도 웹페이지 하나가지고 요즘은 가능하다. 이런 특징들을 알아야 적절하게 공격할 수 있다.