Java ScriptでURL直接アクセスを禁止にする方法

はじめに

ログインが必要な管理画面などでURLの直接アクセスを禁止することがありますよね。
URL直接アクセスを防ぐことで、不正なアクセスや情報漏洩のリスクを軽減できます。
この記事では、URL直接アクセスを禁止する方法について解説します。

document.referrerを使った方法

コードの例

まず、document.referrerを使用してURL直接アクセスを制御する方法について見てみましょう。以下はその実際のコード例です。

if (document.referrer === "") {
    // 直接アクセスされた場合の処理
    alert("直接アクセスは禁止されています。");
    window.location.href = "トップページのURL"; // リダイレクト先のURLに変更してください
}

注意点

document.referrerは、新しいタブで開いた場合や、rel="noreferrer"が指定されたリンクを経由してアクセスされた場合にはnullになります。このため、完全にセキュリティを確保するには他の方法も検討する必要があります。

Nuxt3の場合

私は実務でNuxt3メインで使っているので、Nuxt3の場合の書き方も紹介しますね。
SSRだと、クライアントのdocumentにはアクセスできないので、先ほど紹介した方法は使えません。
ですので、Nuxt3でSSRを使った場合のコード例も紹介しておきます。

コードの例

Nuxt.jsを使用している場合、middlewareを活用してURL直接アクセスを制御することができます。以下はNuxt3での具体的なコード例です。

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path.name === from.path.name) {
　　　　　　　return navigateTo('/');
  }
})

URLが直接アクセスされると、middlewareの引数のtoとfromのpathが同じになるので、それを使ってます。

注意点
しかし、クエリパラメーターの切り替えがある画面の場合、クエリパラメーターが切り替わる時にも、このif文の分岐に入ってしまいます。
その場合は、クエリパラメーターを考慮した条件が必要です。

最後に

割と使う方法なので、備忘録も込めて書きました。よろしければいいねしてください！笑