블로그 댓글은 단순히 방문자와 소통하는 창구 이상의 의미를 지닙니다. 하지만 블로그의 기본 시스템은 보안과 안정성을 위해 댓글 내에서 HTML 태그 사용을 제한하고 있어, 이미지나 하이퍼링크 등 다양한 콘텐츠를 자유롭게 표현하기 어렵습니다. 이로 인해 댓글란이 단순한 텍스트 교환 공간에 머무르는 경우가 많습니다.
그럼에도 불구하고, 운영자가 댓글을 체계적으로 관리할 수 있다면, 이 한계를 극복하고 댓글란을 블로그 콘텐츠의 확장 영역으로 활용할 수 있는 좋은 방법이 있습니다. 댓글에 이미지와 링크를 안전하게 복원해 표시함으로써, 댓글 자체가 방문자와의 적극적인 소통뿐 아니라 콘텐츠를 풍부하게 만드는 중요한 도구가 될 수 있습니다.
티스토리 댓글을 콘텐츠 확장 도구로! 이미지 링크와 HTML 태그 표시하기
이번 글에서는 티스토리 댓글에 숨겨진 HTML 태그를 안전하게 허용하고, 이미지 링크와 내비게이션 기능까지 구현할 수 있는 실용적인 스크립트와 적용 방법을 자세히 소개합니다. 댓글을 단순한 의견 교환이 아닌, 블로그 활성화를 위한 사용자 참여형 콘텐츠 공간으로 확장해 보세요!
왜 블로그에서는 댓글에 HTML 태그를 차단할까?
티스토리 및 블로그는 기본적으로 댓글에 script, img, iframe 등 HTML 태그를 사용할 수 없습니다. 그 이유는 다음과 같습니다:
1. XSS(크로스사이트스크립팅) 보안 위협 방지
- 악성 사용자가 댓글에 script나 img onerror=… 같은 스크립트를 삽입할 경우,
- 페이지를 방문한 다른 이용자에게 악성 코드가 실행될 수 있습니다.
2. 스팸 및 광고 링크 남발 방지
- a 링크, 외부 이미지, iframe 등을 삽입해 광고, 피싱, 불법 홍보가 가능해지므로 차단합니다.
3. 블로그 레이아웃 깨짐 방지
- div, table 같은 태그가 댓글에 들어가면 전체 페이지 구조가 무너질 수 있습니다.
4. 불법 콘텐츠 유포 차단
- 성인 콘텐츠, 불법 영상 링크 등을 HTML로 노출하는 문제를 방지합니다.
HTML 태그 복원 스크립트 소개 (이미지, 링크 자동 표시)
그러나 운영자가 댓글을 관리할 수 있다면 굳이 이러한 기능을 차단할 필요는 없어 보이기도 합니다. 댓글란을 활용해 블로그를 더욱 활성화할 수 있다면, 댓글란 역시 콘텐츠 영역으로 확장할 수 있기 때문입니다. 아래는 이미지와 링크를 허용하여 댓글란 기능을 확장할 수 있는 스크립트 코드입니다.
코드 기능 설명
아래 스크립트는 댓글에 img, a 등 HTML 태그가 이스케이프된 채 저장되어 있을 경우, 이를 실제 태그로 복원하고, 이미지를 lazy-loading 처리하며, 로딩 오류 시 숨김 처리까지 적용합니다.
적용 효과
- 댓글에 이미지, 링크 자동 표시
- 보안 위협 없이 HTML 태그 복원
- 댓글 UI 유지 및 레이아웃 안정성 보장
- React 기반 티스토리 스킨에서도 자동 적용
단. 코드는 한줄로 작성하세요!
| 구분 | 설명 |
| 1. HTML 디코딩 | 댓글 내에 , 등으로 표시된 HTML 코드를 실제 태그로 변환합니다. |
| 2. 이미지 lazy-loading 처리 | 이미지에 loading=”lazy” 속성을 추가해 페이지 로딩 속도를 개선합니다. |
| 3. 이미지 오류 처리 | 이미지가 제대로 표시되지 않을 경우 해당 이미지를 숨깁니다. |
| 4. 중복 처리 방지 | 이미 처리한 댓글에는 표시 처리 중복을 막기 위한 표시를 추가합니다. |
| 5. 동적 댓글 대응 | 새로운 댓글이 추가되거나 변경될 때 자동으로 다시 처리해 줍니다. |
| 6. 댓글 작성 후 재처리 | 댓글 작성 후 1초 뒤에 다시 한번 처리를 실행하여 정상 반영을 적용합니다. |
적용 스크립트 코드
script
(function() {
const decodeEntities = (str) = {
const textarea = document.createElement("textarea");
textarea.innerHTML = str;
return textarea.value;
};
const processComments = () = {
const commentContainer = document.querySelector('[data-tistory-react-app="Comment"]');
if (!commentContainer) return;
commentContainer.querySelectorAll('.tt_desc').forEach((el) = {
if (!el.dataset.processed) {
const decoded = decodeEntities(el.innerHTML);
if (/[a-z][sS]*/i.test(decoded)) {
el.innerHTML = decoded;
el.querySelectorAll('img._LAZY_LOADING').forEach(img = {
img.classList.remove('_LAZY_LOADING_INIT_HIDE');
img.loading = 'lazy';
img.onerror = function() {
this.style.display = 'none';
};
});
}
el.dataset.processed = 'true';
}
});
};
if (document.readyState !== 'loading') {
processComments();
} else {
document.addEventListener('DOMContentLoaded', processComments);
}
const observer = new MutationObserver((mutations) = {
let shouldProcess = false;
mutations.forEach((mutation) = {
if (mutation.addedNodes.length) {
shouldProcess = true;
}
});
if (shouldProcess) {
processComments();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
const commentForm = document.querySelector('.tt-area-write form');
if (commentForm) {
commentForm.addEventListener('submit', () = {
setTimeout(processComments, 1000);
});
}
})();
/script
적용 방법
- 티스토리 블로그 관리자 접속
- 스킨 편집 HTML 편집
- body 태그 바로 닫히기 직전 /body 위에 스크립트 삽입
- 저장 후 블로그에서 댓글 영역 확인
댓글을 활용한 이미지 링크와 내비게이션 활
이 스크립트를 활용하면 블로그 댓글을 새로운 네비게이션 수단으로 만들 수 있습니다:
- 방문자,운영자가 댓글로 이미지 링크를 남기면 자동으로 보임
- a href=”링크”설명/a 형태도 복원되므로 관련 페이지로 연결
- 댓글로 보조 콘텐츠, 참고 자료, 외부 이미지 등 공유 가능
- 댓글 기반 사용자 참여형 콘텐츠 공간 구성 가능
주의사항 및 보안 팁
- script 태그 삽입은 시스템에서 무조건 차단되므로 이 스크립트 사용을 불가능 합니다.
- 댓글 필터링은 그대로 유지되며, 단순히 문자열로 보이는 HTML을 실제로 복원해주는 기능입니다.
- 관리자는 악성 댓글 필터링을 병행해야 합니다.
댓글 기능을 블로그 콘텐츠로 확장
이 스크립트를 활용하면 댓글 기능이 단순한 소통을 넘어서 블로그 콘텐츠의 확장 시킬수 있습니다.이미지 링크, 콘텐츠 연결, 보조 정보 제공 등 다양한 기능이 가능해지며, 댓글을 통해 방문자와의 지속적인 소통도 유도할 수있는 장점도 있습니다.