認証アーティファクトの保管＠認証アーティファクトによる分類¶
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>
- https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage#%E4%BE%8B
- https://zenn.dev/simsim/articles/3f3e043dd750e8
- https://magazine.techacademy.jp/magazine/32870
- https://mizumotok.hatenablog.jp/entry/2021/08/04/114431#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%A7%E3%81%8D%E3%82%8B%E5%A0%B4%E6%89%80
場所¶
＊例＊
ローカルマシンが 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 に保存しておく。
次回のログイン時に、最近閲覧した情報として表示する。
場所¶
- https://developer.chrome.com/docs/devtools/storage/localstorage/
- https://zenn.dev/simsim/articles/3f3e043dd750e8
- https://magazine.techacademy.jp/magazine/32870
- https://mizumotok.hatenablog.jp/entry/2021/08/04/114431#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%A7%E3%81%8D%E3%82%8B%E5%A0%B4%E6%89%80
＊例＊
ローカルマシンが MacOS であれば、Chrome は ~/Library/Application Support/Google/Chrome/<Profile>/Local Storage/ ディレクトリに保管する。
03. ブラウザのCookie¶
ブラウザのCookieとは¶
ブラウザのストレージ機能であり、明示的に削除しない限りは保存し続ける。
トークンの保存¶
フロントエンドアプリケーションが 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 の場合に採用できる。