【フロントエンド防衛】特定のIPアドレスを about:blank に飛ばす簡易アクセスコントロールのjavasript

フロントエンド（JavaScript）で特定のIPアドレスからのアクセスを検知し、即座に遷移（about:blank へのリダイレクト）させるアプローチについて紹介します。

通常、IP制限はWAFやCDN、Webサーバー（Nginx / Apache）などの「インフラ層」で行うのが定石ですが、フロントエンド（JavaScript）に数行のコードを仕込むだけで、驚くほどスピーディかつ手軽に同様の挙動を実現できます。

今回は、以下のJavaScriptコードを例に、フロントエンドでIP制限を行い about:blank（空白ページ）へリダイレクトさせるメリットと解決できる課題について解説します。

対象となるコード

<script>
(function() {
  // ① 外部APIを使って、アクセスした人のIPアドレスを取得する
  fetch('[https://api.ipify.org?format=json](https://api.ipify.org?format=json)')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      var clientIp = data.ip; 
      
      // デバッグ用：取得したIPをコンソールに表示
      console.log("取得されたIPアドレスは: " + clientIp);
      
      // ② ブロックしたいIPアドレスを設定
      var blockIp = 'xxx.xxx.xxx.xxx'; 

      // ③ 一致したらアクセス拒否（ページを真っ白にする）
      if (clientIp === blockIp) {
        window.location.replace('about:blank');
      }
    })
    .catch(function(error) {
      console.error('IPアドレスの取得に失敗しました:', error);
    });
})();
</script>