[Chrome Extensions] Mixed Content Error

현재 개발 중인 웹 서비스를 크롬 확장 프로그램으로도 지원하면 좋을 것 같다는 교수님의 의견으로 크롬 확장 프로그램을 개발 진행 중이었다. 그래서 이미 웹 서비스에서 사용하려고 Fast API로 배포한 API를 사용하려던 찰나 Mixed Content 에러를 접하게 됐다.

 

Mixed Content 에러란 어떤 건가?

Mixed Content는 웹 페이지가 로드될 때 보안 연결인 HTTPS를 사용하는데, 해당 페이지에서 일부 리소스(ex. 이미지, 스크립트, 스타일시트 등)가 안전하지 않은 연결인 HTTP로 로드되는 경우 발생한다. 이 에러는 브라우저가 사용자 데이터를 보호하기 위해 차단하거나 경고를 표시하면서 발생하게 된다.

---

Mixed Content 에러가 발생하는 이유

1. HTTPS 페이지에 HTTP 리소스를 포함하는 경우

• 웹 페이지는 HTTPS를 통해 안전하게 제공되지만, 페이지에서 참조하는 일부 리소스(URL 링크)가 HTTP 프로토콜을 사용하고 있을 때 발생한다.
• 예를 들어 아래 코드는 HTTPS 페이지에서 Mixed Content 에러를 유발하게 된다.
• script에서 사용되는 url이 http 프로토콜을 사용하기 때문!

<script src="http://exampe.com/script.js"></script>

 

 

2. 보안 침해 가능성

• HTTP로 로드된 리소스는 암호화되지 않으므로 공격자가 데이터를 가로채거나 변조할 수 있다.
• 즉, 이는 HTTPS의 보안성을 무효화시킬 위험이 있다.

---

해결 방법

나 같은 경우는 배포된 API가 SSL 인증을 받지 않은 상태이다. 따라서 가장 이상적인 해결책으로 API 서버에서 HTTPS를 설정하여 https로 배포된 url을 사용해 해결했다.