본문 내 이미지 URL 자동 썸네일 전개 및 보안 처리 구현기

“직접 서버에 이미지를 보관하지 않는다면, 외부 URL을 브라우저 상에서 안전하게 인라인으로 전개하면 된다.”

내가 신라 시대에 만든 2채널 스타일 게시판 “つゔぁいちゃんねる(2ch.biz)” 개발 비화의 제19탄입니다. 이번에는 제18회에서 이미지 업로드 기능을 완전히 폐지한 직후 구현했던 ‘이미지 URL 자동 썸네일 전개’와 웹 비콘 공격(IP 유출)을 방지하는 보안 대책에 대해 설명합니다.

제18회에서 디스크 고갈, 대역폭 폭발, 불법 이미지 보관이라는 세 가지 위험으로부터 보호하기 위해, 저는 괴로운 결정을 내려 ‘이미지 직접 업로드 기능’을 완전히 제거했습니다.

하지만 게시판 이용자들에게 ‘이미지로 재미를 공유하는 것’은 커뮤니케이션의 큰 즐거움입니다.

단순한 파란색 텍스트 링크(https://i.imgur.com/xxx.jpg)
만 나열되어 있을 경우, 하나하나 별도의 탭으로 열지 않으면 내용을 알 수 없어 모던한 웹 경험이라고 할 수 없습니다.

그래서 도달하게 된 것이 바로, ‘직접 서버의 스토리지 사용은 1바이트도 쓰지 않으면서, 클라이언트 측 JavaScript로 이미지 URL을 감지하여 인라인 썸네일화하는’ 아키텍처였습니다.

사용자가 본문에 이미지 URL을 작성하면, 브라우저가 레스를 그리는 순간 파서가 URL을 감지하여 안전한 썸네일 이미지를 자동으로 생성합니다.

graph TD
A[사용자가 본문에 이미지 URL을 작성하여 게시] --> B[서버는 텍스트 그대로 DB 저장 (이미지 보관 위험 제로)]
B --> C[브라우저가 스레드를 가져옴]
...

이 접근 방식을 통해 다음 세 가지 이점을 얻었습니다:

서버의 스토리지 소비: 영구적으로 제로 -
이미지 전송 대역폭 비용: 영구적으로 제로(이미지 호스팅 측 CDN이 전송)

• 사용자 경험: Twitter나 전문 게시판처럼, 스레드 내에서 직접 이미지가 보이는 리치한 UI

완벽한 삼방의 이익(Win-Win)이 성립했습니다.

본문 내 URL을 감지하고 일반적인 이미지 확장자 및 대표적인 이미지 공유 서비스의 URL을 판별하는 정규 표현식 파서입니다.

// 본문 정리・이미지 썸네일 전개 함수
function formatPostBody(content) {
// 1. 기본적인 XSS 이스케이프 (HTML 특수 문자 무해화)
...

외부 URL에서 이미지를 불러와서 (<img> 태그의 src에 지정하는) 경우, 웹 엔지니어로서 절대로 무시할 수 없는 보안상의 위협이 존재합니다.

악의적인 사용자가 ‘자체 서버의 URL’을 이미지로 게시했을 때, 그 스레드를 열어본 일반 사용자 브라우저가 자동으로 해당 서버로 이미지 획득 요청을 보내게 됩니다.

그 결과, ‘자체 서버의 접근 로그’를 보면, 그 스레드를 열람하고 있는 사람들의 실제 IP 주소나 브라우저 환경이 통째로 노출되어 버립니다.

이미지 태그에 `referrerpolicy=

썸네일에 마우스를 올리면 돋보기 아이콘(cursor: zoom-in)으로 바뀌고, 클릭하면 부드럽게 확대 표시되며, 화면 아무 곳이나 탭하면 즉시 닫히는, Twitter/X와 완전히 동일한 쾌적한 이미지 열람 경험을 실현했습니다.

제19회에 걸쳐서는 서버 리소스와 법적 안전성을 100% 유지하면서 모던한 이미지 열람을 구현하는 **"본문 내 이미지 URL 자동 썸네일 전개"**에 대해 설명했습니다.

위험 요소를 외부 위탁하기: 자체 스토리지(storage)를 보유하지 않고, imgur 등의 신뢰할 수 있는 외부 로더의 URL을 전개하는 것이 개인 개발의 최적 해법입니다. -
프라이버시 보호 철저: 외부 이미지 로딩 시 no-referrer를 부여하여 사용자의 IP 추적 피해를 방지합니다. -
200px 썸네일 + 라이트박스: 타임라인의 가독성을 방해하지 않으면서, 보고 싶은 사람만 확대할 수 있는 우수한 UX 설계입니다.

게시판의 기능과 표현력은 비약적으로 진화했습니다.

여기서 서비스(service)를 일반 공개하고 안심하고 오래 운영하기 위해서는 "법적인 토대 마련"이 필요합니다.

바로 **"이용 약관・개인정보 처리 방침・문의 창구・삭제 가이드라인 정비"**입니다.

다음 회차에서는 【제20회】서비스 운영의 생명선! 이용 약관・개인정보 처리 방침・삭제 가이드라인 정비 및 푸터 통합으로 이어집니다!

실제 서비스: https://2ch.biz/