SNS (link)
Notice
Top Posts
Recent Posts
Recent Comments
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Link
Today
Total
관리 메뉴
모바일 관리 메뉴
프로필사진 내다보는(창)  관리 메뉴

내다보는 (창)

티스토리 스킨편집-카카오 디벨로퍼 키넘버 노출 문제 해결하기. 본문

주제별 전체/T-스토리 관련

티스토리 스킨편집-카카오 디벨로퍼 키넘버 노출 문제 해결하기.

내다보는 창 2023. 2. 28. 04:05
반응형
카카오 디벨로퍼에서 타인에게 키값보안을 권고한 키값이 노출된 티스토리 스킨설정 

 

html파일에 노출된 디벨로퍼 키값

 

이번 포스팅은 좀 민감한 보안에 관한 내용을 주제로 하겠습니다.

뭐 내용은 별것 없습니다만 보안이란 게 대체로 우리가 별것 아닌 듯 생각 없이 지나치는 사소한 부분에서 허약해지는 경우가 많습니다 물론 완벽한 보안은 없습니다 (없다고 보는 게 맞습니다 뚫려고 노력하는 침입자를 완벽히 방어할 순 없죠) 그러나 그렇다고 손 놓고 대문을 활짝 열어놓는 어리석은 우를 범하진 말아야겠죠 최소한 빗장은 걸고 문안 닫아놔야 침입자도 그 집은 지나쳐 가게마련이죠..

티스토리 블로그를 운영하는 많은 블로거들이 외부에 자신의 소중한 포스팅의 전달을 원하기 때문에 우리는 각자 자신들이 사용하는 티스토리의 많은 스킨들에 "SNS 소셜 네트워크의 공유" 설정을 하곤 하죠.

이번 이야기는 이 sns공유 설정으로 이용하는 스킨 편집에 관한 포스팅입니다.

이 이야기는 물론 티스토리 만이 아닌 비교적 자의적 스킨 편집이 자유로운 워드프레스 / 라이믹스 /  그누보드 / 등등의 많은 웹 페이지 운영 플랫폼 들에 연관된 이야기 이기도 하죠.

네이버와 같은 포털 자체에서 운영하는 블로그 플랫폼의 경우는 자의적 스킨 편집이 자유롭지 않은 만큼 플랫폼 제공업체 자체의 보안에서 보다 안전할 순 있지만 구글 애드센스 연결이나 좀 더 자유롭게 자신의 블로그를 관리하고 싶어 하는 많은 유저들이 편집이 자유로운 운영형 빌더들을 선호하게 되고 자신이 운영하는 만큼의 보안의 책임을 지게 되는 것이죠.. 그래서 이번엔 문단속을 조금은 해보기 위한 설정을 사용하는 스킨에 반영해 보았습니다.

우리가 사용하는 sns 공유링크 중 카카오톡 공유링크 

 

 

노출된 카카오 스크립 코드를 외부로 링크시키자.

 

인용문에 설명된 내용처럼 우리가 sns 공유링크로 편집한 html 내용 중에 카카오 디벨로퍼의 노출된 카카오 공유링크의 샌드링크 키값을 편집된 스킨에서 빼내어 우리가 파일을 올릴 수 있는 스킨의 최상단 images의 경로에 업로드시키고 그 파일을 script 구문으로 스킨의 <head></hrad> 설정 창으로 링크시키는 방법에 대한 내용을 설명합니다.

내용은 이미 sns 공유설정을 스킨에 반영한 분들이시면 카카오디벨로퍼퍼 설정등은 이미 마무리한 분들이 시라는 가정하에 디벨로퍼 설정이나 스킨에 sns공유링크 코드 편집에 관한 내용은 건너뛰겠습니다.

내용과 순서와 요점은 아래와 같습니다.
1. 자신이 편집한 스킨의 카카오 샌드링크 값을 분리시켜 스크립트 파일로 만든다 
2. 편집한 스크립트 파일을 자신의 계정에 파일을 업로드할 수 있는 최상단 디텍토리인 images 폴더에 업로드한다.
X. 업로드한 스크립트 파일을 html 편집 창의 상단 head와 head 사이에 스크립트 구문을 링크한다.
3. 스크립트 파일은 상단이 아니고 되도록 최하단 footer 섹션 및에 위치시키는 게 맞습니다.
- 수정한 내용의 이유와 결과는 글 아래 내용을 추가했습니다 -

 

위에 열거한 내용을 바탕으로 간단하게 스크립트 파일의 링크로 조금은 내 블로그나 운영 중인 웹사이트의 문단속을 해보게 되겠습니다.

먼저 할 일은 스킨의 HTML에 노출된 카카오 키값이 포함된 코드를 분리하고 스크립트 파일로 만들어야겠죠? 스킨 설정이나 스킨종류 등등 설정하신 방법들은 많으나 대체로 기본적인 설정은 비슷하리라 봅니다. 이에 대한 설명은 제가 사용하는 스킨에 반영해서 설명을 이어나갑니다.

우리가 사용하는 키값은 아래의 자바스크립트 코드에 포함되어 대체로 스킨에 그대로 노출된 있습니다.

<script>

Kakao.init('이 안에 키값들이 노출되 있습니다.');

function shareKatalk() {
Kakao.Link.sendScrap({
    requestUrl: location.href
});
};
</script>
이 내용을 저장하고 링크시킬 수 있는 자바스크립트 파일로 만들어 보겠습니다. 설명에 사용된 제 스킨에 반영한 내용 입니다만 티스토리 스킨이나 다른 웹플랫폼의 설정도 그다지 많은 차이는 없이 비슷한 환경이라 생각합니다.

