【20221015 Zli 大LT】SPAのセッション管理ってどうすればいいの

2022年10月15日のZli大LTで発表したスライド

Transcript

1. SPAのセッション管理って どうすればいいの？ 会津大学 学部1年　kashu
2. 自己紹介 名前: 粕谷 俊介 (kashu, かしゅー, かーしゅ, かしゅ etc..) s1300071 (学部1年) Zli所属 (REMsも所属?) Node.jsをやってきた。 インフラにも興味がある。自宅サーバー最高！ GoとReactをやらなければならない。 なにもできません！教えてください！ @kasukashu02 2
3. 目次 1. なんでこの話をするの 2-1. セッション認証とトークン認証 - セッション認証 2-2. セッション認証とトークン認証 - トークン認証 3-1. CookieとWeb Storage - Cookie 3-2. CookieとWeb Storage - Web Storage 4. つまりどうすればいいの 3
4. 1. なんでこの話をするの？ ハッカソンでWebアプリを制作(中) →SPAでセッション情報ってどうやって持つのがいいんやろ 4
5. 2-1. セッション認証とトークン認証 セッション認証 - SessionIDをサーバー側で発行して、 SessionIDとユーザ情報を紐づけたデータを DBに保存 - ブラウザ側でSessionIDを保存 特徴 ・一番よく見る　　・ステートフル デメリット ・いちいちDBにアクセス ・インメモリデータベースを使うと、スケールが大変 メリット ・サーバー側でログアウトができる 5
6. 2-2. セッション認証とトークン認証 トークン認証 - ユーザー情報が含む暗号化されたトークンを サーバー側で発行 - ブラウザ側でTokenを保存 - リクエスト毎にデコードする 特徴 ・ステートレス　・JWT(JSON Web Token)が多く用いられる デメリット ・不正アクセスがあってもサーバー側でログアウトできない ・リクエストが重くなる メリット ・サーバー側でログイン状態を持つ必要がない 6
7. 3-1. CookieとWeb Storage Cookie 7 - key-value形式で保存 - Set-Cookieヘッダを受け取り、ブラウ ザにCookieを設定 - Set-Cookieヘッダを返したドメインの み、Cookieを送信 属性 Path: 指定したパスが含まれている場合にのみ送信 Domain: 指定した場合、サブドメインを含む Expires: Cookieの有効期限(時刻指定) Max-Age: Cookieの有効期限(経過時間指定) Secure: HTTPSの場合のみCookieを送信 SameSite: CSRF対策に有効 HttpOnly: JavaScriptでアクセスできない(XSS対策に有効) (基本的に)CSRFトークンの実装が必要 !
8. 3-2. CookieとWeb Storage Web Storage 8 - (Cookieと比べれば)最近できた - sessionStorageとlocalStorageがある。 - 同一オリジンの場合にのみアクセス可能 - Cookieよりも容量が大きい - JavaScriptからアクセス可能←XSSの可能性! - 指定しなければ勝手に送信されない ←CSRFの可能性はない Web Storage XSS対策をする必要がある→めんどくさすぎ(というか無理なのでは)
9. 4. つまりどうすればいいの SPAとAPIが同一オリジンの場合 - CookieのSameSite属性をつけて、セッション認証 - CookieのSameSite属性をつけて、トークン認証 (ただし、サーバーサイドから任意のタイミングでログアウトできない ) SPAとAPIが別オリジンの場合 - Cookieでセッション認証。CSRFトークンも必要 - Cookieでトークン認証。CSRFトークンも必要 (ただし、サーバーサイドから任意のタイミングでログアウトできない && CSRFトークンをJWTの中に暗号化して保存する必要 ∵JWTのPayloadは確認できる) 9
10. ご静聴ありがとうございました! 10