티스토리 뷰

집에서 개발삽질

Mixed content 오류 해결방안

츈식 2021. 12. 28. 10:39

산넘어 산이롭세

안녕하세요 커밋은 제친구라 커밋과 함께 다시 돌아왔습니다.

거두절미하고 Mixed content 오류에 대해 알아보겠습니다.

 

--------- 사건의 발단 --------- 

팝업 API로 변경하고 제대로 작동하는걸 확인하고 방심하고 있었는데 주소 검색이 안 된다는 CS 인입이 들어왔습니다.

팝업 주소창에 검색을 하면 주소가 안 뜬다는 오류를 듣고 확인하게 되었습니다

----- 무시하셔도 됩니다 -----

 

저희 회사는 다 https를 사용하지 않고, 특정 페이지만 https를 사용하는데( ex : 회원가입, 물품구매페이지 ) https에서 팝업 주소창인 http를 띄우는데 에러가 발생한 것입니다....

 

 

에러 메세지 : Mixed Content: The page at ...

(다들 콘솔창 에러 앞부분으로 검색하시니..^^ 물론 저도)

 

원인 : https 사이트에서 http 사이트 요청을 할 때 발생하는 크롬 보안 문제

 

해결방안

1. html 파일의 <head> 태그 아래에 하단의 태그 추가

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

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

근데 전 해도 오류가 발생해서

2. 해당 url를 호출하는 jsp에서 https로 고정되어 있는 주소를 제거

- 참고 : https://support.cloudflare.com/hc/ko/articles/200170476-%ED%98%BC%ED%95%A9-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0

<!-- EX -->

<!-- before -->
String domain = "http//www.juso.go.kr";

<!-- after -->
String domain = "//www.juso.go.kr";

상단처럼 고정되어 있던 http를 제거하니 정상적으로 작동하는 걸 확인 했습니다.

 

참고 자료로 구글 개발 문서 링크 첨부하니 심심하시면 확인하세요~!

https://web.dev/what-is-mixed-content/

 

What is mixed content?

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources are loaded over an insecure HTTP connection.

web.dev

 

 

'집에서 개발삽질' 카테고리의 다른 글

0. [React ToyProject] 가계부 프로젝트 기획  (0) 2023.05.01
Mac에 오라클 21c 설치 후 SQL Developer에 설정하기 완벽정리  (0) 2022.10.10
xampp 사용기(1)  (0) 2019.11.19
(크롬)your current security settings do not allow this file to be downloaded  (0) 2019.08.30