外部链接防护 - 退出确认与信任门控

[Don]

	摘要	此主题组件为已渲染帖子中的外部链接添加了可配置的保护机制。它应用基于信任级别的规则、可选的登录和信息重定向、受信任域的视觉指示器以及可自定义的退出确认模态框。
	预览	Theme Creator
	代码仓库	\u003chttps://github.com/VaperinaDEV/external-link-shield\u003e
	安装指南	如何安装主题或主题组件
	Discourse 主题新手？	Discourse 主题使用入门指南

安装此主题组件

您好

我想分享一个主题组件，它为已渲染帖子中的外部链接提供了细粒度的控制，结合了：

• 基于信任级别的访问控制
• 匿名用户保护
• 自定义退出确认模态框
• 受信任与未知域的视觉指示器

该组件专为那些外部链接可能涉及法律、安全或信任影响的社区设计。

---

特性

可配置的信任级别规则

所有基于信任级别的行为都可通过主题设置完全配置。

您可以独立启用或禁用：

• 匿名用户屏蔽
• TL0 信息替换
• TL1 手动显示要求
• 针对更高信任级别的退出确认模态框

这使得该组件能够适应截然不同的社区策略，从严格的链接屏蔽到最小的用户摩擦。

信任级别感知的外部链接

外部链接的行为根据查看者的信任级别而有所不同：

• 匿名用户
  • 外部链接将被替换为登录链接或设置中定义的自定义 URL。
• TL0
  • 链接将被替换为可配置的重定向，例如解释信任级别的帖子或设置中定义的任何其他 URL。
• TL1
  • 链接需要手动显示（点击查看），然后点击链接会显示退出确认模态框。
• TL2+
  • 链接表现正常，但始终显示退出确认模态框。

---

退出确认模态框

在离开论坛之前，用户会看到一个模态框，该模态框：

• 明确告知他们正在离开社区
• 在 \u003ccode\u003e 标签中显示完整的目标 URL
• 尊重用户的 external_links_in_new_tab 偏好设置

这对于以下情况特别有用：

• 合规性要求高的社区
• 网络钓鱼缓解
• 教育经验不足的用户

---

基于域的行为（通过设置）

该组件引入了两个主题设置：

internal_domains:
  type: list
  default: ""
  description: "您的论坛和 CDN 域名（例如 example.com|example-cdn.com）。这些将没有图标和模态框。"

excluded_domains:
  type: list
  default: ""
  description: "受信任的外部域名（例如 youtube.com|google.com）。这些将显示一个 LOCK 图标，但会跳过模态框/屏蔽。"

• 内部域名
  • 被视为内部域名 → 没有图标，没有模态框
• 排除（受信任）域名
  • 显示 锁形图标
  • 跳过信任级别限制和模态框
• 所有其他外部链接
  • 显示一个外部链接图标
  • 根据信任级别进行限制和/或确认

---

视觉指示器 (SCSS)

图标纯粹通过 CSS 添加：

• 外部未知链接 → external-link 图标
• 受信任的外部链接 → 锁形图标（成功颜色）

这使 DOM 保持整洁，并避免了基于 JS 的图标注入。

此截图显示了该组件如何区分：

• 排除的域名：受信任的外部链接（锁形图标，无退出确认），
• 内部域名：内部链接（无图标，无退出确认），
• 未知外部链接（带有退出确认的 external-link 图标）。

---

用例

如果您想实现以下目标，此组件非常有用：

• 保护用户免受不安全或误导性的外部链接的侵害
• 在允许新用户离开论坛之前对其进行教育
• 强制执行社区信任进阶
• 在不破坏用户体验 (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 被禁用时的崩溃问题：此前代码会为匿名用户（值为 null）读取 currentUser.trust_level，导致抛出异常并静默地使原始 <a> 标签未被处理/保护；现在匿名访客将获得明确定义的直通行为（显示图标 + 可选的确认弹窗，无信任等级限制）

---

> ./support --coffee

[Moin]

@Don

• external_link_icon

关于 v2.1 的建议：使用图标设置类型

[quote=“Discourse, post:1, topic:82557”]
图标设置：

banner_icon:
  default: bullhorn
  type: icon

图标设置为站点管理员提供了一个可搜索的图标选择器，其值为图标名称。Discourse 会将选定的图标添加到雪碧图中，因此您可以在主题中直接渲染它，而无需单独注册。

[Don]

酷，谢谢，已经改好了。

[eisammy (Sammy)]

我怎么会知道这个组件的存在呢？非常感谢你进行维护，我会去测试一下

[satonotdead]

得益于最近且快速的改进，我可以确认这个主题组件能够处理我们在使用外部链接时遇到的所有用例。

向伟大的 Don 致敬！

[joo (slower)]

在主题预览弹窗（Topic Preview Modal）中预览主题时，点击图片以放大显示（打开灯箱）也会触发“外部链接防护”（External Link Shield）组件的“退出确认”弹窗——尽管这些图片链接并非外部链接。它们是从我们自己的域名/CDN 提供的本地上传图片，而非外部链接或热链图片。

[Don]

@joo

这些是本地上传的图片，由我们自己的域名/CDN 提供，并非热链接或外部图片。

CDN 域名是否与您的论坛域名不同？如果是，您还需要将 CDN 域名添加到 internal_domains 设置中。

[joo (slower)]

我在 internal_domains 设置中添加了自己的域名，问题就解决了。