External Link Shield – 離脱確認と信頼ゲーティング

[Don]

	概要	このテーマコンポーネントは、調理済み投稿内の外部リンクに対して設定可能な保護機能を追加します。信頼レベルに基づくルール、オプションのログインおよび情報リダイレクト、信頼できるドメインの視覚的インジケーター、カスタマイズ可能な離脱確認モーダルを適用します。
	プレビュー	Theme Creator
	リポジトリ	https://github.com/VaperinaDEV/external-link-shield
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマは初めてですか？	Discourseテーマを使用するための初心者ガイド

このテーマコンポーネントをインストール

こんにちは

調理済み投稿内の外部リンクに対するきめ細かな制御を追加するテーマコンポーネントを共有したいと思います。これは以下を組み合わせています。

• 信頼レベルに基づくアクセス制御
• 匿名ユーザー保護
• カスタムの離脱確認モーダル
• 信頼できるドメインと不明なドメインの視覚的インジケーター

このコンポーネントは、外部リンクが法的、セキュリティ、または信頼性に関する影響を及ぼす可能性のあるコミュニティ向けに設計されています。

---

特徴

設定可能な信頼レベルルール

すべての信頼レベルに基づく動作は、テーマ設定を通じて完全に設定可能です。

個別に有効または無効にできます。

• 匿名ユーザーのブロック
• TL0 の情報提供リダイレクト
• TL1 の手動表示要件
• より高い信頼レベルに対する離脱確認モーダル

これにより、コンポーネントは、厳格なリンクシールドから最小限のユーザー摩擦まで、非常に異なるコミュニティポリシーに適応できます。

信頼レベルを認識する外部リンク

外部リンクは、閲覧者の信頼レベルに基づいて異なる動作をします。

• 匿名ユーザー
  • 外部リンクは、設定で定義されたログインリンクまたはカスタムURLに置き換えられます。
• TL0
  • リンクは設定可能なリダイレクトに置き換えられます。たとえば、信頼レベルを説明するトピックや、設定で定義されたその他のURLなどです。
• TL1
  • リンクには手動での表示が必要です（クリックして表示）。その後、リンクをクリックすると離脱確認モーダルが表示されます。
• TL2以上
  • リンクは通常通り動作しますが、常に離脱確認モーダルが表示されます。

---

離脱確認モーダル

フォーラムを離れる前に、ユーザーはモーダルを目にします。このモーダルは以下を行います。

• コミュニティを離れることを明確に伝えます
• 完全な宛先URLを <code> タグで表示します
• ユーザーの external_links_in_new_tab の設定を尊重します

これは特に以下の場合に役立ちます。

• コンプライアンスが重視されるコミュニティ
• フィッシング対策
• 経験の浅いユーザーへの教育

---

設定によるドメインベースの動作

このコンポーネントは、2つのテーマ設定を導入します。

internal_domains:
  type: list
  default: ""
  description: "あなたのフォーラムとCDNドメイン（例：example.com|example-cdn.com）。これらにはアイコンもモーダルも表示されません。"

excluded_domains:
  type: list
  default: ""
  description: "信頼できる外部リンクドメイン（例：youtube.com|google.com）。これらには鍵アイコンが表示されますが、モーダル/シールドはスキップされます。"

• 内部ドメイン
  • 内部として扱われます → アイコンもモーダルもなし
• 除外された（信頼できる）ドメイン
  • 鍵アイコンを表示します
  • 信頼レベルによる制限とモーダルをスキップします
• その他のすべての外部リンク
  • 外部リンクアイコンを表示します
  • 信頼レベルに応じて制限または確認されます

---

視覚的インジケーター (SCSS)

アイコンは純粋にCSSによって追加されます。

• 不明な外部リンク → 外部リンクアイコン
• 信頼できる外部リンク → 鍵アイコン（成功色）

これにより、DOMがすっきりし、JSベースのアイコン挿入を回避できます。

このスクリーンショットは、コンポーネントが以下を視覚的に区別する方法を示しています。

• 除外されたドメイン: 信頼できる外部リンク（鍵アイコン、離脱確認なし）、
• 内部ドメイン: 内部リンク（アイコンなし、離脱確認なし）、
• 不明な外部リンク（離脱確認付きの外部リンクアイコン）。

---

ユースケース

このコンポーネントは、以下を行いたい場合に役立ちます。

