mixed content 에러시 http://localhost 허용? (feat:CORS error)

회사에서 백엔드 미들웨어 코드를 받아서 , 프론트 개발인 저의 쪽에서 테스트를 하는 경우 갑자기 의문이 들었습니다.

이클립스로 백엔드 미들웨어를 http://localhost:4000 포트로 띄운 뒤 , 프론트에서 미들웨어와 비동기 통신을 하는것 이였는데요,

저의(프론트) 테스트 환경은 https 였고 , 미들웨어는 이클립스로 서버를 띄웠으니 당연히 http 인 localhost 였습니다.

 

axios.get('http://localhost:4000') // Call middleware API from https

 

그런데 https에서 http와 통신하면 mixed content에러가 나는것으로 알고있었는데 , 에러가 안나고 백엔드에서 데이터를 잘만 갖고왔습니다.

Mixed content error

"mixed content 에러"는 HTTPS로 보호된 웹페이지에 HTTP로 호스팅된 리소스가 포함되어 보안이 약화되는 문제입니다. 브라우저는 이를 보안 위험으로 간주하고 해당 리소스를 차단합니다.

본론으로 돌아와서 구글링을 통해 확인 해보니 localhost는 mixed content를 허용 해준다고 하네요..

 

MDN 에선 , 

Firefox: 55 이후 버전: http://127.0.0.1/의 루프백 주소에서 mixed content 허용

Firefox:84 이후 버전: http://localhost/ 및 http://*.localhost/ URL의 루프백 주소에서도 mixed content 허용
Chrome: http://127.0.0.1/의 루프백 주소에서 혼합 콘텐츠 허용 http://localhost/에서도 mixed content 허용
Safari: 어떤 mixed content도 허용하지 않음.
로컬 개발 및 테스트 환경에서 편의를 제공하기 위해 로컬호스트로부터 로드되는 혼합 콘텐츠를 허용할 수 있습니다.

 

CORS 에러와 Mixed content error의 차이 

비동기 통신으로 데이터를 받아올때 빼놓을수 없는 에러중 하나가 CORS에러인데 , mixed content error와의 차이점을 알아보겠습니다.

CORS 에러와 Mixed Content 에러는 둘 다 웹 개발에서 자주 마주칠 수 있는 통신 에러이지만, 발생하는 상황과 원인이 다릅니다.

 

CORS(Cross-Origin Resource Sharing) 에러
 CORS는 웹 브라우저에서 보안 상의 이유로 스크립트가 다른 도메인(Origin)으로부터 리소스를 요청하는 것을 제한하는 정책입니다. 즉, 웹 사이트가 동일한 도메인, 포트, 프로토콜에서 리소스를 요청하는 것이 기본적으로 허용되지만, 다른 도메인으로 요청할 때는 서버가 해당 요청을 허용해주어야 합니다.

 

일반적으로 CORS 에러는 웹 사이트에서 API 서버로 데이터를 요청할 때 주로 발생합니다. 예를 들어, 웹이 http://example.com 도메인에 호스팅되어 있고, 이 웹에서 http://api.example.com 도메인에 위치한 API 서버에 데이터를 요청하면, 브라우저는 이 요청을 보안상의 이유로 차단할 수 있습니다. API 서버가 웹 앱 도메인(http://example.com)에서 오는 요청을 허용하도록 CORS 설정을 해줘야 이 문제를 해결할 수 있습니다.

Mixed Content 에러

Mixed Content 에러는 보안 연결(HTTPS)과 보안되지 않은 연결(HTTP) 사이에서 믹스된 콘텐츠를 로드하려고 할 때 발생합니다. 예를 들어, HTTPS로 보안되는 웹 페이지에서 HTTP로 호스팅된 이미지, 스크립트, 스타일시트 등을 불러오는 경우에 발생할 수 있습니다.

 

브라우저는 보안을 위해서 Mixed Content 에러를 표시하며, HTTPS 페이지에서 HTTP 콘텐츠를 불러오는 것을 차단합니다.
HTTPS 페이지에서는 HTTPS로 호스팅된 콘텐츠만 로드되어야 합니다.

 

요약

CORS 에러는 다른 도메인으로의 요청이 제한되는 것을 의미하고, Mixed Content 에러는 보안 연결과 보안되지 않은 연결 사이에서의 콘텐츠 불일치를 의미합니다. 둘 다 보안과 관련된 에러이며, 웹 개발 시에는 이러한 에러들을 해결하여 보안성을 유지하는 것이 중요합니다.

 

Reference
https://stackoverflow.com/questions/66689081/localhost-http-accessed-from-https-webpage-why-no-mixed-content-error

Localhost HTTP accessed from HTTPS webpage. Why no "Mixed Content" error?

https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_mixed-content_resources

Mixed content - Security on the web | MDN