[HTTP/ HTTPS] 차이와 HTTPS로 변환하는 방법 (feat.React)

나는 두개의 차이를 보안이라고 알고 있는데..
내가 놓치고 가는 부분이 있을수도 있으니 다시 알아보도록 하자

렛츠고

HTTP 란?

하이퍼 텍스트 전송 프로토콜(Hypertext Transfer Protocol)의 약자
서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜

인터넷 초기의 모든 웹사이트에서 기본적으로 사용되었던 프로토콜이며..
서버에서 브라우저로 데이터를 전송해 주는 용도로 제일 많이 사용된다고 한다.

HTTPS 란?

하이퍼 텍스트 전송 프로토콜 보안(Hypertext Transfer Protocol Secure)의 약자
말 그대로 보안성이 추가 되었다는 의미.

일반 HTTP 프로토콜의 문제는 " 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않는다는 것 "
= 데이터가 쉽게 도난당할 수 있다..

HTTPS 프로토콜은 SSL(보안 소켓 계층)을 사용함으로써 이 문제를 해결한다.

SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고받을 때 이것이 도난당하는 것을 막아준다.

HTTP 는 그냥 데이터를 주고받는 반면, HTTPS는 암호화키를 사용해서 암호화된 정보를 주고 받는다고 보면 된다.
그래서 남이 중간에 빼가더라도 훔친 데이터가 무슨 내용인지 읽어낼 수가 없게 되는 것이다.

HTTPS 의 추가적인 이점?

보안상에서만 차이가 있다고 하면 HTTPS 의 큰 이점이 느껴지지 않아서
엄청 중요한 데이터를 다루거나, 금전 거래가 이루어지지 않는 한은 굳이 전환할 필요가 없을 것이라고 생각될 수도 있으니까..

추가적인 이점을 조금만 알아보도록 하자.

1. 검색엔진 최적화(SEO)
구글은 HTTPS 웹사이트에 가산점을 더 준다고 한다.
그렇게 되면 사용자들은 더 많이 접속하게 될 것이고..
이게 아니더라도 사용자의 경우에는 신뢰할 수 있는 웹사이트를 더 찾게되니까..
선순환 그 자체가 되어버린다.

2. 가속화된 모바일 페이지(AMP, Accelerated Mobile Pages)

AMP란?
구글에서 만든 모바일 최적화를 위한 표준이다.
데스크톱 환경에 맞추어진 HTML이 모바일 브라우저를 통해 호출될 때 발생할 수 있는 속도를 저해하는 군더더기를 제거한 하나의 규격을 정의한 것

근데 사실 AMP를 적용하려면 개발 시에 추가적인 사항들을 더 고려해야하는 것으로 보인다.

🎆
사실 아무리봐도 제일 큰 이점은
'신뢰할 수 없는' 페이지라는 딱지를 떼는 것 같다.
...

+) HTTP 프로토콜을 사용하면 Secure Cookie 같은 기능이 막히는 것 같기도 하다.

리액트(REACT) HTTP to HTTPS

이거는 원하는 방법이 아닐 듯 하나.. (둘..)
혹시 로컬에서 https 인 척 개발환경을 구축하고 싶다면
여기 이 방법을 사용해보도록 하자. - https로 React 로컬 테스팅 하기

모르는 거 보단 소스라도 알고 있는게 약이다.
굳이 읽어보지 않더라도 혹시 사용할 일이 있으니까 주워두도록 하고.

https 를 하려면 추가적인 인증을 거쳐야하고,
호스팅 업체를 거쳐야해서 추가 비용을 내야하는 것 처럼 보인다.

유료로 HTTPS 전환하는 방법

나는 우리 회사가 어떤 식으로 처리할 지 잘 모르겠으니..
일단 무료 버전으로 해결하는 방법도 주워보도록 한다.

무료로 https 전환하는 방법

이렇게 링크 걸어두니까 이상한 사이트로 이동할 것만 같지만
sslforfree 같은 사이트를 이용하면 90일 제한이 걸리지만 무료로 전환할 수 있고,
90일마다 갱신해주면 계속 이용 가능한 것으로 보인다.
또한 추가적인 서비스(무료)를 세팅해주면 이용하면 알림이 뜨게 하거나 자동 갱신하도록 할 수 있는 듯

☆★☆★ [무/료/전/환]☆★☆★
~ 언제까지 HTTP! 쓰실건가용? ~
「도;입;하;면◇SSL&SEO&까지-」
○☆누구든사용가능 [90일간] ★◎

아무튼 서칭 결과 SSLFORFREE 가 제일 보편화된 사이트 같지만
위의 링크에 들어가게 되면 다른 사이트도 소개해두고 있다.

보고 후 참고해서 도입하자.

아차차. 혹시. 적용 후.

[REACT] HTTP로 접속할 시 HTTPS로 리다이렉트 시키는 방법

프론트 쪽 개발 폴더에 들어가서

$ npm install --save react-https-redirect

설치 하고
provider가 있는 root 쪽에 먹여주면 끝.

...

root.render(
  <React.StrictMode>
    <HttpsRedirect>
      <CookiesProvider>
        <App />
      </CookiesProvider>
    </HttpsRedirect>
  </React.StrictMode>
);

...

우리 게시판에는 쿠키도 먹이고 있어서 그 상단에 HttpsRedirect를 먹여줬다.
👶