본문 바로가기

Web

Mixed Content 해결 방법

브라우저의 정책으로 인해서 https 로 로드된 웹페이지에서, http 프로토콜의 resource를 요청하면, Mixed Content 에러가 발생하게 된다.

https://www.naver.com 에서 fetch를 이용해 http://brawlstat.xyz 를 요청

해결 방법

이를 해결하기 위해서는 브라우저의 사이트 설정에서 안전하지 않은 컨텐츠를 허용해주면 된다.

1. 왼쪽 위의 자물쇠 표시를 클릭하여 사이트 설정에 들어간다.

2. 안전하지 않은 컨텐츠를 허용으로 바꿔준다.

3. 웹 페이지를 새로고침하고, 왼쪽 상단의 자물쇠 표시가 주의요함으로 바뀐 것을 확인한다. 이제 http의 resource도 요청할 수 있는 상태가 되었다.

 

여담

우리가 http에서 https 프로토콜로 넘어간 이유는 요청하는 컨텐츠들이 외부로 노출되지 않기 위함이다. 예를들어, naver에 로그인하기 위해서 아이디와 패스워드를 입력하고 로그인 버튼을 누르면, 내가 입력한 아이디와 패스워드가 네트워크를 통해서 naver에 전달이 되고, naver의 서버가 이를 확인하여 해당 유저의 정보가 맞는지 확인하고 처리한다.

이때, http 를 이용하여 요청을 보내면 나의 아이디, 패스워드의 정보가 패킷에 그대로 노출이 되게 되어 switch나 router를 snipping하는 경우에 패스워드를 손쉽게 탈취할 수 있다. https를 사용하게 되면, 내가 요청하는 정보들이 암호화되어 전달되므로 snipping을 하는 해커들에게 노출되더라도 해독할 수 없어 사용이 불가능하다.

그래서, 우리가 어떤 웹페이지에 로그인을 시도할 때는 brower의 왼쪽 상단에 자물쇠 마크가 있는지 항상 확인해야 한다. 자물쇠 마크는 현재 이 웹페이지가 https 로 통신을 하고 있다는 것을 알려주기에 안전하다는 것을 의미한다. 주의 요함으로 표시되었을 때는 패스워드나 개인정보 등 노출이되면 위험한 정보들은 입력하지 말자.

 

참고

https://experienceleague.adobe.com/docs/target/using/experiences/vec/troubleshoot-composer/mixed-content.html?lang=en 

 

How Do I Enable Mixed Content in My Browser? | Adobe Target

 

experienceleague.adobe.com

 

반응형

'Web' 카테고리의 다른 글

Java WebSocket ping handler 는 어디에 구현되어 있을까?  (0) 2023.07.22