웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

크롬브라우저 안전하지 않은 스크립트 로드 표시 제거하는 방법

Last Modified : 2018-08-01 / Created : 2018-08-01
17,134
View Count
전혀 신경쓰지 못했는데 어느날 부터인지 크롬브라우저 주소창 우측에 방패 모양의 표시가 생겼습니다... 갑자기 왜 생긴걸까요.

크롬브라우저의 주소창에 보이는 작은 표시

확인해보니 '안전하지 못한 스크립트를 로드 중'이라는 메시지가 출력되더군요... SSL 인증서를 써온지 오래되었고 이전에는 이런 현상이 없었기에 빨리 해결해야겠다고 생각했습니다. 일단 원인을 파악하기 시작했습니다. 어디가 문제일까요?




# 안전하지 않는 사이트 경고 해결하기

일단 웹사이트가 보안에 문제가 있기에 크롬 브라우저에서 경고 메시지를 보내는 부분이었습니다. 크롬에서는 '피싱'이나 '멀웨어'로 구분된다고 하는데 제 입장에서는 너무나 속상할 수 있겠죠. 어쨌든 사이트가 문제가 있다면 빨리 해결하는게 급선무라 생각합니다.

방패 아이콘을 클릭하면 스크립트를 강제로 로드할 수 있습니다. 다만 사용자가 직접 클릭해야하고 주소창에는 안전할 수 없다는 표시가 계속 나타납니다... SSL 인증서를 사용한 https와는 무관하게 말이죠...

이를 해결하기 위해서는 일단 인증서에 문제가 없는지 확인해봐야 합니다. 인증서가 이상없다면 https로 소스를 불러와야하는지 확인해야합니다... 제 경우 일부 소스파일이 https가 아닌 http로 요청하는 스크립트가 존재했습니다.


! 증상 해결방법

동일한 부분이 문제라면 가장 간단한 해결방법으로 페이지로 로딩되는 리소스가 https 프로토콜을 사용하고 있는지 확인해봐야합니다. 실제로 외부 소스를 로딩하거나 내부 소스더라도 http로 잘못 표기된 경우가 이에 해당합니다.

아까 언급했지만 이런 문제는 CSS 파일 내부에서도 발생할 수 있습니다. 아래의 코드를 봐주세요.
@import url(http://webisfree.com/source/)

위 코드는 CSS에서 외부 소스를 접근하고 있습니다. 이때 http로 접근하므로 안전하지 못한 스크립트의 원인이 될 수 있습니다. 이런 부분도 찾아 해결해야만합니다.


! 크롬 개발자 도구 F12 활용하기

모든 소스를 일일히 확인하면 어려우니 F12를 누르면 나타나는 개발자 도구를 활용하는 것이 좋습니다. Source 탭을 클릭하면 좌측에 불러온 파일들이 나타나는데 여기서 잘못된 리소스 경로를 확인하면 편합니다.



# 마치면서

이런 스크립트는 SEO, 검색엔진최적화에도 당연히 좋지 않은 결과를 가져올 것이라 생각됩니다. 아무래도 보안 이슈는 방문자 트래킹에 큰 영향을 주므로 빨리 해결하는 것이 좋겠습니다.

Previous

네이버블로그 더 만드는 방법은? 추가하기

Previous

Visual Studio Code(VSCode) 유용한 단축키 알아보기