프론트에서 https로 배포하면서
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. This request has been blocked; the content must be served over HTTPS. 오류가 발생하였다.
암호화된 https 페이지에 암호화되지 않은 http를 통해 요청할 때 발생하는 에러였다.
이 블로그를 참고해서 적용했고 결과는
아래처럼 성공!
HTTPS(HyperText Transfer Protocol Secure)
http에 SSL(보안 소켓 계층)을 사용한 프로토콜이다.
http는 서버에서 브라우저로 전송되는 정보가 암호화되지 않는다는 문제점을 가지고 있어 데이터가 쉽게 도난당할 수 있다.
왜 HTTPS를 사용해야 될까?
-
보안성 확보 가능
http로 데이터를 전송하는 경우, 네트워크로 전달되는 데이터는 원본 그 자체이다. 그래서 해커가 중간에서 가로채면 해당 데이터에 어떤 내용이 있는지 바로 알 수 있다.
반면 https로 데이터를 전송하는 경우, 데이터를 암호화해서 전송하기 때문에 해커가 중간에서 가로채도 이 데이터가 어떤 내용을 가지고 있는지 알기 어렵다. -
SEO(검색 엔진 최적화)
구글의 경우, https를 사용하는 웹 사이트에 가산점을 부여하기 때문에 http를 사용하면 마이너스 요소가 된다.
따라서 자신의 웹 사이트가 검색엔진에 빈번하게 노출되고 싶다면 https는 불가피한 선택이다.
또, AMP(가속화된 모바일 페이지, 모바일 기기에서 컨텐츠를 훨씬 빠르게 로딩하기 위한 방법)를 만들 때, https를 필수로 사용해야 한다.
SSL(Secure Sockets Layer)/TSL
ssl 업그레이드 버전이 tsl이지만 일반적으로 두단어를 동일한 의미로 사용한다.
웹 서버와 웹 브라우저 간의 보안을 위해 만든 프로토콜로, 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고
서버와 브라우저가 민감한 정보를 주고받을 때, 해당 정보가 도난당하는 것을 막아준다.
https는 http 자체를 암호화하는 것이 아니다.
http를 사용해서 운반하는 내용, 즉 http message body를 암호화한다. 이때, http header는 암호화되지 않는다.
SSL은 공개키 방식과 대칭키 방식을 혼합해서 사용한다. 왜냐하면 각 방식이 가진 단점 때문에 한 방식만 채택해서 사용하지 않고 두 방식을 적절히 섞어서 사용한다.
- 🔐 공개키 방식(= 비대칭키 방식)
서로 다른 키로 암호화와 복호화를 수행하는 방법으로, 암호화 시에는 공개키를 사용하고 복호화 시에는 개인키를 사용한다.
공개키로 암호화 한 데이터는 오직 개인키로만 복호화할 수 있기 때문에 누구든지 개인키를 가져가도 상관이 없다. - 🔐 대칭키 방식
동일한 키로 암호화와 복호화를 수행하는 방법으로, 누구든지 암호화에 이용된 키를 가지고 있다면 해당 데이터를 쉽게 복호화할 수 있다.
Let's Encrypt, AWS Certificate Manager 는 인증서를 무료로 발급해주는 서비스이다.
SSL 통신 과정
SSL은 공개키 방식으로 대칭키를 전달한다.
대칭키를 활용해서 암호화와 복호화를 하고, 서버와 브라우저 간 통신을 진행한다.
즉,
1. 데이터 암호화와 복호화를 위한 한쪽의 대칭키를 다른 쪽의 공개키로 암호화하여 전송하면
2. 반대편에서 자신의 개인키로 복호화하여 그 반대편의 대칭키를 알아내고
3. 이 대칭키를 바탕으로 서로 통신을 하게 된다.
