CS 스터디

2.5 HTTP

3190024 2023. 6. 7. 22:32

참고한 책: 면접을 위한 CS 전공지식 노트 (http://www.yes24.com/Product/Goods/108887922)

2. 네트워크

    2.5. HTTP

        2.5.1. HTTP/1.0

        2.5.2. HTTP/1.1

        2.5.3. HTTP2

        2.5.4. HTTPS

        2.5.5. HTTP/3

 

p.114HTTP는 애플리케이션 계층으로서 웹 서비스 통신에 사용됨. HTTP/1.0부터 발전하여 HTTP/3이 되었음.

 

2.5.1 HTTP/1.0

HTTP/1.0은 기본적으로 한 연결당 하나의 요청을 처리함. -> RTT 증가

 

RTT 증가

RTT(Round Trip Time, 왕복 시간): 패킷이 목적지에 도달하고 나서 해당 패킷에 대한 응답이 출발지로 다시 돌아오기까지 걸리는 시간이며 패킷 왕복 시간. 네트워크 연결 속도와 안정성 진단할 때 일반적으로 사용됨.

(출처: https://melonicedlatte.com/2020/12/21/215100.html)

 

이미지 출처: https://thebook.io/080326/0122/

상황 가정) 사용자가 하이퍼 링크를 클릭했을 때:

  1. 브라우저와 서버 간 TCP 연결 초기화. 3-웨이 핸드셰이크와 관련 있음. 맨 처음 SYN 단계(클라이언트가 서버에 SYN 보내는 것)과 두 번째 SYN+ACK 단계(서버가 클라이언트이 SYN을 수신하고 서버의 ISN과 함께 클라이언트의 ISN+1을 보내는 것)이 이루어지는 동안 1RTT 가 걸림. 이때 주고받는 건 TCP 세그먼트.
  2. 3-웨이 핸드셰이킹의 마지막 ACK 단계(클라이언트가 서버의 ISN+1 값인 승인번호를 담아 ACK를 서버에 보내는 것)과 함께 HTTP 요청 메시지를 조합하여 TCP 연결로 보낸다. 요청 메시지가 서버에 도착하면 TCP 연결로 HTML 파일을 보낸다. 이 과정 동안 1RTT가 걸린다.

간단히 말하면 총 응답 시간은 2RTT + (서버에서 파일 보내는 시간)

(참고: Computer Networking: A Top-Down Approach 8th ed.)

 

서버로부터 파일을 가져올 때마다 TCP의 3-웨이 핸드셰이크를 계속해서 열어야 하기 때문에 RTT가 증가한다는 단점이 있음.

 

p.115

RTT의 증가를 해결하기 위한 방법

연결할 때마다 RTT가 증가하여 서버에 부담이 많이 가고 사용자 응답 시간이 길어짐

-해결을 위해 사용한 방법: 이미지 스플리팅, 코드 압축, 이미지 Base64 인코딩

 

이미지 스플리팅(= 이미지 스프라이트)

많은 이미지를 다안로드받게 되면 과부하가 걸려기 때문에 많은 이미지가 합쳐 있는 하나의 이미지를다운로드받고, 이를 기반으로 background-image의 position을 이용하여 이미지를 표기하는 방법

#icons>li>a {
	background-image: url("icons.png");
    ...
}
#icons>li:nth-child(1)>a {
	background-position: 2px -8px;
}
#icons>li:nth-child(2)>a {
	background-position: -29px -8px;
}

하나의 이미지로 합친다? >> 조각보 이어 붙이듯이 이미지를 이어붙인다.

