リンク先のドメインが詐称されているアンカーリンクを警告するChrome Extensionを書いてみた

この記事の内容

記事中で書いてあることの概要

• Chrome Extensionをはじめて書いてみたけど、なぜ書いてみたか
• 書いたChrome Extensionの仕様
• Crome Extensionのソースコード
• Chrome Extensionを書くにあたって参考にしたもの
• 感想

記事中で書いてないこと

• JavaScriptでの正しい在るべき書き方
• ソースコード解説

なぜChrome Extensionを書いてみたか

会社のメールアドレスに対してセキュリティーに関する訓練メールが届いたから。

よく見ると、差出人が[e-mail]という普段利用しないアドレスだったり、https://seculio.com/cube-navi.html 部分にフォーカスを当てると全く異なるURLが表示されたりする
例：https://seculio.com/cube-navi.html

このメールを受け取ったあとしばらくして、これは訓練メールですが、各自ご注意ください。というメッセージが回ってきた。

が、これは人間の注意で防ぐ内容ではないな。と思ったのが発端。

書いたChrome Extensionの仕様

• <a href="https://yumemi.co.jp">https://yumemi.com</a>など、表示されているリンク先と、実際のhrefに指定されているリンク先のドメインが異なる場合にはリンクを押下しても飛ぶ前に確認の為のダイアログを出す。
• URL中の最初のスラッシュまでをドメイン部分とし、そこまでが一致していたらダイアログを出さない。
• <a href="https://yumemi.co.jp">株式会社ゆめみ</a>など、URL形式で表示していないリンクの場合は警告の対象としない。

確認ダイアログが出るリンクの例

• ドメインが異なる場合
  https://yumemi.com
  <a href="https://yumemi.co.jp">https://yumemi.com</a>

• httpとhttpsで異なる場合
  http://yumemi.co.jp
  <a href="https://yumemi.co.jp">http://yumemi.co.jp</a>

確認ダイアログが出ないリンクの例

• リンクのラベルがドメイン部分まで一致する場合
  https://yumemi.co.jp
  <a href="https://yumemi.co.jp">https://yumemi.co.jp</a>

• リンクのラベルがドメイン部分まで一致する場合
  https://yumemi.co.jp/recruit
  <a href="https://yumemi.co.jp">https://yumemi.co.jp/recruit</a>

• リンクのラベルがURL形式ではない場合
  株式会社ゆめみ
  <a href="https://yumemi.co.jp">株式会社ゆめみ</a>

実行結果

メール本文中のhttps://seculio.com/cube-navi.html 部分を押下すると以下のような確認ダイアログが出ます。

ソースコード

以下のマニフェストファイルと、本体のファイルの2つになります。
これらを同じディレクトリに入れてからChrome Extension管理ページでデベロッパーモードを有効にすることでお手元のChromeで有効となります。

※適用はすべて自己責任でお願いします。

manifest.json

{
    "name": "Alert suspicious url",
    "version": "1.0.0",
    "manifest_version": 3,
    "description": "Alert suspicious url before jump.",
    "content_scripts": [{
      "matches": [ "http://*/*", "https://*/*" ],
      "js": [
        "alert_suspicious_url.js"
      ]
    }]
}

※現在のマニフェストでは、全てのページで有効になっていますが、
"matches": [ "http://*/*", "https://*/*" ],
部分を
"matches": [ "https://mail.google.com/mail/*" ],
に変更することでGmailだけで有効にすることができます。

alert_suspecious_url.js

window.onload=function(){
  var e=document.getElementsByTagName('A');
  for (var i=0; i<e.length; i++) e[i].onclick=function(event){
    var link_domain = this.href.match(/^http[s]?:\/\/[^\/]+/);
    var lavel_domain = this.textContent.match(/^http[s]?:\/\/[^\/]+/);
    if (lavel_domain !== null && link_domain !== null && link_domain[0] != lavel_domain[0]){
      var result = window.confirm("遷移先のDomainが表示ラベルと異なります。\n本当に遷移してもよろしいですか。\n\n" + link_domain[0]);
      if( !result ){
          event.preventDefault();
          event.returnValue = '';
      }
    }
  }
}

Chrome Extensionを書くにあたって参考にしたサイト

以下のサイトおよびリンク先にはお世話になりました。
※マニフェストのバージョンのみ、3に変更しています。
https://qiita.com/omukaik/items/4df89dd68a8359907d48

感想

Chrome Extensionを初めて書いてみたのですが、JavaScriptを書ける人にとってはあっけないほど簡単ですので、自分便利ツールを書くには良いなと思いました。
※私はJavaScriptを書けない人だったので大変でしたが、ググってコピペしてでなんとかなりました。
ちょっとJavaScriptの勉強をしようと思いました。