sessionとcookieが多分わかる資料

Transcript

1. sessionとcookieが
   多分わかる資料
   Yoshiki Kobayashi
   2020/05/29
   1
   

   View Slide

2. この資料に書いてあること
   ● sessionのきほん
   ● cookieのきほん
   ● それぞれの利用用途
   ● 基本的な使い方
   2
   

   View Slide

3. この資料に書いてないこと
   ● secureとか
   ● CSRFとか
   ● 細かいセキュリティとか
   ● 上手な日本語
   3
   

   View Slide

4. sessionのきほん
   の前に…
   4
   

   View Slide

5. httpの
   ステートレス通信
   について
   5
   

   View Slide

6. ステートレス通信
   って何
   6
   

   View Slide

7. 通信元の情報が
   わからない
   そもそもhttpの通信は
   7
   

   View Slide

8. 例
   僕の情報ください
   私の情報！
   僕の情報も！
   Aさん Bさん Cさん
   誰が誰か
   わかんないんだよ
   なぁ…
   サーバ君
   8
   

   View Slide

9. sessionを
   利用することで…
   9
   

   View Slide

10. ステートフルに
    通信することができる
    10
    

    View Slide

11. 例
    僕の情報ください
    私の情報！
    僕の情報も！
    Aさん Bさん Cさん
    識別子があるから
    どこからの通信か
    わかる〜
    サーバ君
    各自の識別子
    Aさん：a
    Bさん：b
    Cさん：c
    +Aさんの識別子
    [a] +Bさんの識別子
    [b]
    +Cさんの識別子
    [c]
    11
    

    View Slide

12. これが
    sessionの基本
    12
    

    View Slide

13. sessionは基本的に
    サーバ側で管理される
    13
    

    View Slide

14. でも、、、
    14
    

    View Slide

15. ユーザを判別する
    識別子は
    どこに保存するの
    DB?メモリ?
    それともファイル？
    15
    

    View Slide

16. 再掲
    →これ
    僕の情報ください
    私の情報！
    僕の情報も！
    Aさん Bさん Cさん
    識別子があるから
    どこからの通信か
    わかる〜
    サーバ君
    各自の識別子
    Aさん：a
    Bさん：b
    Cさん：c
    +Aさんの識別子
    [a] +Bさんの識別子
    [b]
    +Cさんの識別子
    [c]
    16
    

    View Slide

17. ここからCookieの話
    の前に、、、
    17
    

    View Slide

18. ぶっちゃけ
    Cookieて何
    18
    

    View Slide

19. Cookieとは
    マジッククッキーの一種であり、RFC 6265な
    どで定義されたHTTPにおけるウェブサーバ
    とウェブブラウザ間で状態を管理する通信プ
    ロトコル、またそこで用いられるウェブブラウ
    ザに保存された情報のことを指す。
    by wikipedia
    19
    

    View Slide

20. は？
    20
    

    View Slide

21. ブラウザに
    好きなデータが
    保存して使えるよ！
    ってこと
    つまり簡単に言うと
    21
    

    View Slide

22. 制限は色々あるけどね
    22
    

    View Slide

23. Cookieを踏まえて
    sessionを考えてみると
    23
    

    View Slide

24. サーバで識別子を払い
    出して、ブラウザの
    Cookieに保存しちゃえ
    ばいいんじゃね？
    24
    

    View Slide

25. 具体例
    ログイン画面で
    ログインしてくれ
    自分のログイン情報と一緒
    にログインするよ
    ID/PASSWORD
    Aさん
    ログイン成功や！
    Aさんの識別子発行するやで！
    token/abcdefg
    Aさんはログイン中
    というステータスを
    サーバで管理
    返却されたtokenを
    Aさんのブラウザ
    Cookieにセット
    25
    

    View Slide

26. 具体例
    Aさん
    僕の情報ちょうだい！
    リクエスト+token/abcdefg
    Cookieにセットさ
    れたtokenをリクエ
    ストに付与
    Aさんからの通信やな！
    Aさんの情報だけ返却するで！
    Aさんの情報を返却
    token情報からAさ
    んのログイン状態
    を照合
    26
    

    View Slide

