web

웹에서 처리하는 정보 자산들이 많아짐에 따라 이들을 안전하게 보관하고 처리해야 할 필요성도 함께 증가하였다.
그래서 웹을 통한 정보의 교환 과정에서 이러한 민감한 정보들이 유출되거나 악용되지 않도록 보호하는 웹 보안의 중요성이 대두하고 있다.

---

web

: 인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스

- front-end: 이용자의 요청을 받는 부분  /  baxk-end: 요청을 처리하는 부분

 

web resource

: 웹에 갖춰진 정보 자산

- 모든 웹 리소스는 고유의 URL을 가지며, 이를 이용하여 식별된다

- HTML: 웹 문서에서 태그와 속성을 통한 구조화된 문서 작성을 지원

- CSS: 웹 리소스들의 시각화 방법을 기재한 스타일 시트

- JS: 웹 문서의 동작을 정의 (== client-side-script)

 

c=client, s=sever

c: 브라우저를 이용하여 웹 서버에 접속

> c: 브라우저가 이용자의 요청을 해석하여 HTTP형식으로 웹 서버에 리소스 요청

> s: HTTP로 전달된 이용자의 요청을 해석

> s: 해석한 이용자의 요청에 따라 적절한 동작

> s: 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달

> c: 브러우저는 서버에게 응답받은 웹 리소스를 시각화하여 이용자에게 보여줌

---

HTTP(Hyper Text Transfer Protocol)

: 서버와 클라이언트의 데이터 교환을 request와 response 형식으로 정의한 protocol

- 클라이언트가 서버에게 요청하면, 서버가 응답

- 웹 서버는 HTTP서버를 HTTP서비스포트(TCP/80 or TCP/8080)에 대기

- 클라이언트가 서비스 포트에 HTTP 요청을 전송하면, 이를 해석하여 적절한 응답을 반환

 

HTTPS(HTTP over Secure socket layer)

: TLS를 이용하여 HTTP의 약점을 보완한 프로토콜

*TLS 프로토콜: 서버와 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화

- 공격자가 중간에 메시지를 탈취하더라도 이를 해석하는 것이 불가능

- HTTP 통신이 도청과 변조로부터 보호 

---

web browser

: HTTP/S

- 이용자와 웹 서버의 통신을 중개

- 서버로부터 전달받은 다양한 웹 리소스들을 가공해 이용자에게 효과적으로 전달

- 이용자가 다양한 프로토콜들을 알지 못해도 쉽게 웹을 사용할 수 있도록 도와준다

 

URL(Uniform Resource Locator)

: 웹에 있는 리소스의 위치를 표현하는 문자열

- 브라우저가 URL을 사용하여 서버에 특정 리소스를 요청할 수 있다

 

DNS(Domain Name Server)

: host의 도메인 이름을 IP로 변환하거나 IP를 도메인 이름으로 변환

 

web rendering

: 서버로부터 받은 리소스를 이용자에게 시각화하는 행위

- 서버의 응답을 받은 웹 브라우저가 리소스의 타입을 확인, 적절한 방식으로 이용자에게 전달

- 사파리-webkit, 크롬-blink, 파이어폭스-gecko 엔진

---

devtools[F12]

- HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있다

- JS 코드를 대상으로 디버거 제공

 

- 요소검사

> 특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있음

 

- device toolbar

> 브라우저의 화면 비율 및 user-agent를 원하는 값으로 변경할 수 있음

 

- elements

> HTML 코드 읽기

> HTML 코드 수정[코드 선택 후 F2]

 

- console[ctrl+shift+J]

> front-end의 JS 코드에서 발생한 각종 메시지를 출력

> 이용자가 입력한 JS 코드를 실행

 

- sources

> 현재 페이지를 구성하는 웹 리소스들을 확인할 수 있음

> 원하는 JS 디버깅

 

- network

> 서버와 오가는 데이터 확인

- network: copy

> 원하는 형태로 복사 가능

 

- application

> 쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 어플리케이션과 관련된 리소스 조화

>> cookie: 브라우저에 저장된 쿠키 정보 확인 및 수정