외부 링크 보호 – 종료 확인 및 신뢰 게이트

[Don]

	요약	이 테마 컴포넌트는 렌더링된 게시글의 외부 링크에 대해 설정 가능한 보호 기능을 추가합니다. 신뢰도 기반 규칙, 선택적 로그인 및 정보 리디렉션, 신뢰할 수 있는 도메인에 대한 시각적 표시기, 사용자 지정 가능한 이탈 확인 모달을 적용합니다.
	미리보기	Theme Creator
	리포지토리	https://github.com/VaperinaDEV/external-link-shield
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스코ourse 테마를 처음 접하십니까?	디스코ourse 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

안녕하세요

렌더링된 게시글에서 외부 링크에 대한 세밀한 제어를 추가하는 테마 컴포넌트를 공유하고자 합니다. 이 컴포넌트는 다음을 결합합니다:

• 신뢰도 기반 접근 제어
  *匿名用户(익명 사용자) 보호
• 사용자 지정 이탈 확인 모달
• 신뢰할 수 있는 도메인과 미확인 도메인에 대한 시각적 표시기

이 컴포넌트는 외부 링크가 법적, 보안적 또는 신뢰도의 함의를 가질 수 있는 커뮤니티를 위해 설계되었습니다.

---

기능

설정 가능한 신뢰도 규칙

모든 신뢰도 기반 동작은 테마 설정을 통해 완전히 설정할 수 있습니다.

다음 항목을 독립적으로 활성화하거나 비활성화할 수 있습니다:

• 익명 사용자 차단
• TL0 정보 대체
• TL1 수동 공개 요구
• 더 높은 신뢰도 레벨을 위한 이탈 확인 모달

이를 통해 컴포넌트는 엄격한 링크 차폐부터 최소한의 사용자 마찰까지 매우 다양한 커뮤니티 정책에 적응할 수 있습니다.

신뢰도 인식 외부 링크

외부 링크는 뷰어의 신뢰도 레벨에 따라 다르게 작동합니다:

• 익명 사용자
  • 외부 링크는 로그인 링크 또는 설정에서 정의된 사용자 지정 URL로 대체됩니다.
• TL0
  • 링크는 설정 가능한 리디렉션으로 대체됩니다. 예를 들어, 신뢰도 레벨을 설명하는 주제나 설정에서 정의된 기타 URL 등입니다.
• TL1
  • 링크는 수동 공개(클릭하여 보기)를 필요로 하며, 링크를 클릭하면 이탈 확인 모달이 표시됩니다.
• TL2+
  • 링크는 정상적으로 작동하지만 항상 이탈 확인 모달이 표시됩니다.

---

이탈 확인 모달

포럼을 떠나기 전에 사용자는 다음과 같은 모달을 확인합니다:

• 커뮤니티를 떠나고 있다는 점을 명확히 명시
• <code> 태그로 전체 대상 URL 표시
• 사용자의 external_links_in_new_tab 설정 준수

이것은 특히 다음 경우에 유용합니다:

• 컴플라이언스가 중요한 커뮤니티
• 피싱 완화
• 경험이 적은 사용자 교육

---

설정을 통한 도메인 기반 동작

이 컴포넌트는 두 가지 테마 설정을 도입합니다:

internal_domains:
  type: list
  default: ""
  description: "Your forum and CDN domains (e.g., example.com|example-cdn.com). These will have NO icon and NO modal."

excluded_domains:
  type: list
  default: ""
  description: "Trusted external domains (e.g., youtube.com|google.com). These will show a LOCK icon but skip the modal/shielding."

• 내부 도메인
  • 내부로 처리됨 → 아이콘 없음, 모달 없음
• 제외(신뢰할 수 있는) 도메인
  • 잠금 아이콘 표시
  • 신뢰도 게이트 및 모달 스킵
• 기타 모든 외부 링크
  • 외부 링크 아이콘 표시
  • 신뢰도 레벨에 따라 게이트 처리 및/또는 확인

---

시각적 표시기 (SCSS)

아이콘은 순수하게 CSS를 통해 추가됩니다:

• 외부 미확인 링크 → 외부 링크 아이콘
• 신뢰할 수 있는 외부 링크 → 잠금 아이콘 (성공 색상)

이것은 DOM을 깔끔하게 유지하고 JS 기반 아이콘 주입을 피합니다.

이 스크린샷은 컴포넌트가 다음을 어떻게 시각적으로 구별하는지 보여줍니다:

• 제외 도메인: 신뢰할 수 있는 외부 링크 (잠금 아이콘, 이탈 확인 없음),
• 내부 도메인: 내부 링크 (아이콘 없음, 이탈 확인 없음),
• 미확인 외부 링크 (이탈 확인이 있는 외부 링크 아이콘).

---

사용 사례

다음과 같은 경우 이 컴포넌트가 유용합니다:

• 사용자가 안전하지 않거나 오해의 소리가 있는 외부 링크로부터 보호
• 사용자가 포럼을 떠나기 전에 신규 사용자에게 교육
• 커뮤니티 신뢰도 진행 상황 강제
• UX를 해치지 않으면서 법적/컴플라이언스 면책 조항 추가

[jrgong]

정말 멋진 테마 컴포넌트입니다!!!

우리는 클릭 수 배지를 숨기고 대신 인증/위험 배지로 교체하는 유사한 기능을 직접 개발했습니다.

