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

[leejh4197]

질문 작성자

이주형

문제 상황

netlify에서 배포 후 공공api 데이터를 받아오지 못하는 이슈 입니다.

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

프로젝트 저장소 URL

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

환경 정보

[yamoo9]

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

[leejh4197]

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

[yamoo9]

문제 원인

해당 문제는 웹 브라우저에서 혼합 콘텐츠(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을 업그레이드 하도록 브라우저에 지시합니다. (참고)

참고

• 혼합 콘텐츠 수정 ← web.dev
• HTTPS – 크롬과 파이어폭스, 혼합 컨텐츠(Mixed Content) 차단