[Web] Mixed content 문제 (http,https 관련) 🤔

문제점

Mixed Content 문제는 HTTPS를 사용하는 웹 페이지에서 보안되지 않은 콘텐츠(HTTP)를 로드할 때 발생합니다.

 

예를 들어 `<img src="http://example.com/image.jpg">`와 같이 HTTPS가 아닌 HTTP로 시작하는 경로를 사용하거나, 외부 스크립트나 리소스가 HTTPS를 지원하지 않고 HTTP만 지원하는 경우에 문제가 발생할 수 있습니다.

 

https 사이트에서 http 콘텐츠를 로드하는 경우

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example.com'. This request has been blocked; the content must be served over HTTPS.

https 사이트에서 https를 지원하지 않는 콘텐츠를 로드하는 경우

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://example.com'. This request has been blocked; the content must be served over HTTPS.

 

해결방법

 

1. HTTPS로 사이트를 구성해야 하는 경우

• 방법 1: 모든 스크립트와 리소스의 URL을 HTTPS로 업데이트합니다.
• 방법 2: 프론트엔드에서 가장 메인 페이지인 index.html 또는 index.js 파일의 상단에 다음 코드를 삽입합니다.

(http 콘텐츠를 자동으로 https로 변환하여 로딩하는 방법)

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

주의 : 이 코드는 HTTP 콘텐츠를 자동으로 HTTPS로 변환하여 로드하는 역할을 합니다. 하지만 서버가 HTTPS를 지원해야만 정상적으로 작동합니다.

 

2. 리소스들이 HTTPS를 지원하지 않는 경우

• 해당 서비스를 HTTP로 구성해야 합니다.

 

 

주의 사항: Mixed Content 문제는 보안과 관련된 문제이므로, 해결 시에 반드시 HTTPS를 사용하는 것이 좋습니다. 하지만 일부 상황에서는 리소스가 HTTPS를 지원하지 않아 HTTP로 구성해야 할 수도 있습니다.

 

 

 

출처 : https://www.cloudflare.com/ko-kr/learning/ssl/what-is-ssl/

stackoverflow.com/questions/35178135/how-to-fix-insecure-content-was-loaded-over-https-but-requested-an-insecure-re