コンテンツにスキップ

認証アーティファクトの保管＠認証アーティファクトによる分類

01. ブラウザの SessionStorage

ブラウザの SessionStorage とは

ブラウザのストレージ機能であり、ブラウザを閉じると削除される。


セッション ID の保存

フロントエンドアーキテクチャが CSR の場合に採用できる。

SSR のアプリケーションはブラウザを操作できないため、ブラウザの LocalStorage を SSR のアプリケーションに渡せない。

セッション ID で認証アーティファクトを運搬した場合、初回認証以降に、認証の成功状態を維持する必要がある。

ブラウザは、SessionStorage にセッション ID を保管する。

ブラウザを閉じると、ブラウザは SessionStorage のセッション ID を破棄し、認証はやり直しになる。

<!-- string型で値を設定する必要がある -->
<script>
  window.sessionStorage.setItem("session_id", "*****");
</script>

<script>
  const access_token = window.sessionStorage.getItem("session_id");
  const header = new Headers();
  header.set("Cookie", "session_id");
</script>

<script>
  window.sessionStorage.removeItem("session_id");
</script>

<script>
  window.sessionStorage.clear();
</script>


場所

＊例＊

ローカルマシンが MacOS であれば、Chrome は ~/Library/Application Support/Google/Chrome/<Profile>/Local Storage/ ディレクトリに保管する。


02. ブラウザの LocalStorage

ブラウザの LocalStorage とは

ブラウザのストレージ機能であり、明示的に削除しない限りは保存し続ける。


トークンの保存

フロントエンドアーキテクチャが CSR の場合に採用できる。

CSR のアプリケーションはブラウザを操作できるため、ブラウザの LocalStorage にアクセストークンを保存できる。

一方で、SSR のアプリケーションはこれを操作できないため、ブラウザの LocalStorage にアクセストークンを保存できない。

アクセストークンを運搬した場合、初回認証以降に、認証の成功状態を維持する必要がある。

ブラウザは、LocalStorage にアクセストークンを保管する。

ブラウザを閉じても、ブラウザは LocalStorage のアクセストークンを破棄せず、認証の成功状態を維持できる。

LocalStorage は SessionStorage と比べて保管期間が長いため、XSS の危険性がより高い。

<script>
  window.localStorage.setItem("access_token", "*****");
</script>

<script>
  const access_token = window.localStorage.getItem("access_token");
  const header = new Headers();
  header.set("Authorization", "Bearer " + access_token);
</script>

<script>
  window.localStorage.removeItem("access_token");
</script>

<script>
  window.localStorage.clear();
</script>


認証後の閲覧履歴の保存

閲覧した情報を LocalStorage に保存しておく。

次回のログイン時に、最近閲覧した情報として表示する。


場所

＊例＊

ローカルマシンが MacOS であれば、Chrome は ~/Library/Application Support/Google/Chrome/<Profile>/Local Storage/ ディレクトリに保管する。


ブラウザのストレージ機能であり、明示的に削除しない限りは保存し続ける。


トークンの保存

フロントエンドアプリケーションが CSR または SSR の場合に採用できる。

CSR または SSR のアプリケーションは、Cookie ヘッダーを介してブラウザの Cookie にアクセストークンを保存できる。

トークン (例：アクセストークン、ID トークンなど) で認証アーティファクトを運搬した場合、初回認証以降に、認証の成功状態を維持する必要がある。

ブラウザは、Cookie にアクセストークンを保管する。

ブラウザを閉じても、ブラウザは Cookie のアクセストークンを破棄せず、認証の成功状態を維持できる。

▼ 場所

＊例＊

クライアント PC が MacOS であれば、Chrome は /Users/<ユーザー名>/Library/Application Support/Google/Chrome/Default/Cookies ディレクトリに Cookie ヘッダーの値を保管する。


04. サーバー側のアプリケーションのセッション

フロントエンドアプリケーションが SSR の場合に採用できる。

アプリケーションのセッションファイル上で管理する。


05. サーバー側のセッションストレージツール (例：Redis)

フロントエンドアプリケーションが SSR の場合に採用できる。