* 아래 코드블록을 복사하신 후 자신의 디벨로퍼 키값을 넣으시고 js파일 형식으로 저장하시면 됩니다.
// // 카카오 공유 sendLink

 //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('디벨로퍼의 키값을 이곳에 저장 하세요');
// // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.

function shareKatalk() {
Kakao.Link.sendScrap({
    requestUrl: location.href
});
};
  //]]>
자신이 사용하는 편집기나 윈도 메모장 등으로 위의 내용처럼 파일을 만드시고 확장자를 js로 저장합니다. 반듯이 확장자나 파일 형식을 js파일로 지정하시길 바랍니다. 이름은 자신이 만든 카카오 공유링크의 a 태그에 지정된 이름으로 지정하세요

ex) 

이미지를 보시면 a링크가 걸린 파일의 이름이 "javascript:shareKatalk()" 이렇게 돼있죠(제 경우입니다) 

이 이름의 의"javascript:"부분을 뺀 의 shareKatalk 가 업로드 시킬 스크립트 파일의 이름이니 자신이 설정된 링크의 네이밍으로 지정하시면 되겠네요.. 그럼 이제 이렇게 저장된 스크립트 파일을 자신의 계정의 images 폴더에 업로드시키고 HTML에 반영해 보도록 하겠습니다.

스크립트(javascript) 파일 계정에 업로드 후 HTML 스킨에 적용하기 

게정에 js파일을 업로드 한다.

 

적용하고 편잡창을 빠져나온다.

 

위에 이미지의 내용 순서대로 파일을 저장하시고 html 편집 탭으로 이동하신 후 편집 창에서 최하단 FOOTER섹션 아래에 넣으시고  스킨에 코딩되었던 디벨로퍼의 자바스크립트 키값이 노출된 부분의  카카오톡의 샌드링크 부분의 코드를 제거하신 후 빠져나오시면 됩니다.

이때 코드를 링크시킨 방법은 아래처럼 최 하단에  코드를 넣으시면 되며 티스토리의 경우 images 경로에 업로드했기 때문에./images로 상대 경로를 사용하여 링크시켰습니다,

절대경로로 링크하시던 상대경로로 링크하시던 상관은 없지만 혹시라도 카카오 티스토리 팀의 설계변경으로 디텍토리의 상위 설정이 변경되는 것을 참고해서 저 같은 경우는 (./  ) 와같이 상대경로로 링크를 시켰습니다. 다른 웹 플랫폼을 사용하시는 분들은 js폴더나 루트폴더에 업로드한 루 그 경로를 링크시키면 됩니다.

	<div id="Foot" role="contentinfo" class="area_foot">
		
		</div>
	</div>
</s_t3>
	<!-- //카카오 공유 스크립트 //-->
	<script src="./images/shareKatalk.js"></script>
<!-- toTheTopScroll -->

</body>

디벨로퍼의 키값

 

※ 오류 수정 : <HEAD></HEAD> 사이에 링크를 넣는것이 아니고 최하단 푸트(FOOTER) 섹션 아래에 스크립트 파일의 링크를 넣어 주세요 상단에 넣을 시 링크는 연결되는데 오류가 발생합니다 오류내용 아래 이미지 참고 

 

 

전송된 카카오 링크의 내용을 보시면 문서의 최 상단에 스크립트 링크를 로드시킬시 자신의 티스토리 계정이 아닌 티스토리 사이트 홈으로 연결됩니다. 되도록 문서의 하단에 기입하세요. 문서의 상단에 스크립트 파일을 선로드 시키시려면 아래 코드처럼 모든 구성 요소의 로드가 끝이난 후 스크립트가 로드되게 함수를 추가해야 합니다 

저도 테스트를 해보고 서야 스크립트 오류내용을 발견하고 포스트에 내용수정 추가 합니다. 

문서의 최상단에 링크를 기입할시는 스크립트 링크를 지연시키는
"window.onload = function()" 함수를 먼저 추가해야 합니다

/// 아래 ( 예제)
window.onload = function(){
   이안에 카카오링크 코드를 넣어야 오류가 안납니다.
    })
}

 

우리가 무심하게 노출시키고 있는 카카오 디벨로퍼의 키값.. 자그마한 무관심이 큰 도둑을 불러들이게 됩니다, 물론 뚫려고 작정한 자는 막기 힘듭니다 그러나 중요한 한 가지 사실 "막으려 노력하는 집은 도둑도 피해서 간다"는 것입니다

물론 디벨로퍼의 자바스크립트 키값이라는 것이 등록된 주소의 웹사이트에서만 사용하는 것이긴 하지만 그대로 웹상에 노출된다는 건 뭔가 찝찝함이 해결이 안 된 그런 기분이지 않을까요?

조금은 무심하게 넘기고 있는 사소한 부분들을 재 점검하고 블로그나 사이트의 보안에 좀 더 진중하게 대처해 보시길 바라면서 이번에 스킨에 노출된 카카오 디벨로퍼의 자바스크립트 키값에 대한 보안글을 올리게 되었네요...조금이라도 블로그를 운영하시는 블로거 님들에게 도움이 되는 글이 되기를 바라면서 포스팅을 마치겠습니다.

반응형
저작자표시 비영리 동일조건

포스팅 공유

  • 네이버
  • 카스토리
  • 페이스북
  • 트위터
  • 밴드
  • 카카오톡
  • PIN
글의 댓글
'주제별 전체/T-스토리 관련' 카테고리-다른 글 더 보기