블로그 보안접속 적용

티스토리에서는 이제 SSL 보안 접속을 지원한다. 

https://notice.tistory.com/2444

위 주소에서 알 수 있듯 SSL을 켜면 블로그 주소가 http에서 https로 변경된다. https 상에서는 제3자가 블로그에서 뭘 검색하고 있는지, 어느 파일을 다운로드 하고 있는지를 암호화를 사용한 접속 방식으로 제 3자가 무엇을 보고 있는지 정확히 확인할 수 없다. 그래서 개인 프라이버시가 더욱 잘 보장될 수 있다.

보안접속을 확인하는 방법은 크롬 주소창에서 '안전하지 않음' 대신 초록색으로 적힌 '안전함' 으로, 엣지에서는 느낌표 대신 자물쇠 모양아이콘을 통해 해당 사이트가 보안 접속을 사용중인 것으로 확인할 수 있다. 

하지만, 본 기능을 완벽히 쓰기 위해서 블로그 설정에서 단순히 보안 설정을 켜는 것 만으로는 부족할 수 있다. 왜냐하면 안전한 보안 접속을 사용하기 위해서는 해당 사이트의 모든 다운로드 경로도 보안 접속을 사용해야 하기 때문이다.^[각주:1] 예를 들어 블로그에 이미지 파일이 보안 접속인 https://이미지 주소.jpg 대신 일반 접속인 http://이미지 주소.jpg 로 어딘가에 포함 되어 있으면, 비록 https를 통해 안전하게 일부분의 파일을 받았지만, 안전하지 않은 연결인 http 를 통해 파일을 받았기 때문에, 브라우저는 바로 신뢰되지 않는 접속이라고 표기를 해버린다.

엣지에서 본 블로그 주소 바

같은 https 인데 하나는 느낌표 하나는 자물쇠로 표기된다.^[각주:2]

어쨋든 나도 블로그에 보안 접속 적용을 할려고 했는데, 자물쇠 아이콘이 자꾸 안나온다. 그 문제의 원인은 브라우저 개발자도구의 콘솔창을 통해 찾을 수 있었다.

❌ SEC7111: HTTPS security is compromised by http://tattler.tistory.com/attachment/cfile29.uf@99C0F4405B2141042F96B7.svg

개발자 콘솔 창에서 보이는 메세지

위 에러가 나는 이유는 내가 글 본문에 .SVG 파일을 그림 형식으로 첨부하고 싶은데, 티스토리에서는 .SVG 파일은 일반적인 방법을 통해서는 본문에 이미지형식으로 첨부를 할 수 없기 때문에 편법을 썼는데, 그 편법 때문에 해당 문제가 나는 것이었다. 내가 사용한 편법은 아래와 같았다.