• 安全でない、または誤解を招く外部リンクからユーザーを保護する
• フォーラムを離れる前に新しいユーザーを教育する
• コミュニティの信頼の進展を強制する
• UXを損なうことなく法的/コンプライアンスの免責事項を追加する

[jrgong]

素晴らしいテーマコンポーネントです!!!

私たちは実際に同様のものを構築しており、クリック数バッジを非表示にして、代わりに認証済み/危険バッジに置き換えています。

私たちは主に、アフィリエイトパートナーシップを結んでいる認証済み/信頼できるベンダーやマーチャントのためにそれを使用しました。

さらに、私たちのポップアップには、テーマコンポーネントのオブジェクト設定エディタを通じて管理されるクーポンコードも表示されます。

[cnlanny]

これは素晴らしいテーマコンポーネントです！共有してくれてありがとう！！！

[Jagster (Jakke Flemming)]

@Don

その他の外部リンク

• トラストレベルに応じてゲート処理または確認されます

しかし、ログインしていない訪問者は外部リンクを直接開くことができます（リンクを開くことが許可されています）。これは意図されたもので、情報/警告は一部のTLにのみ表示されるのですか？

[祁同伟]

右クリックで新しいタブで開くと、外部リンクのチェックをスキップできます。

この部分に制限を設けることは可能でしょうか？

[satonotdead]

ドンさん、素晴らしいですね！作成して共有してくれてありがとうございます。

@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 アイコンを、secure-links.js によってリンクの隣に挿入される iconHTML() 経由でレンダリングされる実際の <svg class="d-icon"> 要素に置き換え

• 設定項目の追加:

  • exit_confirmation_continue_icon
  • external_link_icon,
  • trusted_link_icon,
  • external_link_icon_color,
  • trusted_link_icon_color,
  • link_icon_position (前/後)

• enable_anonymous_blocking が無効化されている場合のクラッシュを修正: 匿名ユーザー（null）に対して currentUser.trust_level が読み取られ、例外が発生して元の <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は、外部リンクに関する私たちが直面したすべてのユースケースに対応できることを確認しました。

偉大なDonに感謝します！

[joo (slower)]

トピックプレビューモーダルでトピックをプレビューしている際、画像をクリックして拡大表示（ライトボックスを開く）すると、External Link Shield コンポーネントの「終了確認」モーダルもトリガーされます。これらの画像リンクは外部リンクではないにもかかわらずです。これらは外部リンクやホットリンクではなく、自社ドメイン/CDNから配信されるローカルでアップロードされた画像です。

[Don]

@joo

これらはホットリンクや外部の画像ではなく、独自のドメイン/CDNから配信されるローカルにアップロードされた画像です。

CDNのドメインはフォーラムのドメインと異なる場合があります。もし異なる場合は、CDNのドメインもinternal_domainsの設定に追加する必要があります。

[joo (slower)]

internal_domains設定に独自のドメインを追加したら、問題が解決しました。

[satonotdead]

この素晴らしい機能を、サイドバーのリンクにも追加できないか気になっています。

そこにはいくつかの外部リンクがありますが、それらにもスタイルを適用するのは良いアイデアだと思います。モーダルや制限なしで、理想としては不要な摩擦を避けることです（それらは検証済みのリンクです）。

[Don]

この件については、ユースケースをまだ完全に理解していないため、気になっています。

サイドバーでは、すでに各リンクにアイコンを割り当てることができ、管理者が追加したリンクはすでに検証済みです。ユーザーが作成したサイドバーのセクションも同様で、ユーザーはすでに知っている信頼できるリンクを明示的に追加しています。

そのため、そこに外部リンクのスタイルを適用することの価値は十分に理解できますが、モーダルや制限は不要だとおっしゃっていたことを考えると、サイドバーがすでにサポートしているアイコン機能に加えて、このコンポーネントがどのような追加の価値を提供するのかは不明確です。

主な目的は、サイドバーのリンクが外部サイトに向いていることを、コンポーネントと同じスタイルやアイコンを使って視覚的に示すことでしょうか？

[satonotdead]

@Don

主な目的は、コンポーネントと同じスタイルやアイコンを使用して、サイドバーのリンクが外部サイトに向かっていることを視覚的に示すこと、というだけで合っていますか？

ご検討いただきありがとうございます。その通りです。望ましい動作は、ユーザーに新しいページに移動するのだと伝えることです。