外部リンクにtarget=_blank，rel=noopener，アイコンを追加する

タイトルの通りですが，外部リンクはaタグにいろいろ付けなければいけません．

target="_blank"だけでは，セキュリティ，パフォーマンスの問題があるので，rel="noopener "も追加します．

外部アイコンはお好みです．

実装

jQueryは使用せず，Vanilla JSです．

target_blank.html

<script>
 document.addEventListener('DOMContentLoaded', function() {
   // httpから始まるaタグのうち、[target="_blank"]のついていないaタグが対象
   // 内部リンクは、「/」から始める前提なので無視
   document.querySelectorAll('a[href^=http]:not([target="_blank"])').forEach( atag => {

     // 外部リンクを必ず新しいタブで開く
     atag.setAttribute('target', '_blank');

     // 別プロセスで開く (下は，noreferrerを付ける場合)
     atag.setAttribute('rel', 'noopener');
     // atag.setAttribute('rel', 'noopener noreferrer');

     // クラスを追加して，外部リンクアイコンを表示
     atag.classList.add('externalLinkIcon');
   })
});
</script>

style.css

.externalLinkIcon::after  {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZXh0ZXJuYWwtbGluayI+PHBhdGggZD0iTTE4IDEzdjZhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWOGEyIDIgMCAwIDEgMi0yaDYiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSIxNSAzIDIxIDMgMjEgOSI+PC9wb2x5bGluZT48bGluZSB4MT0iMTAiIHkxPSIxNCIgeDI9IjIxIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==");
    padding-left: 3px;
    padding-right: 5px;
}

svgは，base64にしています． ファイルを読み込む場合は，content: url("/external-link.svg");

svgはこちらのサイトを利用させていただきました．