반응형
저번주에 작업 완료한 파일을 서버에 설치했더니 cdn을 받아오는 곳에서 에러가 발생했다. 콘솔의 에러를 확인해보니 Mixed content 에러라고 찍혔는데 에러 내용은 다음과 같다. 이 에러의 경우에는 예전에도 만났던 에러라 오랜만에 본 것 같다.
1) Mixed Content 에러 발생
Mixed Content: The page at 'https://----/hello.html' was loaded
over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0
/jquery.min.js'. This request has been blocked;the content must be served over HTTPS.
에러 내용을 분석해보면 'https://----/hello.html' 사이트는 HTTPS인데 이 사이트에서 HTTP 사이트로 요청해서 막혔다는 이야기이다. JQuery는 내가 사용한건 아니지만 html 파일 어딘가에 cdn을 불러오는 곳이 있다는것이니 찾아서 cdn 주소를 https로 변경해주면 된다. 이건 JQuery cdn이 https를 지원하기 때문에 가능한 것이다.
로컬에서는 잘 됐었는데 배포하니 안된다? 왜냐 로컬은 HTTPS로 배포한 상태가 아니기 때문에 HTTP -> HTTP로 요청하는 형태가 된다. 보통 Mixed Content 에러는 배포 후에 만나게 되는 경우가 많은데 배포할 때는 HTTPS를 적용해 배포하는 경우가 많기 때문이다.
2) Mixed Content 에러 해결방법
보안상의 이유로 https에서 http로 요청을 보내는 것은 좋지 않겠지만 아래와 같은 방법으로 해결 가능하다.
html 파일 head에 아래 코드 추가
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
해당 방법은 META 태그를 헤더에 추가하여, http 콘텐츠를 자동으로 https로 변환하여 로딩하도록 하는 방법이다. 이렇게 되면 내가 http로 요청을 보내도 https로 보내준다. 하지만 한가지 주의할 점은 이 역시 http 사이트가 https를 지원해야만 해결가능한 방법이다.
반응형
