External Links
Adds visual icons to external links, mailto links, and telephone links on your Drupal site using JavaScript.
extlink
インストール
composer require 'drupal/extlink:^2.0'
概要
External Linksモジュールは、Drupalウェブサイト上で外部リンクと内部リンクを視覚的に区別するためのシンプルかつ強力なアプローチを提供します。JavaScriptを使用して、外部ウェブサイトへのリンク、メールアドレス（mailto:）、電話番号（tel:）を自動的に検出し、特徴的なアイコンでマークします。
このクライアントサイド実装により、アイコンはJavaScriptが有効なユーザーにのみ表示され、適切なARIAラベルによるアクセシビリティを維持しながらプログレッシブエンハンスメントを実現します。このモジュールは、アイコンの配置、Font Awesomeのサポート、リンク動作の変更（target="_blank"、rel="nofollow"、rel="noreferrer"）、CSSセレクタや正規表現パターンによる処理対象リンクの詳細な制御など、豊富な設定オプションを提供します。
External Linksは、ユーザーがサイトを離れることを明確に示す必要がある政府、教育、企業のウェブサイトに特に有用で、外部サイトへのナビゲーション前に警告ダイアログを表示できます。
Features
- 外部リンク、mailtoリンク、telリンクに視覚的なアイコン（SVGまたはFont Awesome）を自動追加
- 設定可能なtarget属性の動作により、外部リンクを新しいウィンドウ/タブで開く
- SEOとプライバシー制御のためにrel="nofollow"およびrel="noreferrer"属性を追加
- 外部サイトへのナビゲーション前にカスタマイズ可能なポップアップ警告ダイアログを表示
- デフォルトのSVGアイコンの代わりにFont Awesomeアイコンをサポート
- 設定可能なアイコン配置：リンクテキストの前、先頭に追加、末尾に追加、後ろ
- 正規表現を使用したパターンマッチングで特定のURLを含めるまたは除外
- CSSセレクタベースのフィルタリングで特定のページ領域を対象または除外
- サブドメインを内部リンクとして扱い、一貫したサイト識別を実現
- 信頼できる外部サイトをホワイトリストに登録するための許可ドメインリストをサポート
- 最後の単語とアイコンを一緒に保持することでテキストの分離を防止
- アクセシビリティ向上のため装飾的なアイコンをスクリーンリーダーから非表示
- Drupal 6および7バージョンからの移行サポートを提供
- 多数のパターンを持つサイトでインラインスクリプトサイズを削減するための外部JSファイルオプション
- 追加のスタイリング柔軟性のためのカスタマイズ可能なCSSクラス
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.
権限 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