Skip to content

fix: 글 요약(short_description)에 HTML 파편이 노출되는 문제 수정#665

Open
Jamkris wants to merge 3 commits into
velopert:masterfrom
Jamkris:master
Open

fix: 글 요약(short_description)에 HTML 파편이 노출되는 문제 수정#665
Jamkris wants to merge 3 commits into
velopert:masterfrom
Jamkris:master

Conversation

@Jamkris
Copy link
Copy Markdown

@Jamkris Jamkris commented Apr 22, 2026

문제점

velog.io/@username 같은 유저 글 목록이나 시리즈/관련 글 카드에서 글 요약 부분에 ">~<, ">~&l 같은 HTML 파편이 그대로 보이는 문제가 있었습니다.

image image

원인

  1. 글 발행 시 MarkdownEditorContainer에서 strip-markdown만으로는 본문 내 raw HTML(<div style="...">, <iframe> 등)이 완전히 제거되지 않아 short_description에 HTML 조각이 섞인 채 저장됩니다.
  2. 이후 .slice(0, 150)으로 문자 단위로 자르기 때문에 HTML 태그나 엔티티(&lt; 등) 중간이 잘려 ...<, ...&l 같은 파편이 남습니다.
  3. 렌더 지점(FlatPostCard, PostCard 등)은 {post.short_description}을 그대로 표시하기 때문에 파편이 UI에 그대로 노출됩니다.

변경사항

유틸 추가

  • src/lib/sanitizeDescription.ts 신규 추가
    • HTML 태그 제거 → 엔티티 디코딩 → 공백 정리 → 150자 safe truncate
    • 잘린 뒤 남은 dangling 태그/엔티티 조각 제거
  • 단위 테스트 12개로 동작 검증 (실제 버그 패턴 재현 테스트 포함)

적용

  • MarkdownEditorContainer.onPublish: sanitizeDescription 적용
  • modules/write.ts PREPARE_EDIT: 기존 글 편집 로드 시에도 정제. 앞으로 저장되는 데이터는 깨끗하게 들어갑니다.

호환성

이미 저장된 과거 글들을 위해 렌더 시점에도 정제를 적용

  • FlatPostCard, PostCard
  • SavedPostItem
  • SeriesPostList, DraggableSeriesPostList
  • RelatedPostsForGuest

기존에 산재해 있던 post.short_description.replace(/&#x3A;/g, ':') 임시 치환 로직도 유틸로 통합했습니다.

참고

  • 사용자 직접 입력 필드(CHANGE_DESCRIPTION)에는 정제를 적용하지 않았습니다.
    입력 중 타이핑 경험을 해치지 않기 위함이며, 발행 시점에 한 번 더 정제됩니다.
  • 서버 측 DB 마이그레이션은 포함되지 않았습니다. 렌더 시점 정제로
    사용자 경험은 즉시 개선되고, 편집·재저장을 거치면 DB 데이터도 점진적으로 정리됩니다.

Jamkris added 3 commits April 22, 2026 12:56
short_description에서 raw HTML 태그, HTML 엔티티(&lt;, &#x3A; 등),
불필요한 공백을 정리하고 지정 길이(기본 150자)로 안전하게 자르는 유틸 추가.

태그/엔티티 경계에서 잘려 `">~<`, `">~&l` 같은 파편이 남지 않도록
slice 후 남은 dangling 태그·엔티티 조각을 제거한다.

단위 테스트로 아래 케이스 검증:
- 태그/속성 포함 HTML 제거
- &lt; &amp; &gt; &#x3A; &velopert#65; 등 엔티티 디코딩
- 실제 버그 패턴(<div style="...">~</div>...) 재현 케이스
- MarkdownEditorContainer.onPublish: strip-markdown 후에도 남는
  raw HTML/엔티티를 sanitizeDescription으로 추가 정제
- modules/write.ts PREPARE_EDIT: 기존 글 편집 로드 시에도
  description을 정제하여 재저장 시 데이터가 자동 정상화되도록 함

CHANGE_DESCRIPTION(사용자 직접 입력)에는 정제를 적용하지 않아
입력 중 타이핑 경험은 기존과 동일.
이미 DB에 저장된 과거 글들의 short_description에는 HTML 태그나
잘린 엔티티가 섞여 있어 ">~<, ">~&l 같은 문자열이 그대로 노출됐다.
렌더 직전에 sanitizeDescription을 태워 정리한다.

적용 대상:
- FlatPostCard (유저 글 목록, 검색 결과, 태그 상세)
- PostCard (기존 &#x3A; 개별 치환 로직도 유틸로 통합)
- SavedPostItem (임시 저장 목록)
- SeriesPostList / DraggableSeriesPostList
- RelatedPostsForGuest (기존 &#x3A; 치환 통합)
@Jamkris
Copy link
Copy Markdown
Author

Jamkris commented Apr 22, 2026

Netlify가 기본값인 Node 10.24.1로 빌드를 시도하는데, 의존성 중 koa-compress@5.1.1이 Node 12 이상을 요구해서 yarn install 단계에서 실패합니다.

현재 레포에 Node 버전을 지정하는 파일(.nvmrc, .node-version, netlify.toml)이 없어서 Netlify의 레거시 기본값으로 떨어지는 상황입니다. 참고로 .github/workflows/의 기존 CI는 Node 16.x를 사용하고 있어서 GitHub Actions 빌드는 정상 동작합니다.

.nvmrc 추가 하거나 netlift.toml 파일을 추가해야할거 같습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant