External Links
Adds visual icons to external links, mailto links, and telephone links on your Drupal site using JavaScript.
extlink
Install
composer require 'drupal/extlink:^2.0'
Overview
The External Links module provides a simple yet powerful approach to visually differentiating external links from internal ones on your Drupal website. Using JavaScript, it automatically detects and marks links to external websites, email addresses (mailto:), and telephone numbers (tel:) with distinctive icons.
This client-side implementation means icons are only displayed to users with JavaScript enabled, ensuring progressive enhancement while maintaining accessibility through proper ARIA labels. The module offers extensive configuration options including icon placement, Font Awesome support, link behavior modifications (target="_blank", rel="nofollow", rel="noreferrer"), and granular control over which links are processed through CSS selectors and regular expression patterns.
External Links is particularly useful for government, educational, and corporate websites that need to clearly indicate when users are leaving the site, and can display warning dialogs before navigation to external destinations.
Features
- Automatically adds visual icons (SVG or Font Awesome) to external links, mailto links, and tel links
- Opens external links in new windows/tabs with configurable target attribute behavior
- Adds rel="nofollow" and rel="noreferrer" attributes for SEO and privacy control
- Displays customizable pop-up warning dialog before navigating to external sites
- Supports Font Awesome icons as an alternative to default SVG icons
- Configurable icon placement: before, prepend, append, or after the link text
- Pattern matching using regular expressions to include or exclude specific URLs
- CSS selector-based filtering to target or exclude specific page regions
- Treats subdomains as internal links for consistent site identification
- Supports allowed domains list for whitelisting trusted external sites
- Prevents text orphaning by keeping the last word with the icon together
- Hides decorative icons from screen readers for improved accessibility
- Provides migration support from Drupal 6 and 7 versions
- External JS file option to reduce inline script size for sites with many patterns
- Customizable CSS classes for additional styling flexibility
Use Cases
Government Website Compliance
Government websites often require clear indication when users leave official domains. Configure External Links to show icons on all external links, enable pop-up warnings, and add rel="noreferrer" to protect user privacy.
E-commerce Affiliate Link Handling
Online stores can use pattern matching to exclude trusted affiliate partner domains from external link indicators while marking all other external links. Use the allowed_domains setting to whitelist partner sites.
Intranet with External Resource Links
Corporate intranets can use CSS selector filtering to only show external icons in content areas while excluding navigation menus and footer links that may contain external resources.
SEO-Optimized Content Sites
Content publishers can enable rel="nofollow" on external links to control link equity distribution, while using the exclude pattern to preserve follow attributes for trusted partner sites.
Accessibility Enhancement
Enable screen reader labels and hide decorative icons when appropriate to ensure visually impaired users understand link destinations without redundant announcements.
Multi-site Networks
Organizations running multiple Drupal sites on different subdomains can enable the subdomain exclusion option to treat all sites in the network as internal, preventing cross-site links from showing external indicators.
Tips
- Use CSS selectors to exclude navigation menus and footers where external indicators may be visually cluttering
- Enable the external JS file option on sites with many exclusion patterns to reduce page weight
- Override Drupal.theme functions in your theme's JavaScript to completely customize icon appearance
- Add custom CSS classes to style external links differently based on your design requirements
- Use the allowed_domains setting for trusted partner sites rather than complex regex patterns
- Test pattern matching in browser developer console using: new RegExp('your-pattern', 'i').test('test-url')
Technical Details
Admin Pages 1
/admin/config/user-interface/extlink
Configure how external links, mailto links, and telephone links are displayed and behave across your site. Control icon appearance, link attributes, warning messages, and filtering options.
Permissions 1
Hooks 2
hook_extlink_settings_alter
Allows modules to modify all External Links settings before they are passed to JavaScript.
hook_extlink_css_exclude_alter
Allows modules to specifically modify the CSS exclude selector string.
Troubleshooting 6
Ensure JavaScript is enabled in the browser. Check that the module is not disabled on admin routes if testing on admin pages. Verify the CSS selectors aren't excluding your content area. Clear Drupal caches after configuration changes.
Check the extlink_include pattern setting - it may be matching internal URLs incorrectly. Verify allowed_domains doesn't have typos. Enable 'Exclude links with the same primary domain' for subdomain handling.
Ensure Font Awesome library is properly loaded on your site before enabling this option. Check that the correct Font Awesome version classes are configured (FA 4.x uses 'fa fa-external-link', FA 5+ uses 'fas fa-external-link-alt').
Verify the 'Display a pop-up warning' option is enabled. Check browser console for JavaScript errors. Ensure no other JavaScript is interfering with the click handlers.
After enabling the external JS file option, clear all caches. Check that /extlink/settings.js is accessible (not blocked by security rules). Verify the module's event subscriber is properly clearing cached assets.
Remember patterns are JavaScript regular expressions. Special characters must be escaped with backslashes (e.g., example\.com not example.com). Test patterns in browser console before applying.
Security Notes 5
- The 'administer extlink' permission is marked as 'restrict access' and should only be granted to trusted administrators
- The noreferrer attribute is enabled by default to protect user privacy by not sending referrer information to external sites
- When enabling 'open in new window', the module automatically adds rel="noopener" to prevent reverse tabnapping attacks
- Alert text is sanitized using Xss::filterAdmin() to prevent XSS vulnerabilities in warning messages
- All user-provided labels and patterns are properly escaped before being output to JavaScript