Web Hacking_Web

<서론>

-웹이란, 인터넷이라는 통신망을 활용하여 구현된 전 지구적 정보 공간이다.

여기서는 World Wide Web / W3 / Web을 다룬다. 이 웹은 현대 정보 통신을 대표하는 통신 수단 둥 하나이다.

 

이번 강의의 key = 웹의 정의/ 웹을 구성하는 여러 요소[학습 뒤 다시 보러오기]

-> 웹을 구성하는 요소가 프론트엔드, 백엔드인가?

=> HTML / CSS/ JS/ 웹 브라우저/ 웹 서버/ 도메인 네임 시스템/ HTTP/ 백엔드 서버 등등 더 확장시켜서 봐야한다.

 

 

 

 

 

<본론>

1. 웹 발전과 웹 보안의 중요성

-인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스를 웹이라고 한다. 그리고 여기서 정보를 제공하는 주체를 웹 서버, 정보를 받는 이용자를 웹 클라이언트라고 한다.

 

* *) HTTP(Hyper Text Transfer Protocol): 인터넷에서, 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약이다. HTTP는 80번 포트를 사용하기로 정의되어 있다. 따라서 HTTP서버는 80번 포트에서 대기하고, 클라이언트는 TCP를 사용해 연결을 설정한다.

  웹 브라우저는 사용자가 요청하는 자원을 가리키는 URL 주소에 사용할 응용 프로토콜을 표현할 수 있다. 즉 URL 주소의 첫 번째 부분을 사용해 서비스의 유형을 표현한다. ex HTTP 서버로부터 웹 정보를 얻으려면 http://www.....와 같이 URL주소에 HTTP를 사용한다고 명시해야한다.

 

 

* *) URL(Uniform Resource Locator): 방대한 컴퓨터 네트워크에서 자신이 원하는 정보 자원을 찾기 위해, 해당 정보 자원의 위치와 종류의 정확히 파악하기 위해, 이를 나타내는 일련의 규칙을 의미한다.

URL은 기본적으로 ' 통신 규칙:// 인터넷 호스트 주소/ 경로 이름 ' 으로 구성된다.

 

 

- 과거의 웹 서비스는 단순히 정보를 보여주는 것에서 그쳤다면, 현재는 정보를 검색하고 직접 제품을 구매할 수 있도록 변화했다. 오프라인에서 이뤄지던 많은 상호작용이 현재 디지털 형태로 변환되어 웹 서비스로 구현되고 있다. 따라서 웹에서 처리하는 정보 자산들이 많아짐에 따라, 이들을 안전하게 보관 처리하는 필요성도 함께 증가하고 있다.

(->if 고객이 물건을 구매하는 과정에서 고객의 주소, 카드 정보등이 웹을 통해 서버로 전달되는 동안 이 정보들이 안전하게 보호되지 않는다면 큰 피해를 야기할 수 있다.)

 

 

 

 

 

 

2. 웹 서비스, 프론트엔드와 백엔드

-이전의 웹 서비스가 이용자가 요청하는 정보를 제공하기만 하는 수동적인 형태의 서비스였다면, 현재는 이용자의 요청을 해석하고 가공하여 필요한 정보와 기능을 제공하는 능동형 서비스에 가깝다.

(ex. 구글 검색 서비스는 이용자가 '검색에'라는 형태로 자신이 원하는 정보를 추상화하여 전달하면 -> 구글이 이를 해석하고 가공하여 필요한 정보를 제공한다.)

 

-이런 서비스 구조에서, 이용자의 요청을 받는 부분을 프론트엔드, 요청을 처리하는 부분을 백엔드라고 한다.

 

-프론트엔드는 이용자에게 직접 보여지는 부분으로, 웹 리소스라는 것으로 구성된다. 페이지가 보여주는 정보들은 모두 웹 리소스에 명시되어있다(글, 글자 색상, 배경 등등)

 

 

 

 

 

 

3. 웹 리소스

: 웹에 갖춰진 정보 자산을 의미한다.

 

ex. http://dreamhack.io/index.html 주소를 입력하면 dream.io에 존재하는 /index.html경로의 리소스를 가져오라는 의미이다. 모든 웹 리소스는 URI를 가지며, 이를 이용하여 식별된다.

(+URL/ URI/ URN 정의  URI & URL (velog.io) )

 

-웹의 프론트엔드를 구성하는 대표적인 리소스들은 다음과 같다.

• HTML(Hyper Text Markup Language): 웹 문서의 뼈와 살을 담당한다. 태그와 속성을 통한 구조화된 문서 작성을 지원한다.
• CSS(Cascading Style Sheets): 웹 문서의 생김새를 지정한다. 웹 리소스들의 시각화 방법을 기재한 스타일 시트이다. 글자의 모양, 색깔, 이미지의 크기나 위치 등을 CSS를 통해 지정할 수 있다. 브라우저는 이를 참고하여 웹 문서를 시각화한다.
• JS(JavaScript): 웹 문서의 동작을 정의한다. 이용자가 버튼을 클릭했을 때 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS를 통해 구현할 수 있다.

 

 

 

 

 

 

4.웹 클라이언트와 서버의 통신(이번 강의의 총 집합이다. 이해할 수 있을 정도로 Study)

1. [클라이언트] 이용자가 브라우저를 이용하여 웹 서버에 접속한다
2. [클라이언트] 브라우저는 이용자의 요청을 해석하여(능동적인 웹 서버) HTTP형식으로 웹 서버에 리소스를 요청한다
3. [서버] HTTP로 전달된 이용자의 요청을 해석한다(능동적인 웹 서버)
4. [서버] 해석한 이용자의 요청에 따라 적절한 동작을 한다. 리소스를 요청하는 것이라면, 이를 탐색. 계좌 송금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리
5. [서버] 이용자에게 전달 할 리소르를 HTTP형식으로 이용자에게 전달한다
6. [클라이언트] 브라우저는 서버에게 응답 받은 HTML, CSS, JS등의 웹 리소스를 시각화하여 이용자에게 보여준다.

 

* *) 브라우저: 구글, chrom, firefox 등 인터넷이라는 거대한 공간을 탐험하는 도구