[LAB-2] 공공 API 데이터를 불러오지 못하는 이슈

leejh4197 commented 1 year ago

질문 작성자

이주형

문제 상황

netlify에서 배포 후 공공api 데이터를 받아오지 못하는 이슈 입니다. 예상으로는 배포된 https환경에서 http로 요청하는 데이터를 불러오지 못하는 것 같습니다..

프로젝트 저장소 URL

https://github.com/kindergarten-udon/udon-house

환경 정보

yamoo9 commented 1 year ago

@leejh4197 님 이슈가 Closed 되어 있는데 문제가 해결된 상태인가요?

leejh4197 commented 1 year ago

아니요 야무쌤 발생한 이슈가 변경되어 다시 수정하여 요청드렸습니다!

yamoo9 commented 1 year ago

문제 원인

해당 문제는 웹 브라우저에서 혼합 콘텐츠(Mixed content)의 http 요청 차단(보안 이슈 봉쇄) 정책에 따른 결과입니다. "혼합 콘텐츠(Mixed content)"란? https로 설정된 웹 사이트에서 http 콘텐츠가 혼합되어 있는 경우를 말합니다. 이런 혼합 콘텐츠(Mixed content)가 포함된 경우, 사용자는 해당 위험성을 알 수 없습니다.

Google은 이 부분을 https 보안에 있어 가장 큰 문제로 인식하고 Chrome 브라우저를 사용할 때 https 웹 사이트에서 http 요청을 차단합니다. (2020년 10월 이후 모든 콘텐츠 차단 됨. 참고)

문제 해결

⚠️ 아래 소개된 방법은 HTTPS를 지원하지 않는 공공 API에는 적용되지 않습니다. (참고)

이 문제는 배포된 사이트가 HTTPS를 사용하는데 반해, 사용 중인 API는 HTTP로 서비스 되므로 혼합 콘텐츠로 간주되어 웹 브라우저에서 요청을 차단합니다. 🤔

공공데이터포털 Open API는 HTTPS로 서비스하는데 반해, 서울열린데이터광장은 HTTP로 서비스 하기에 문제가 발생한 듯 하네요. 😳

서울열린데이터광장 (http://data.seoul.go.kr)
공공데이터포털 (https://www.data.go.kr)

이 문제를 해결(우회)하기 위해 알려진 방법은 index.html 파일에 아래 코드를 삽입한 후, 다시 배포하는 것입니다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

upgrade-insecure-requests CSP 지시문은 네트워크 요청을 하기 전에 안전하지 않은 URL을 업그레이드 하도록 브라우저에 지시합니다. (참고)

yamoo9 / likelion-FEQA