브라우저에 URL을 입력한다면?

김민창·2022년 3월 27일
0
post-thumbnail

어떻게 될까요

URL의 해석

  • 웹 브라우저가 URL을 해석한다

  • URL 문법은 여기서 확인하면 좋을것 같다

  • URL이 문법에 맞지 않는다면 입력을 웹 브라우저의 기본 검색엔진으로 검색을 요청


HSTS 확인

  • HTTP Strict Transport Security의 약어로, 보안에 취약한 HTTP 대신 HTTPS를 사용하여 통신해야한다고 알리는 보안 기능

  • 해당 URL이 HSTS에 존재한다면 HTTPS 프로토콜로 요청을 보내고, 존재하지 않는다면 HTTP 프로토콜로 요청을 보낸다

  • HSTS에 해당 URL이 있다면, 명시적으로 HTTP요청을 보내더라도 HTTPS로 요청


DNS 기록 캐시 확인

  • Domain Name System의 약어인 DNS는 호스트의 도메인 이름을 네트워크 주소로 바꾸거나 반대의 변환을 하는 역할

  • 모든 웹사이트는 각자의 IP주소를 가지고 있으며, 터미널에서 다음과 같이 확인할 수 있다

  • 해당하는 DNS의 기록을 찾기위해 브라우저는 browser - OS - router - ISP순으로 캐시를 확인한다

  • 캐시는 네트워크 트래픽을 통제하고 데이터 전송 시간을 높이는데 필수적으로 필요


DNS Query 요청

  • 만약 요청한 URL이 캐시에 없다면 URL을 호스팅하고 있는 IP주소를 찾기 위해 DNS Query를 날린다

  • DNS Query를 날린 후 내부 동작은 다음과 같다

  1. DNS Query를 DNS server로 날린다
  2. 가장 높은 도메인(top-level domain) 부터 찾는다
  3. 없다면 같은 레벨의 DNS server에서 찾는다
  4. 찾았다면 DNS server에서 점점 더 작은 단위의 DNS server를 찾아 해당하는 URL에 관한 IP를 얻는다
  5. IP를 얻은 후, 역순으로 요청한 클라이언트에 최종도착한다

사진출처


브라우저-서버 TCP 연결

  • 브라우저가 올바른 IP주소를 받게된다면, 해당 IP주소와 정보 전달을 위한 연결을 시도한다

  • TCP/IP three-way handshake를 통해 양쪽 모두 데이터 전송할 준비가 되었다를 보장

  1. 클라이언트는 서버가 새로운 연결을 위해 열려있는지 물어보며 서버에 SYN 패킷을 보낸다
  2. 서버가 새로운 연결을 시작할 수 있는 포트가있다면, SYN/ACK 패킷을 사용하여 SYN 패킷ACK으로 응답
  3. 클라이언트는 서버로부터 SYN/ACK 패킷을 수신하고 ACK 패킷을 전송하여 승인
  • 만약 요청이 HTTP가 아니라 HTTPS 요청이라면 암호화 통신을 위해 TLS Handshake가 추가된다

  • 해당 Handshake의 흐름은 다음과 같다

  1. TCP/IP three-way handshake를 우선적으로 거친다
  2. 클라이언트에서 자신의 버전, 암호 알고리즘 목록, 사용 가능한 압축 방식을 Client Hello 메시지에 담아 서버에 전송
  3. 서버는 클라이언트가 제공한 암호 알고리즘 목록, 압축 방식 목록 중 선택 / 세션 ID, CA에서 사인한 서버의 공개 인증서를 ServerHello에 담아 전송
  4. 클라이언트는 서버가 보낸 SSL 인증서가 CA목록에 있는지 확인 후, SSL이 확인된다면 클라이언트와 서버가 사용할 대칭키를 형성하기 위해 난수 바이트를 생성하여 서버의 공개키로 암호화 후 전송
  5. 서버는 클라이언트에 받은 대칭키를 서버의 개인키로 복호화

사진 출처


웹 서버에 HTTP 요청

  • 연결이 되었으니 해당 페이지를 달라고 서버에 GET요청을 보낸다

  • www.google.com을 요청한 상황이며, 해당 Status Code는 300번대로 HTTP가 들어온상황

  • 그리고 301로 요청한 리소스의 URI를 변경하여 HTTPS요청은 200으로 정상작동하는것을 볼 수 있다


사용자에게 보여주기

  • 브라우저는 응답받은 HTML을 화면에 단계별로 표시한다

  • HTML 골격만 먼저 렌더링한다

  • HTML 태그를 확인 후 이미지, CSS, JavaScript 파일과 같은 추가요소에 대한 GET 요청을 한다

  • 정적 파일(Static File)은 브라우저에 의해 캐시되기 때문에 동일한 페이지를 방문한다면 추가적으로 요청할 필요가 없다


굿

profile
개발자 팡이

0개의 댓글