티스토리 Base64 난독화, 콘텐츠 보호 무단 도용 방지 팁

Base64는 본래 데이터 전송의 안정성을 위해 고안된 인코딩 방식이지만, 텍스트나 코드를 사람이 즉시 읽기 어려운 형태로 변환하는 난독화 도구로도 훌륭하게 작동합니다. 이를 활용하면 일반 방문자에게는 정상적인 콘텐츠를 보여주면서, 단순 복사나 자동 크롤링을 통한 무단 도용에는 강력한 진입 장벽을 세울 수 있습니다.

이번 포스팅에서는 Base64의 기본 개념부터 티스토리 블로그에 자동 디코딩 스크립트를 적용하는 방법까지 상세히 알아보겠습니다.

1. 무단 도용 방지를 위해 Base64란 ?

Base64는 이진 데이터(Binary Data)를 64개의 출력 가능한 문자 집합(영문 대소문자, 숫자, +, /)으로 변환하는 인코딩 방식입니다.

• 핵심 원리: 데이터를 6비트 단위로 쪼개어 매핑하며, 빈 공간은 = 기호(패딩)로 채웁니다.
• 사용 목적: HTML, CSS, JSON 등 텍스트 기반 환경에서 이미지나 실행 파일 같은 바이너리 데이터를 안전하게 주고받기 위해 사용됩니다.
• 주의사항: Base64는 암호화(Encryption)가 아닌 인코딩입니다. 누구나 다시 풀 수 있으므로 비밀번호 같은 민감한 정보를 숨기는 용도로는 적합하지 않습니다.

2. 콘텐츠 난독화를 위한 인코더 스타일 (CSS)

블로그 내에서 인코딩 도구를 구현할 때 사용할 수 있는 다크 모드 기반의 깔끔한 디자인 코드입니다.

/* Base64 인코더/디코더 공용 스타일 */
.base64-encoder {
 max-width: 90%;
 margin: 40px auto;
 padding: 20px;
 background-color: #121212;
 color: #eee;
 border-radius: 8px;
}

.base64-encoder textarea {
 width: 100%;
 height: 100px;
 font-size: 1.1rem;
 background-color: #222;
 color: #eee;
 border: 1px solid #444;
 border-radius: 5px;
 padding: 10px;
 resize: vertical;
 box-sizing: border-box;
}

.base64-encoder #result {
 margin-top: 15px;
 padding: 10px;
 background: #222;
 color: #eee;
 word-break: break-word;
 min-height: 50px;
 font-weight: bold;
 border-radius: 5px;
 border: 1px solid #444;
 white-space: pre-wrap;
}

.base64-encoder button {
 margin-right: 10px;
 margin-top: 10px;
 padding: 8px 16px;
 font-size: 1rem;
 cursor: pointer;
 background-color: #111;
 color: #eee;
 border: 1px solid #444;
 border-radius: 5px;
 transition: background-color 0.3s ease;
}

.base64-encoder button:hover {
 background-color: #333;
}

.base64-encoder label {
 display: block;
 margin-top: 15px;
 margin-bottom: 6px;
}

3. 티스토리 자동 무단 도용 방지 스크립트 적용

인코딩된 텍스트를 포스팅에 적어두면, 방문자가 글을 읽는 순간 브라우저가 자동으로 이를 해석해 원래의 HTML 콘텐츠로 보여줍니다. 티스토리 본문 영역(.contents_style)에서만 작동하도록 설계되어 안정적입니다.

핵심 기능 요약

무단 도용 방지 난독화 적용 방법

1. 티스토리 관리자 페이지에서 [스킨 편집] > [HTML 편집]으로 이동합니다.
2. HTML 코드의 가장 하단, /body> 태그 바로 위에 아래 스크립트를 복사하여 붙여넣습니다.

(function() {
 // 1. Base64 문자열인지 검사
 function isBase64(str) {
 if (!str) return false;
 str = str.replace(/\s+/g, '');
 return /^A-Za-z0-9+/]{8,}={0,2}$/.test(str);
 }

 // 2. Base64 HTML 변환
 function decodeBase64ToHTML(b64) {
 try {
 const bin = atob(b64);
 const bytes = Uint8Array.from(bin, (c) = c.charCodeAt(0));
 return new TextDecoder('utf-8').decode(bytes);
 } catch (e) {
 return b64; // 실패 시 원본 반환
 }
 }

 // 3. 본문 내 모든 텍스트 노드 탐색 및 디코딩
 function decodeTextNodes(node) {
 Array.from(node.childNodes).forEach((child) = {
 if (child.nodeType === Node.TEXT_NODE) {
 const trimmed = child.textContent.trim();
 if (isBase64(trimmed)) {
 const span = document.createElement('span');
 span.innerHTML = decodeBase64ToHTML(trimmed);
 child.replaceWith(...span.childNodes);
 }
 } else if (child.nodeType === Node.ELEMENT_NODE) {
 const tag = child.tagName.toLowerCase();
 // 보호가 필요한 태그 및 요소 제외
 if (
 tag !== 'iframe' &&
 tag !== 'figure' &&
 tag !== 'script' &&
 !child.textContent.includes('##_Image|') &&
 child.id !== 'index-checker-container'
 ) {
 decodeTextNodes(child);
 }
 }
 });
 }

 // 4. 실행 (티스토리 본문 영역 타겟팅)
 const articleDiv = document.querySelector('.tt_article_useless_p_margin.contents_style');
 if (articleDiv) {
 decodeTextNodes(articleDiv);
 }
})();