브라우저 작동방식을 알아보자(feat. Http vs Https)

sanghun Lee·2021년 2월 24일

http https 브라우저

Today I Learned

목록 보기

63/66

1. URL 주소 입력

이 때 웹브라우저가 URL을 해석하게 된다

URL(Uniform Resource Locator)로서 유일자원지시기라고 해석된단다 ..
~~해석이 번잡한데~~ 여튼 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는 웹리소스에 대한 참조라고 명기되어있다.

FTP인 경우 FTP클라이언트, HTTP인 경우 웹브라우저 등의 수단(?)을 이용해야하고 이때 FTP와 HTTP로 불리는 것을 프로토콜이라 칭한다.

1.1 URL의 문법

 scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]

scheme: http, ftp ..등이 기재된다
':' 은 프로토콜의 이름 다음으로 프로토콜이름을 구분하기 위한 구분자이다
'//' IP혹은 도메인 정보가 필요한 프로토콜이라면 //를 적게 된다.
Ex) https:abcde.com

1.2 URI의 문법

 scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

path에 대한 기재가 URL과 다르다는 것을 알 수 있다. 그러니까 path뒤의 쿼리에 대한 존재가 필요 없을 수도 있다는 표현이니 URI가 URL의 더 상위 개념인 것으로 보면된다.
Ex) urn:isbn:0-123-45678-1

2. DNS 조회

URL 주소 중 도메인 네임에 해당하는 부분을 DNS 서버에서 검색한다.

ps.이 때 DNS 서버에 검색하기전 순서대로 브라우저, 장비, DNS서버 순서대로 그곳에 캐싱이 되어있는 해당하는 주소가 있다면 그곳을 참고한다 ~~(해당 알고리즘 있는데 언젠가 공부하겠지?)~~

이렇게 찾고 난 뒤 도메인의 이름에 해당하는 IP주소를 반환해준다.

3. 웹 서버에 HTTP(s) 요청 메시지를 생성한다.

2번의 과정에서 알게된 IP주소를 가지고
그 주소로 http(s)에 해당하는 프로토콜을 사용하여 요청 메시지를 보내게 된다
3.이때 TCP프로토콜을 사용하여 인터넷을 거치게 되고 해당 IP주소를 가진 컴퓨터로 요청을 전송한다

TCP는 웹 브라우저들이 월드 와이드 웹에서 서버에 연결할 때 사용되며,
이메일 전송이나 파일 전송에도 사용된다.
네트워크의 정보전달을 통제하는 프로토콜이자 인터넷을 이루는 핵심프로토콜이다.

전송 제어 프로토콜-위키백과

통신 프로토콜 또는 통신 규약은 컴퓨터나,
원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계이다.

통신 프로토콜

http vs https

http는 월드와이드웹의 통신프로토콜이다.
http는 클라이언트와 서버사이에서 이루어지는 요청/응답프로토콜이다. 브라우저 전용이라고 한다.
웹브라우저가 http를 통해 서버로 부터 웹페이지나 그림등을 요청하면 서버는 이 요청에 응답해 필요한 정보를 보내준다.

https는 간단히 말해 security를 높인것이다(안정성이 높아짐)
높아진 이유는 통신의 인증과 암호화를 위해 암호화알고리즘을 통해 오고가는 데이터를 암호화 시켜 uri가 도중 노출되어도 암호화가 되어있어 통신을 통해 어떠한 데이터가 오고가는지 쉽게 유추할 수 없다는 장점이 있다

~~단점은 돈을 내야 한다~~

재밌는 내용으로 2019년 2월 방통위에서는 정부와 협력하여 불건전내용과 저작권 침해를 원천 차단하기 위해 https를 통한 해외사이트의 접속을 막는 인터넷 검열방안을 읍읍..

4.응답메시지를 생성한다

요청 메시지를 받은 컴퓨터에서 해당 URL정보에 해당하는 데이터를 검색한다
HTTP응답 메시지를 생성한다
다시 TCP 프로토콜을 사용하여 인터넷을 거치고 요청했던 컴퓨터로 데이터를 보낸다

5.그리기 시작

1 http응답메시지를 받는다
2. 웹페이지의 데이터로 변환이 되고 서버가 리소스를 제공하면 브라우저의 렌더링 엔진이 작동한다
3. 브라우저의 렌더링엔진의 html, css 파서(parser)가 각 각 DOM ,CSSOM트리로 변환되고 렌더트리로 결합되게 된다.
이렇게 생성된 렌더트리를 기반으로 브라우저 웹페이지를 표시한다.

자바스크립트는 렌더링엔진이 아닌 자바스크립트 엔진이 처리하는데
html파서가 html문서 중 script태그를 만나게 되면 js코드를 실행하기 위해서 DOM프로세스 를 중지하고 자바스크립트 엔진으로 제어 권한을 넘기며 자바스크립트 엔진이 sciprt태그 내의 코드 또는 src 속성(attribute)에 정의 된 자바스크립트 파일을 로드하고 파싱하여 실행한다. 이 실행(자바스크립트 실행)이 완료되면 다시 html파서로 제어 권한을 넘겨 브라우저가 중지했던 시점 부터 다시 DOM생성을 재개한다

이렇게 브라우저는 동기적으로 HTML,CSS JS를 처리한다!
이러한 이유로 <script>태그의 위치가 중요해진다.