27. 具体例(ログインしていない場合)
    Aさん
    僕の情報ちょうだい！
    リクエストのみ
    だれからの通信かわからんな …
    ログインしてないようだ
    (例えば)ログイン画面を返却するなど
    token情報がなく誰
    からの通信か
    わからない
    27
    

    View Slide

28. ステートフル通信
    28
    

    View Slide

29. まとめると
    ● Cookieとは、ブラウザが持っている好きなデータを貯められるストア
    ● JavaScriptで設定することができる
    ● サーバからのレスポンスで自動で設定することもできる
    ● Sessionとは、サーバ側で保持しているデータ
    ● ステートレスであるhttp通信をステートレスにするために用いられる
    (ことが多い)
    ● SessionにはID(前述したToken)があり、ユーザのCookieで管理する方法、
    DBで管理する方法など様々ある
    29
    

    View Slide

30. 実際に
    どんな感じで設定されるか
    見てみよう
    30
    

    View Slide

31. 我らのRoomingログイン画面
    31
    

    View Slide

32. ログインすると・・・
    32
    

    View Slide

33. Cookieが設定される
    ここの[_app_session]っていうのが、Rails側で払い出されたsession_id
    ※クッキー名[Rooming]はsession用のCookieでは無い
    33
    

    View Slide

34. コードで言うとこの部分
    sessionの中に[userId]っていうキーを持ち、
    user.idを代入してる
    34
    

    View Slide

35. Railsからのレスポンスを見てみよう
    これがsession_id
    HttpOnlyをつけて
    JSから抜き出せないよ
    うにしてる
    Set-Cookieっていうヘッ
    ダーがついたレスポン
    スが返却されると、自動
    でCookieが設定される
    35
    

    View Slide

36. JSでCookieを取得してみよう
    HttpOnlyが付いていないCookieに関しては
    取得することができている
    36
    

    View Slide

37. ん？
    37
    

    View Slide

38. 結局JSから
    操作できないんか？
    38
    

    View Slide

39. JSで取得できないなら
    axiosでどうやって
    送ったらええの？
    39
    

    View Slide

40. 再掲
    Aさん
    僕の情報ちょうだい！
    リクエスト+token/abcdefg
    Cookieにセットさ
    れたtokenをリクエ
    ストに付与
    Aさんからの通信やな！
    Aさんの情報だけ返却するで！
    Aさんの情報を返却
    token情報からAさ
    んのログイン状態
    を照合
    40
    

    View Slide

41. これできなくね？
    41
    

    View Slide

42. 一部の条件下であれば
    できました
    42
    

    View Slide

43. コードで言うとこの部分
    オプションに[withCredentials]を付与。ヘッダーにAllow-Originを追加
    すると、自動でCookie内のsession_idが付与されてリクエストが送信される
    43
    

    View Slide

44. リクエストするときにCookieが設定される
    ヘッダーからマイページアイコンを押したときの処理(ユーザID取得関数)
    自動的にCookieがリクエストに付与されて、Rails側で処理されてる
    44
    

    View Slide

45. コードで言うとこの部分
    送られてきたCookieの中からsession_idをパースして、
    userIdの値からfind_by_idを実行している図
    45
    

    View Slide

46. 以上が、
    サーバで発行したセッションIDがCookieに
    保存されて、
    クライアントからのリクエストにセッションID
    が付与されるまでの仕組み
    46
    

    View Slide

47. 注意
    Allow-Origin正しく設定
    しないとリクエストもレス
    ポンスもCookieつかな
    いよ！！！
    47
    

    View Slide

48. 今日おぼえたこと！
    ● Cookieとはなんぞや
    ● Sessionとはなんぞや
    ● ステートレス、ステートフルとはなんぞや
    ● 結論どうやって使うんや
    48
    

    View Slide

49. 終わり！！！！！！
    最後に好きな絵文字で終わります
    
    To Be Continued … ?
    49
    

    View Slide