png 나 jpg 같은 래스터 이미지 파일들은 이 본문 상단의 '엣지에서 본 블로그 주소 바' 파일을 본문에 넣기위한 방법과 같이 본문에 [ #_1N|파일주소|크기 파일 이름 filemime="image/png"|_#] 을 넣으면 본문에 그림파일로 바로 표기가 되지만 되지만, svg 파일은 [ #_1N|파일주소|크기 파일 이름 filemime="image/svg+xml"|_# ] 으로 넣으면 표시가 안된다. 티스토리가 svg 파일은 이미지로 지원을 해주지 않는다.

그래서 SVG 파일을 본문에 첨부한 뒤, 해당 파일의 직접 다운로드 주소를 알아낸 뒤, <img> 태그를 사용하여 일일이 svg 파일을 나타내는 방식을 사용했다. <img src="이미지 주소" 크기> 를 설정하는 방법을 말이다.

그런데 여기서 문제가 한가지 생긴다. 내가 가져온 주소는 http://블로그 주소/attachment/파일 주소 로 이뤄졌는데, 해당 주소는 https를 지원하지 않는다. 본 블로그에 올라온 SVG 파일 주소인 http://tattler.tistory.com/attachment/cfile29.uf@99C0F4405B2141042F96B7.svg 에서 http를 https로 고쳐서 들어가면 자동으로 다운로드를 https가 아닌 http로 바뀌는 것을 확인할 수 있다.

혹시나 싶어 해당 주소의 리다이렉트 되는 주소인 https://t1.daumcdn.net/cfile/tistory/99C0F4405B2141042F를 사용하면 어떨깨 했는데, 위 주소에서 http를 https로 바꿔서 들어가보면, 아래와 같이 인증서 오류가 난다. 즉 이건 사용 자체를 할 수가 없다.

This site is not secure This might mean that someone’s trying to fool you or steal any info you send to the server. You should close this site immediately. Details The hostname in the website’s security certificate differs from the website you are trying to visit. Error Code: DLG_FLAGS_SEC_CERT_CN_INVALID

엣지에서 본 오류

이 문제를 해결하지 않고서는 '보안됨' 표시를 내 블로그에 표시할 수가 없는데 어떻게 해야 할까. 우선 인터넷 검색을 통해 티스토리에 SVG 파일 업로드 하는 방법을 찾아봤다. 그러다가 SVG 파일을 https를 지원하는 t1.daumcdn.net 을 통해 본문에 첨부했다는 글을 찾았다. 대체 t1.daum.net 주소는 어떻게 얻는 것일까... 해당 주소에 대해서 열심히 검색을 해보다가, 티스토리 공지사항에서 관련 내용을 찾을 수 있었다. 하지만, 아쉽게도, 해당 주소를 어떻게 사용해야 하는지를 찾을 수 없었다.

이를 어쩐다... 참... SVG 파일을 일일이 PNG 파일로 변환하면 해당 류가 사라지긴 한다만. 그래도. .SVG 파일을 건들기는 싫었다. 대신 고객센터에 한 번 물어보기로 했다. 그리고 답변은 하루만에 받았다. 저번에 게임별 관련 문의 글 보다 답변 속도가 하루 더 빨랐다.

파일 다운로드 주소 변경 또는 svg 파일 업로드에 대해 답변을 드리겠습니다. 

아래 주소는 과거에 사용하던 주소 형식입니다.

- http://tattler.tistory.com/attachment/cfile2.uf@9924D03F5B44674D06EA10.svg

해당 주소 형식을 사용하셔도 https 지원에 문제가 없어 보이지만

예시로 들어주신 사진이라면 아래와 같은 형식으로 사용하시면 됩니다.

- https://t1.daumcdn.net/cfile/tistory/9924D03F5B44674D06
- //t1.daumcdn.net/cfile/tistory/9924D03F5B44674D06

아울러, cfile2.uf@9924D03F5B44674D06EA10.svg라는 파일키에서

@이후부터 .svg 전까지 중 마지막 4자리를 제외한 것이 9924D03F5B4467입니다.

감사합니다.

고객지원에서 받은 내용

사용 하는 방법이 조금 차이가 있었구나...

와... 진작에 물어볼걸 그랬다... 바로 해결이 됐네... 위 방식대로 변경하니 이제는 안전함이라고 잘 뜬다. 이 글도 그렇고. 이제 나머지 글들을 하나씩 수정해 나가야겠다.

처음에는 보안 접속을 그냥 꺼둘까 생각했는데, 알려줬으니까 적용해봐야 겠다. 어차피 언젠가 모두 https 로 전환해야 한다고 공지되어 있었으니까...

나도 이제 VeriSign 인증서를 달 수 있게 되는 것인가! 만세!

2018/9/5일부로 보안 접속 작업을 완료했다.

여담

티스토리 관리자 페이지는 보안 접속을 쓰면서 왜 글쓰기 화면은 왜 아직까지 https를 안쓰는 걸까? 따로 암호화를 하는건가?

추가 내용 - 2018/9/4 22:34:21 ~ 2018/9/5 01:13:50

블로그에 있는 모든 svg 파일 링크를 다음 고객센에서 말한 주소로 모두 고쳤다. 그 결과 이제 모든 페이지에서 보안접속이 가능해졌다.

 

나도 이제 VeriSign 인증서를 달았다! 만세! 

[본문 SVG 파일]

padlocks-153608.svg

1. 외부 하이퍼링크는 굳이 https로 쓸 필요 없는 듯 하다. [본문으로]
2. IE에서는 자물쇠 아이콘을 그냥 없애버린다. [본문으로]