주로 제휴 관계를 맺고 있는 인증/신뢰할 수 있는 벤더 및 상인들에게 이 기능을 활용했습니다.

또한, 팝업에서는 테마 컴포넌트의 객체 설정 편집기를 통해 관리되는 쿠폰 코드도 함께 표시됩니다.

[cnlanny]

정말 멋진 테마 컴포넌트네요! 공유해 주셔서 감사합니다!!!

[Jagster (Jakke Flemming)]

@Don

기타 모든 외부 링크

• 신뢰 수준에 따라 게이트 처리 및/또는 확인됩니다

하지만 로그인하지 않은 방문자는 외부 링크를 직접 열 수 있습니다(링크 열기 허용). 이렇게 계획된 것이며, 정보/경고는 일부 TL(신뢰 수준)에만 표시되는 건가요?

[祁同伟]

오른쪽 클릭으로 새 탭에서 열면 외부 링크 검사를 건너뛸 수 있습니다.

이 부분에 제한을 걸 수 있을까요?

[satonotdead]

Don, 정말 좋습니다. 만들어서 공유해 주셔서 감사합니다!

@Don

• 신뢰할 수 있는 외부 링크 → 잠금 아이콘 (성공 색상)

신뢰할 수 있는 외부 링크에 왜 잠금 아이콘을 사용하는지 궁금합니다. 허용된 링크인데 '잠김’으로 해석될 수 있을 것 같아서요.

이 컴포넌트를 사용해 보겠습니다. 외부 링크에 대한 우리의 모든 사용 사례를 커버하는 것 같습니다. 또한, 일반적인 표준이 오른쪽에 아이콘을 배치하는 것임을 알고 있으므로 아이콘을 오른쪽으로 이동시키는 것도 시도해 보겠습니다.

항상 그렇듯이 제 생각을 공유하는 것뿐이며, 이를 통해 TC가 개선되기를 바랍니다.

[Don]

안녕하세요

테마 컴포넌트를 v2.0으로 업데이트했습니다 : DEV: Replace CSS-drawn link icons with configurable d-icon rendering; fix anonymous blocking crashAdd files via upload - Pull Request #1 - VaperinaDEV/external-link-shield - GitHub

이번 업데이트에는 다음 내용이 포함되어 있습니다:

• 수동으로 관리하던 SVG mask-image 아이콘을 iconHTML()을 통해 렌더링되는 실제 <svg class="d-icon"> 요소로 교체하고, secure-links.js가 링크 옆에 삽입하도록 변경

• 설정 항목 추가:

  • exit_confirmation_continue_icon
  • external_link_icon,
  • trusted_link_icon,
  • external_link_icon_color,
  • trusted_link_icon_color,
  • link_icon_position (앞/뒤)

• enable_anonymous_blocking이 비활성화되어 있을 때 발생하는 충돌 수정: 익명 사용자의 경우 currentUser.trust_level이 읽히면서(null) 예외가 발생하고 원래의 <a> 태그가 처리되지 않거나 보호되지 않은 채로 방치되는 문제가 있었습니다. 이제 익명 방문자에게는 잘 정의된 통과 경로(아이콘 + 선택적 확인 모달, TL 게이트 없음)가 제공됩니다

---

> ./support --coffee

[Moin]

@Don

• external_link_icon

v2.1에 대한 제안: 아이콘 설정 유형 사용

@Discourse

아이콘 설정:

banner_icon:
  default: bullhorn
  type: icon

아이콘 설정은 사이트 소유자에게 검색 가능한 아이콘 선택기를 제공하며, 값은 아이콘 이름입니다. Discourse는 선택된 아이콘을 스프라이트 시트에 추가하므로, 별도로 등록하지 않고도 테마에서 렌더링할 수 있습니다.

[Don]

좋아요, 고맙습니다. 수정했습니다.

[eisammy (Sammy)]

이 컴포넌트의 존재를 제가 어떻게 알았을까요? 유지보수를 해주셔서 정말 감사합니다. 테스트해 보겠습니다.

[satonotdead]

마지막으로 이루어진 빠르고 훌륭한 개선 사항 덕분에, 이 Theme Component가 외부 링크와 관련하여 우리가 겪었던 모든 사용 사례를 처리할 수 있음을 확인했습니다.

훌륭한 작업을 해준 Great Don에게 박수를 보냅니다!

[joo (slower)]

토픽 미리보기 모달에서 토픽을 미리 볼 때, 이미지를 클릭하여 확대(라이트박스 열기)하면 외부 링크 쉴드 컴포넌트의 “종료 확인” 모달도 함께 트리거됩니다. 이는 해당 이미지 링크가 외부 링크가 아님에도 발생하는 문제입니다. 이 이미지들은 외부에서 링크된 이미지가 아니라, 자체 도메인/CDN에서 제공되는 로컬 업로드 이미지입니다.

[Don]

@joo

이것들은 외부 링크(hotlink)나 외부 이미지가 아니라, 우리 도메인/CDN에서 서빙되는 로컬 업로드 이미지입니다.

CDN 도메인이 포럼 도메인과 다른가요? 그렇다면 internal_domains 설정에 CDN 도메인도 추가해야 합니다.

[joo (slower)]

internal_domains 설정에 내 도메인을 추가했고, 그렇게 하니 문제가 해결되었습니다.