FastBoot 스킨 보안접속(https) 방명록, 댓글 부분 이미지 url 수정해야

반응형

FastBoot 스킨 보안접속(https) 방명록, 댓글 부분 이미지 url 수정해야

 

여러 인터넷 문서를 참조하여 어렵사리 보안 접속을 완료했다 생각했는데 어느날 브라우저 주소줄에 아이콘이 안전하지 않은 비보안 접속아이콘이 생겼습니다. 개발자 도구로 확인해보니 댓글 부분에 http://로 시작되는 이미지가 보였습니다.

FastBoot 스킨

 

 

수정할 이미지

사용자 아이콘을 설정하지 않은 접속자가 댓글을 단 경우 기본적으로 표시하는 이미지로 url 주소가 "http://cfs.tistory.com/custom/blog/161/1613108/skin/images/user.png?=18660752150.5679849039297551" 입니다.

댓글 기본 이미지

왼쪽에 표시된 이미지인데요. 아시다시피 http://로 시작되는 url 주소를 불러오는 웹페이지는 혼합 콘텐츠(Mixed Content)가 포함된 안전하지 않은 비보안 페이지가 됩니다. 본 이미지는 FastBoot 스킨의 images 폴더 안에 있습니다.

 

이미지 배치 요소 위치

스킨 편집>html 편집에서 본 이미지를 검색하면 4번 배치돼 있습니다. 방명록 부분에 2번 댓글 부분에 2번 배치돼 있습니다.

  • 방명록 읽기 부분 <div id="guestList"> 아래

방명록 읽기

  • 방명록 답글 부분 <s_guest_reply_rep> 치환자 하단

방명록 답글

  • 댓글 읽기 부분 <div class="commentList"> 아래

댓글 읽기

 

  • 댓글 답글 부분 <s_rp2_container> 치환자 하단

댓글 답글

 

 

티스토리에서 알려드립니다에서 티스토리 파일 서버 이전 안내가 2017년 4월에 공지돼 있군요. 하지만 본 주소로 현재도 검색되고는 있습니다. 공지내용에 보면 다음과 같은 권장 사항이 있습니다.

스킨 HTML과 CSS에 최대한 절대주소를 넣지 말아 주세요 스킨에서 상대 경로로 넣으면 자동으로 적절한 주소로 변경해 줍니다. 절대 주소가 있다면 상대 주소로 변경해 주세요.

 

상대 url

웹 페이지 파일의 디렉터리를 중심으로 위나 아래 등 상대적으로 찾아 갈 수 있도록 나타낸 인터넷 주소. 예를 들어, 웹 페이지가 'http://www.tta.or.kr/CV/word/index.html'라고 할 때, 이 페이지에서 절대 주소가 'http://www.tta.or.kr/CV/images/img.jpg'인 그림을 표현할 때는 절대 주소 대신에 상대 주소인 '../images/img.jpg'를 사용해도 동일한 효과를 나타낸다. 상대 URL을 사용하면 입력할 내용이 간단할 뿐만 아니라 서로 연결된 문서의 집합을 다른 서버로 옮기더라도 링크를 수정할 필요가 없다는 장점이 있다.
출처: 네이버 지식백과

 

상대 url로 이미지 주소 변경

  • 스킨 편집>html 편집으로 스킨 html 편집 화면으로 들어갑니다.
  • control+F를 누른 후 user.png 를 검색하면 방명록 부분과 댓글 부분에서 4번 검색 됩니다.(control+F로 검색시 처음은 엔터키로 검색하고 다음은 control+G로 검색합니다.)
  • 검색된 절대 주소 http://cfs.tistory.com/custom/blog/161/1613108/skin/images/user.png?=18660752150.5679849039297551에서 http부터 skin까지를 .(점)로 바꿉니다. ./images/user.png?=18660752150.5679849039297551로 되겠지요. ?이하 쿼리는 무엇을 의도하는지 모르겠습니다. 저는 그대로 두었습니다.
  • 4개의 이미지 주소를 모두 위와 같이 변경합니다.
  • 변경 내용을 저장하고 해당 글로 가보면 주소줄에 보안 적용 자물쇠 아이콘이 나타납니다.

 

 

남아있는 문제

  • 댓글, 방명록 작성 접속자의 아이콘 이미지가 비보안(http://) 콘텐츠일 경우 해당 페이지는 비보안 페이지로 표시됩니다.
  • 댓글, 방명록 작성 접속자의 아이콘 이미지가 보안(https://) 콘텐츠인 경우에도 닉네임옆에 표시된 프로필레이어(프로필 아이콘) 이미지 클릭시 비보안 콘텐츠가 나오는 경우도 클릭시 비보안 페이지로 변경됩니다.

 

프로필 클릭

 

  • 프로필레이어 요소의 클래스가 .tistoryProfileLayerTrigger인데요 FastBoot 스킨의 style.css에는 없고 티스토리에서 플러그인 style.css를 블로그 페이지에 추가하는 것으로 보이는데요 본 클래스 스타일을 display: none으로 할 수있는 방법이 있을 수도 있겠지만 번거롭고 별 효과도 없을 것으로 보고 그대로 두기로 했습니다.
  • 완전한 보안 페이지가 되기는 어렵네요. 티스토리 공지 블로그도 댓글에 비보안 콘텐츠가 표시될 경우 비보안 페이지로 되는군요.

다른 글 보기

 

반응형
Trackback: Comment: 0

티스토리툴바