(출처: https://kong-dev.tistory.com/217)

 

background-position 값과 width, height 값을 적용하여 필요한 이미지를 출력한다.

 

장점

-여러 이미지를 하나의 이미지로 줄였기에 서버에 요청수를 줄여 로딩 시간을 단축할 수 있다.

-hover 시 나타나는 이미지의 경우, 이미 스프라이트 이미지를 로딩했기에 로딩 지연이 없다.

-스프라이트 이미지 파일만들 관리하기에 관리에 용이하다.

 

단점

-스프라이트 이미지에 사용하려는 이미지의 정확한 position을 알아야 한다.

-스프라이트 이미지 내 이미지를 변경해야 할 시 단일 파일보다 번거롭다.

(출처: https://mystudy.tistory.com/m/58)

 

코드 압축

코드를 압축해서 개행 문자, 빈칸을 없애서 코드의 크기를(용량을) 최소화하는 방법

 

이미지 Base64 인코딩

이미지 파일을 64진법으로 이루어진 문자열로 인코딩하는 방법.

서버와의 연결을 열고 이미지에 대해 대해 서버에 HTTP 요청을 할 필요가 없음.

Base64 문자열로 변환할 경우 크기가 37% 정도 더 커지는 단점.

 

인코딩

정보의 형태나 형식을 표준화, 보안 처리 속도 향상, 저장 공간 절약 등을 위해 다른 형태나 형식으로 변환하는 처리 방식

 

p.117

2.5.2 HTTP/1.1

HTTP/1.0에서 발전한 것. 매번 TCP 연결을 하는 것이 아닌, 한 번 TCP 초기화를 한 이후에 keep-alive 옵션으로 여러 개의 파일을 송수신할 수 있음. HTTP/1.0에서도 keep-alive가 있었지만 표준화되지 않았고, HTTP/1.1엣서는 표준화되어 기본 옵션으로 설정됨.

이미지 출처: https://thebook.io/080326/0126/

한 번의 TCP 3-way handshake가 발생하면 그 다음부터는 발생하지 않음. 

문서에 포함된 다수의 리소스(이미지, 동영상, css 파일, js 파일 등)를 처리하려면 요청할 리소스 개수에 비례해서 대기 시간이 길어진다는 단점.

 

HOL Blocking(Head Of Line Blocking)

네트워크에서 같은 큐에 있는 패킷이 그 첫 번째 패킷에 의해 지연될 때 발생하는 성능 저하 현상.

>> 일차선 도로에서 앞차가 천천히 가면 뒤차들은 밀림.

 

무거운 헤더 구조

HTTP/1.1의 헤더에 쿠키 등 많은 메타데이터가 들어있고 압축이 되지 않아 무거웠음.

요청 헤더: method 정보, Accept, User-Agent, Host, If-Modified-Since, Refer, Cookie, Accept-Language, Accept-Encoding.. 무려 9개!

응답 헤더: http 버전과 응답토드, Server, Date, Content-Type, Last-Modified, Content-Length, ETag.. 7개

(출처: https://thebook.io/080326/0126/)

 

HTTP/2는 헤더가 어떻게 되어 있나?

-첫번째 요청에서 6개 필드를 보냈을 때, 두번째 요청에서는 중복되는 필드들은 제외하고 중복이 되지 않은 필드만을 전송.

-중복헤더 데이터를 전송하지 않으므로 매 요청마다 오버헤드를 크게 줄일 수 있다.

(출처: https://http2.tistory.com/13)

 

p. 118

2.5.3 HTTP/2

SPDY 프로토콜에서 파생된 HTTP/1.x보다 지연시간을 줄이고 응답시간을 더 빠르게 할 수 있음.

멀티플렉싱, 헤더 압축, 서버 푸시, 요청의 우선순위 처리를 지원하는 프로토콜.

 

SPDY

speedy라는 단어를 기반으로 Google이 많은 조어. Google이 'Make the Web Faster'노력의 하나로 제안한 새로운 프로토콜.

특히 전송 지연(latency)문제의 해결에 주로 집중

특징

-항상 TLS(Transport Layer Security)위에서만 동작.. HTTPS로 작성된 웹 사이트만 적용 가능

-HTTP 헤더 압축

-바이너리 프로토콜

-Multiplexing

-Full-duplex interleaving과 스트림 우선 순위

-Server Push

-웹 사이트를 재작성할 필요 없음.

(출처: https://d2.naver.com/helloworld/140351)

 

멀티플렉싱(Multiplexing)

여러 개의 스트림을 사용하여 송수신하는 것.

특정 스트림의 패킷이 손실되었다고 하더라도 해당 스트림에만 영향을 미치고 나머지 스트림은 정상적으로 동작.

 

스트림

시간이 지남에 따라 사용할 수 있게 되는 일련의 데이터 요소를 가리키는 데이터 흐름

 

출처: https://developers.google.com/web/funda mentals/performance/http2

하나의 TCP 채널을 통해서 여러 데이터를 주고 받는 것.

메시지를 (바이너리 메세지)프레임 단위로 나눠서 사용할 수 있어 비동기 코드와 같이 통신이 가능해짐.

여러 리소스를 요청한 뒤, 메시지를 나눈 프레임이 모여 하나의 메시지를 만들 수 있게 되면 바로 사용할 수 있음.

요청한 리소스가 응답이 오래 걸려도 기다리지 않고 나중에 요청한 리소스의 응답을 받아 대기하는 동안 다른 리소스를 활용할 수 있음.

대기가 줄어들어 성능 향상.

(출처: https://ibocon.tistory.com/257)

 

출처: https://thebook.io/080326/0129/

단인 연결을 사용하여 병렬로 여러 요청을 받을 수 있고 응답을 줄 수 있음.

HTTP/1.x의 HOL Blocking 해결할 수 있음.<<요청한 리소스가 응답이 오래 걸려도 기다리지 않고 나중에 요청한 리소스의 응답을 받아 대기하는 동안 다른 리소스를 활용할 수 있음.

 

헤더 압축

HTTP/1.x는 헤더가 커서 문제.

헤더 압축을 통해 해결. 허프만 코딩 압축 알고리즘을 사용하는 HPACK 압축 형식을 가짐.

 

허프만 코딩(huffman coding)

문자열을 문자 단위로 쪼개 빈도수를 세어 빈도가 높은 정보는 적은 비트 수를 사용하여 표현.

빈도가 낮은 정보는 비트 수를 많이 사용하여 표현

-> 전체 데이터 표현에 필요한 비트양을 줄임.

 

서버 푸시

HTTP/1.1에서: 클라이언트가 서버에 요청을 해야 파일을 다운로드받을 수 있음.

HTTP/2: 클라이언트 요청 벗이 서버가 바로 리소스를 푸시할 수 있음.

출처:&nbsp;https://thebook.io/080326/0131/

서버푸시 x: 달라는 것만 줌

서버푸시 O: 달라는 거 주는데 주면서 파일을 읽어보고 안에 들어 있던 css 파일을 서버에서 푸시하여 줌.

 

2.5.4 HTTPS

HTTP/2는 HTTPS 위에서 동작함. 

HTTPS는 애플리케이션 계층과 전송 계층 사이에 신뢰 계층인 SSL/TLS 계층을 넣은 신뢰할 수 있는 HTTP 요청.

이를 통해 통신을 암호화.

 

SSL(Secure Socket Layer)/TLS(Transport Layer Security Protocol)

SSL 1.0 > SSL 2.0 > SSL 3.0 > TLS 1.0 > TLS 1.3

SSL에서 TLS로 명칭이 변경되었으나 보통 SSL/TLS로 많이 부름.

전송 계층에서 보안을 제공하는 프로토콜.

클라이언트와 서버가 통신할 때 제3자가 메시지를 도청하거나 변조하지 못하게 함.

공격자가 서버인 척하며 사용자 정보를 가로채는 네트워크 상의 '인터셉터' 방지할 수 있음.

보안세션을 기반으로 데이터 암호화.

보안 세션이 만들어질 때 인증 메커니즘, 키 교환 알고리즘, 해싱 알고리즘 사용됨.

 

보안 세션

보안이 시작되고 끝나는 동안 유지되는 세션

SSL/TLS는 핸드셰이크를 통해 보안 세션을 생성하고 이를 기반으로 상태 정보 등을 공유

 

세션

운영체제가 어떠한 사용자로부터 자신의 자산 이용을 허락하는 일정 기간.

사용자는 일정 시간 동안 응용 프로그램, 자원 등을 사용할 수 있음.

 

출처:&nbsp;https://thebook.io/080326/0133/

클라이언트와 서버가 키를 공유하고 이를 기반으로 인증, 인증 확인 등의 작업이 일어나는데, 이 한 번의 1-RTT가 생긴 후 데이터 송수신.

클라이언트엣서 사이퍼 슈트를 서버에 전달하면 서버는 받은 사이퍼 슈트의 암호화 알고리즘 리스트를 제공할 수 있는지 확인

제공 가능 >> 서버어서 클라이언트로 인증서를 보내는 인증 메커니즘 시작. 이후 해싱 알고리즘 등으로 암호화된 데이터 송수신 시작.

 

TLS 핸드셰이크 과정 >>(https://www.cloudflare.com/ko-kr/learning/ssl/what-happens-in-a-tls-handshake/)

 

사이퍼 슈터

프로토콜, AEAD 사이퍼 모드, 해싱 알고리즘이 나열된 규약. 총 5개.

• TLS_AES_128_GCM_SHA256 순서대로 프로토콜, AEAD 사이퍼 모드, 해싱 알고리즘

• TLS_AES_256_GCM_SHA384

• TLS_CHACHA20_POLY1305_SHA256

• TLS_AES_128_CCM_SHA256

• TLS_AES_128_CCM_8_SHA256

 

AEAD(Authentiacted Encryption with Associated Data) 사이퍼 코드

데이터 암호화 알고리즘.

AES_128_GCM: 128비트의 키를 사용하는 표준 블록 암호화 기술과 병렬 계산에 용이한 암호화 알고리즘 GCM이 결합된 알고리즘을 뜻함.

 

인증 메커니즘

CA(Certificate Authorities)에서 발급한 인증서를 기반으로 이루어짐.

인증서는 안전한 연결 시작에 필요한 '공개키'를 클라이언트에 제공하고 사용자가 접속한 서버가 신뢰할 수 있는 서버임을 보장함.

인증서는 서비스 정보, 공개키, 지문, 디지털 서명 등으로 이루어져 있음.

CA는 신뢰 성이 엄격하게 공인된 기업들(Comodo, GoDaddy, GlobalSign 아마존 등)만 참여 가능.

 

CA 발급 과정

서비스가 CA 인증서를 받으려면 사이트 정보와 공개키를 CA에 제출해야 함.

CA는 공개키를 해시한 값인 지문(finger print)을 사용하는 CA의 비밀 키 등을 기반으로 CA 인증서 발급.

 

개인키(=비밀키)

개인이 소유하고 있는 키이자 반드시 자신만이 소유해야하는 키

 

공개키

공개되어 있는 키

 

암호화 알고리즘

키 교환 암호화 알고리즘

-ECDHE(Elliptic Curve Diffie-Hellman Ephermeral): 대수곡선 기반

-DHE(Diffie-Hellman Ephermeral): 모듈식 기반

둘 모두 디피-헬만(Diffie-Hellman) 방식을 근간으로 만들어짐.

 

디피-헬만 키 교환(Diffie-Hellman key exchange) 암호화 알고리즘

암호키를 교환하는 한 방법.

출처:&nbsp;https://thebook.io/080326/0136/

g, x, p를 알고 있음 -> y 구하기 쉬움

g, y, p를 알고 있음 -> x 구하기 어려움.

ㄴ원리에 기반한 알고리즘.

책 p.125 보고 그린 그림

악의적인 공격자가 개인키 또는 공개키를 가지고도 PSK가 없기 때문에 아무것도 할 수 없음.

이를 통해 키를 암호화할 수 있음.

 

해싱 알고리즘

데이터를 추정하기 힘든 더 작고, 섞여 있는 조각으로 만드는 알고리즘

SSL/TLS에서는 해싱 알고리즘으로 SHA-256 알고리즘과 SHA-384 알고리즘을 씀.

 

SHA-256 알고리즘

해시 함수의 결괏값이 256비트인 알고리즘.

해싱을 해야 할 메시지에 1을 추가하는 등의 전처리를 하고 전처리된 메시지를 기반으로 해시 반환.

 

해시: 다양한 길이를 가진 데이터를 고정된 길이를 가진 데이터로 매핑(mapping)한 값

해싱: 임의의 데이터를해시로 바꿔주는 일. 해시 함수가 이를 담당.

해시 함수: 임의의 데이터를 입력으로 받아 일정한 길이의 데이터로 바꿔주는 함수.

 

TLS1.3은 사용자가 이전에 방문한 사이트로 다시 방문한다면 SSL/TLS에서 보안 세션을 만들 때 걸리는 통신을 하지 않아도 됨. 이를 0-RTT라고 함.

 

SEO에도 도움이 되는 HTTPS

SEO(Search Engine Optimization): 검색 엔진 최적화. 검색엔진으로 웹 사이트를 검색했을 때 그 결과를 페이지 상단에 노출시켜 많은 사람들이 볼 수 있도록 최적화하는 방법. >> 검색했을 때 위로 뜨게 하는 법

구글은 다른 조건이 모두 동일하다는 가정 하에 HTTPS 서비스를 하는 사이트가 그렇지 않은 사이트보다 seo 순위가 높을것이라고 밝힘.

>>https 서비스를 하는 사이트를 더 위에 뜨게 해주겠다.

-방법: 캐노니컬 설정, 메타 설정, 페이지 속도 개선, 사이트맵 관리

 

캐노니컬 설정

<link rel="canonical" href="https://~.com/~" />

사이트 link에 캐노니컬을 설정

캐노니컬 태그: 여러 URL을 가진 웹 페이지가 있을 때, 해당 페이지의 대표 URL을 설정할 수 있는 태그. 한 페이지의 대표 URL을 지정하여 검색 로봇이 웹 페이지를 크롤링할 때 중복 URL로 인한 페널티가 적용되지 않게끜 도와주는 역할.

(출처: https://yozm.wishket.com/magazine/detail/1540/ )

 

메타 설정

출처:&nbsp;https://thebook.io/080326/0139/

html 파일의 가장 윗부분인 메타를 잘 설정한다.

 

-메타 태그를 통해 검색 엔진에게 홈페이지의 컨텐츠가 무엇에 관한 것인지 쉽게 알려줄 수 있음.

-메타태그는 사이트가 SERP에 표시되는 방식과 웹 사이트를 클릭하려는 사용자 수에 영향을 미치기 때문에 중요함. 따라서 트래픽과 전환에 영향을 미쳐 SEO 및 순위에 영향을 미칠 수 있음.

(출처: https://fourward.co.kr/blog/meta-tags-for-seo)

 

SERP(Search Engine Result Page): 검색 엔진 결과 페이지

 

페이지 속도 개선

사이트의 속도는 빨라야 함. 페이지의 속도는 빨라야함. PageSpeedInsights에서 서비스에 대한 리포팅을 주기적으로 받으며 관리해야 함

 

사이트맵 관리

사이트맵(sitemap.xml)읠 정기적으로 관리하는 것은 필수.

사이트맵: 사이트에 있는 페이지, 동영상 및 가티 파일과 그 관계에 관한 정보를 제공하는 파일. Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 크롤링함.xml 형식의 파일

(출처: https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=ko) 

 

XML(Extensible Markup Language): 데이터를 정의하는 규칙을 제공하는 마크업 언어. 자체적으로 컴퓨팅 작업을 수행할 수 없지만, 대신 구조적 데이터 관리를 위해 모든 프로그래밍 언어 또는 소프트웨어를 구현할 수 있음.

>>HTML과 비슷하지만 태그를 내 마음대로 정해서 쓸 수 있다.

(출처: https://aws.amazon.com/ko/what-is/xml/ )

 

HTTPS 구축 방법

크게 세가지

-직접 CA에서 구매한 인증키 기반으로 HTTPS 서비스 구축

-서버 앞단에 HTTPS를 제공하는 로드밸런서 두기

-서버 앞단에 HTTPS를 제공하는 CDN 두시

 

2.5.5 HTTP/3

HTTP/1.1, HTTP/2와 함께 Worldl Wide Web에서 정보를 교환하는 데 사용되는 HTTP의 세 번째 버전.

  돌아가는 계층 기반
HTTP/2 TCP TCP
HTTP/3 QUIC UDP

+멀티플렉싱, 초기 연결 설정 시 지연 시간 감소

QUIC(Quick UDP Internet Connctions): 다른 프로토콜에 비해 가볍고, 성능과 보안성을 모두 고려해서 설계되었으며, 암호화된 전송을 통해 다중화된 스트림을 제공하는 UDP 기반 전송 프로토콜.

(출처: https://judo0179.tistory.com/41 )

 

초기 연결 설정 시 지연 시간 감소

QUIC은 TCP를 사용하지 않기 때문에 통신을 시작할 때 번거로은 3-way handshake를 거치지 않아도 됨.

 

출처: https://thebook.io/080326/0143/

첫 연결 설정에 1-RTT만 소요됨.

클라이언트가 서버에 어떤 신호를 한 번 주고, 서버도 거기에 응답하기만 하면 바로 본 통신을 시작할 수 있음.

QUIc는 프로토콜 내에 TLS를 포함하여 전달과 암호화 절차가 동시에 수행됨.

(출처: https://donggov.tistory.com/188)

 

QUIC에는 순방향 오류 메커니즘(FEC, Forword Error Correction)이 적용됨.

전송한 패킷이 손실되었을 때 수신 측에서 에러를 검출하고 수정하는 방식.

열악한 네트워크 환경에서도 낮은 패킷 손실률을 자랑함.