今回、リリース前等で一時的にパスワード認証を付けたい。だけど、理由があってBasic認証が付けれず、Javascriptのみでパスワード認証を設置したい場合の方法を簡単にご紹介します。

早速、以下、完成ソースになります。

<script type="text/javascript">
  document.body.style.display = 'none';
  window.onload = function() {
    var UserInput = null;

    var cookies = document.cookie;
    var cookiesArray = cookies.split(';');
    var pass = 'dGVzdDEyMzQ=';

    for(var c of cookiesArray){
      var cArray = c.split('=');
      if(cArray[0].indexOf('cruw-basic') > -1){
        UserInput = decodeURIComponent(cArray[1]);
      }
    }
    if(!(UserInput && UserInput == window.atob(pass))){
      UserInput = prompt("パスワードを入力して下さい:","");
    }

    if(UserInput != window.atob(pass)){
      document.body.innerHTML = "403 Forbidden";
    }else{
      var now = new Date();
      now.setMinutes(now.getMinutes() + 60*24*3);
      document.cookie = "cruw-basic=" + encodeURIComponent(UserInput) + ";expires=" + now.toUTCString()+"; path=/;";
    }
    document.body.style.display = null;
  }
</script>

「var pass = '○○○';」の○○○の中にBase64エンコードしたパスワードを入力します。上記は、test1234が設定されています。

Base64エンコードは、以下のようなサイトで簡単におこなうことができます。

https://rakko.tools/tools/24/

処理の流れとしては、読み込み時点では強制的にBodyを非表示にし、パスワード認証が通った場合のみ表示するようにしています。

かなり簡易的で脆弱な認証ですので、設置するとしてもリリース前一時的等に、最悪漏れてしまっても問題ないところでご使用ください。

js