에러 발생
깃 허브 배포 후 미세먼지API를 가져오는 상황에서 HTTPS -> HTTP 통신 불가 에러 발생
- 프론트(html) 배포 : HTTPS만 지원(보안)
- 백엔드(JS) 배포 : HTTP 만 지원
(참고 : HTTPS를 사용하여 GitHub Pages 사이트 보호)
연결이 비공개로 설정되어 있습니다. , 이 사이트는 보안 연결(HTTPS)이 사용되지 않았습니다.
(출처 : 사이트 연결이 안전한지 확인)
에러 내용
❌
Mixed Content: The page at 'https://...' was loaded over HTTPS,
but requested an insecure resource '...'. This request has been blocked;
the content must be served over HTTPS.
한국어 : 'https://...'의 페이지가 HTTPS를 통해 로드되었지만 안전하지 않은 리소스 '...'를 요청했습니다. 이 요청은 차단되었습니다. 컨텐츠는 HTTPS를 통해 제공되어야 합니다.
뭘 건들였더니.. 에러 자체가 사라졌지만 저위의 Mixed Content가 있긴 함..
https://로 바꾸면 엑세스 자체가 불가능하며 ERR_SSL_PROTOCOL_ERROR 프로토콜 에러가 뜸
에러 원인
암호화 된 HTTPS 페이지에 암호화되지 않은 HTTP를 통해 요청할 때 발생하는 에러
미세먼지API가 http이기 때문(이것도 유료로 구매를 해야 하나보다)
해결 방안
❗ API 구매후 :
요청 URL을 HTTPS로 변경
http://을 //로 변경
Web App을 SSL 없이 자동적으로 HTTP로 연결, 운영 상황에서는 HTTPS로 연결해주기 때문에 유연성이 좋아짐
❗ 외부 API가 HTTPS를 지원하지 않는 경우 :
HTML
head > meta tag 에 스크립트 적용
HTTP 컨텐츠를 자동으로 업그레이드 해주는 정책을 활성화 한다는 의미
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />React
public > index.html에서<head></head> 사이에 아래 코드 적용
HTTP 컨텐츠를 자동으로 업그레이드 해주는 정책을 활성화 한다는 의미
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />(출처 : Mixed Content)
(출처 : HTTPS -> HTTP 통신 불가)
(출처 : HTTPS -> Mixed Content 에러 (https에서 http 요청))
결과
-
강의가 제공하는 API가 https 연결을 지원하지 않는 것을 확인
-
meta 태그를 통한 정책 변경의 경우 MDN에서 말하기로는 요청하려는 자원이 https 요청을 실제로 지원하지 않는 경우 http로 변환하여 요청하지 않고 요청에 실패한다고 함
(출처 : CSP: 업그레이드-안전하지 않은-요청)
- 강의 서버측에서 SSL 인증서 발급을 통해 https 요청을 사용하지 않는 한 Github을 통한 배포 시 연결은 어려울 것이라고 함
