https 적용된 사이트에서 외부의 http 이미지 불러오기.
본문
클라우드 플레어를 이용하여 ssl을 적용하고 있습니다.
사이트 내용 중에 외부 사이트의 이미지를 사용하는 게 있는 데
해당 사이트는 ssl 인증서가 없어서 https 가 적용이 안되는 관계로
현재 이미지를 불러오지 못하고 있습니다.
이미지를 불러오는 경로 자체는 http://image url 이긴 한데,
실제 호출은 https://image url 로 이루어지는 듯 합니다.
ssl이 적용된 사이트에서 외부의 http 이미지를 불러오는 방법이 있을까요?
답변 2
그냥 img 의 src 를 이미지태그에서 강제로 바꿔버리면 어떨까요? 그래도 보이지 않으면...
cURL 을 이용하는 수 밖에는...
일단 프로토콜을 바꾸려는 img 에만 data-http="http" 이런 식으로 줘서 강제로 한번 바꿔보세요.
<img src="https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg" data-http="http">
<img src="https://blog.kakaocdn.net/dn/cOuCrx/btrcONOGfL6/lnvgPYBKad0JunFVKIwEJK/img.jpg" data-http="http">
<script>
for (i of document.querySelectorAll("img[data-http='http']")) i.src = i.src.replace("https://", "http://");
</script>
아니면 메이드님 사이트가 http 로 시작하는 프로토콜에서도 https 로 리다이렉트가 안 되고 메이드님 사이트가 보인다면 그 이미지를 블러오는 페이지는 재주껏 http 페이지로 바꿔 보여주시거나요.
예를 들어
http://wittazzurri.com/editor/html_editor.php
https://wittazzurri.com/editor/html_editor.php
이 양쪽에
<img src="http://gnuworld.kr/data/file/wittazzurri_media/aae900302ae7fcadfb2f5f624bccda26_n06Nxog8_57c50e40d62244c0236db1a60a2e35d74dfc9ed3.jpg">
이걸 걸어보시면 금방 이해하실 거에요.
상품설명에 있는 외부 이미지인데 몇가지 이유로 클라우드 플레어 인증서를 이용하고 있어요.
이미지를 불러오는 코드 자체는 http 주소로 외부 이미지를 불러오는데. 실제 콘솔에서 https 경로로 보여지더라구요. 문제는 이미지가 있는 사이트가 https 접속이 안되니 이미지 경로가 맞지 않아서 못불러오네요.
이것 저것 찾아봐도 딱히 답을 찾지 못해서 그냥 이미지를 다 가져와서 저장하는 걸로 결론을 냈습니다.
근데 클라우드 플레어 진짜 좋네요 ㅋㅋ
자바스크립트 콘솔에 경고메세지가 나오지만
https:// 도메인에서도 http:// 프로토콜까지 지정하면 이미지는 불러올수 있습니다.
이미지를 불러오는 경로는 http로 지정이 되어 있습니다.
기본적으로는 위 링크처럼 이미지가 표시는 되기 때문에
경로를 직접 호출해서 실제 이미지가 있는지부터 확인이 되어야 할것 같고 그래도 로드되지 않는다면
이미지 소유 서버에서 타 도메인 호출제한 설정이 되어 있는 것이 아닐까 싶습니다.
이미지 full address 를 웹브라우저 주소창에 호출시 이미지가 로드되는 경우
편법으로는
리소스를 가져오려는 사이트에서 curl 을 이용해 로컬서버의 이미지처럼 보여주는 방법이 있습니다.