External Link Shield – Exit Confirmation & Trust Gating

[Don]

	Summary	This theme component adds configurable protection for external links in cooked posts. It applies trust-level–based rules, optional login and information redirects, visual indicators for trusted domains, and a customizable exit confirmation modal.
	Preview	Theme Creator
	Repository	https://github.com/VaperinaDEV/external-link-shield
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Hello

I’d like to share a Theme Component that adds fine-grained control over external links in cooked posts, combining:

• trust-level–based access control
• anonymous user protection
• a custom exit confirmation modal
• and visual indicators for trusted vs unknown domains

This component is designed for communities where external links may carry legal, security, or trust implications.

---

Features

Configurable trust-level rules

All trust-level–based behaviors are fully configurable via theme settings.

You can independently enable or disable:

• anonymous user blocking
• TL0 informational replacement
• TL1 manual reveal requirement
• exit confirmation modal for higher trust levels

This allows the component to adapt to very different community policies, from strict link shielding to minimal user friction.

Trust-level–aware external links

External links behave differently based on the viewer’s trust level:

• Anonymous users
  • External links are replaced with a login link or a custom URL defined in the settings.
• TL0
  • Links are replaced with a configurable redirect, for example a topic explaining trust levels or any other URL defined in the settings.
• TL1
  • Links require manual reveal (click-to-view), then clicking the link shows the exit confirmation modal.
• TL2+
  • Links behave normally but always show an exit confirmation modal.

---

Exit confirmation modal

Before leaving the forum, users see a modal that:

• Clearly states they are leaving the community
• Shows the full destination URL in <code> tags
• Respects the user’s external_links_in_new_tab preference

This is especially useful for:

• compliance-heavy communities
• phishing mitigation
• educating less experienced users

---

Domain-based behavior via settings

The component introduces two theme settings:

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."

• Internal domains
  • Treated as internal → no icon, no modal
• Excluded (trusted) domains
  • Show a lock icon
  • Skip trust-level gating and the modal
• All other external links
  • Show an external-link icon
  • Are gated and/or confirmed depending on trust level

---

Visual indicators (SCSS)

Icons are added purely via CSS:

• External unknown links → external-link icon
• Trusted external links → lock icon (success color)

This keeps the DOM clean and avoids JS-based icon injection.

This screenshot shows how the component visually distinguishes between:

• Excluded domains: trusted external links (lock icon, no exit confirmation),
• Internal domains: internal links (no icon, no exit confirmation),
• unknown external links (external-link icon with exit confirmation).

---

Use cases

This component is useful if you want to:

• Protect users from unsafe or misleading external links
• Educate new users before letting them leave the forum
• Enforce community trust progression
• Add legal / compliance disclaimers without breaking UX

[jrgong]

Fantastic Theme Component!!!

We actually build something similar where we also hide click count badges and replace them with verified/danger badges.

We mainly used it for our verified/trusted vendors and merchants which we have an affiliate partnership with.

In addition our popup also displays coupon codes that are managed through the Object settings editor of the theme component.

[cnlanny]

This is a great theme component! Thank you for sharing!!!

[Jagster (Jakke Flemming)]

@Don

All other external links

• Are gated and/or confirmed depending on trust level

But non logged in visitors can open an external link directly (they are allowed to open links). Planned that way and info/warning is shown only to some TL?

[祁同伟]

Right-click to open in a new tab to skip the external link check.

Can this part be restricted?

[satonotdead]

This is great Don, thanks for building and sharing it!

@Don

• Trusted external links → lock icon (success color)

I wonder why the trusted external links uses a lock icon? I mean, it can be interpreted as “locked” when they are allowed.

I will try this component; it seems to cover all our use cases for external links. I will also try moving the icons to the right because I understand it is the common standard.

Like always, just sharing my thoughts and glad if the TC can be improved with them.

[Don]

Hello

I’ve updated the theme component to 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

This update contains:

• Swap the hand-maintained SVG mask-image icons for real <svg class="d-icon"> elements rendered via iconHTML(), inserted next to links by secure-links.js

• Add settings:

  • exit_confirmation_continue_icon
  • external_link_icon,
  • trusted_link_icon,
  • external_link_icon_color,
  • trusted_link_icon_color,
  • link_icon_position (before/after)

• Fix crash when enable_anonymous_blocking is disabled: currentUser.trust_level was read for anonymous users (null), throwing and silently leaving the original <a> unprocessed/unprotected; anonymous visitors now get a well-defined pass-through (icon + optional confirmation modal, no TL gating)

---

> ./support --coffee

[Moin]

@Don

• external_link_icon

Suggestion for v2.1: Using the icon setting type

@Discourse

Icon Setting:

banner_icon:
  default: bullhorn
  type: icon

Icon settings give site owners a searchable icon picker, and the value is the icon name. Discourse adds the selected icon to the sprite sheet, so you can render it in your theme without registering it separately.

[Don]

Cool, thanks changed it.

[eisammy (Sammy)]

How did I not know this component existed? Thanks so much for maintaining it, I’ll give it a test

[satonotdead]

With the last and fast improvements I can confirm this Theme Component handles every use-case we had with external links.

Kudos to the Great Don!

[joo (slower)]

When previewing a topic in the Topic Preview Modal, clicking an image to enlarge it (opening the lightbox) also triggers the “exit confirmation” modal from the External Link Shield component — even though these image links are not external links. They are locally uploaded images served from our own domain/CDN, not hotlinked or external images.

[Don]

@joo

They are locally uploaded images served from our own domain/CDN, not hotlinked or external images.

Is the CDN domain different from your forum domain? If so, you also need to add the CDN domain to the internal_domains setting.

[joo (slower)]

I added my own domain to the internal_domains setting and that solved it.