[React] 악수를 3번? 3-Way-Handshake, 주소창에 자물쇠를 붙이자! HTTPS/SSL/TLS, 동적파일 배포해보자! Frontend-Server

HTTPS 연결의 중요성

와이어샤크?

와이어샤크란 실시간 네트워크 분석을 위해 패킷 교환 과정을 포착하는 도구 중 하나이다.

80번 포트와 443번 포트
💡 표시되어 있는 80은 http를 의미하며, 443포트는 https를 의미한다.
이 포트 번호들은 생략이 가능하다!!

와이어샤크를 사용하면 api의 문제인지, 컴퓨터 자체의 문제인지 3-way-handshake를 통해 진단할 수 있다.

HTTPS 배포

SSL 인증서

HTTPS는 SSL/TLS 인증서가 있어야 사용할 수 있다.
AWS에서는 웹서비스 제작을 위해 필요한 기본적인 퍼블릭 인증서를 무료로 제공하고 있다.

ARP스푸핑

공용 WIFI 사용할 때 주의해야 한다!

3-way-handshake

왼쪽이 프론트엔드, 오른쪽이 백엔드 컴퓨터라 가정해보자.
프론트엔드 컴퓨터에서 백엔드 컴퓨터로 요청을 보내는 것을 ‘SYN’
백엔드 컴퓨터에서 프론트엔드 컴퓨터로 요청에 대한 응답을 ‘SYN + ACK’
다시 프론트엔드 컴퓨터에서 백엔드 컴퓨터로 ‘ACK’를 돌려주게 된다.

4-way-handshake

연결을 종료할 떄 FIN이 추가되면서 4-way-handshake 형식이 된다.

---

SSL 인증서

1. 무료인증서 다운로드
2. 유료인증서 구매
3. 클라우드 관리형 인증서

cloudfront는 CDN서비스임!
CDN => Content Delivery Network