ハイブリッド開発(HTML5+CSS3)のログイン情報の保持方法について

ハイブリッド開発(HTML5+CSS3)のログイン情報の保持方法について

ハイブリッド開発でログイン情報をどう保持するかをちょっと考えていたのですが、セッションとかクッキーとかは古いかと思っていて、HTML5から追加されたsessionStrageは公式ドキュメントを見ていると良いんじゃないかと思いました。

ライフサイクルはブラウザが閉じるまでで、ブラウザが閉じられたら削除されます。

セキュリティ上懸念されるのは

  • DNSスプーフィング攻撃
  • クロスディレクトリ攻撃

の2つっぽいです。

ログインと同時に

sessionStorage.setItem('user_id', 'xxxx');

みたいにすれば、ログイン後の画面でキー指定すれば取得できました。

sessionStorage.setItem('user_id');

こんな感じで判断できます。

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<title>サンプル</title>
</head>
<body>
  <script type="text/javascript">
    $(function() {
      if(sessionStorage.getItem('count')){
        alert('2回目以降のアクセスです');
        sessionStorage.setItem('count', 1);
      } else {
        alert('1回目のアクセスです');
        sessionStorage.setItem('count', 0);
      }
    });
  </script>
</body>
</html>

DEMO

ブラウザを閉じて、再度別タブのブラウザでアクセスすると削除されているのが確認できました。

W3Cサイト

コメント

タイトルとURLをコピーしました