Upgrade to Pro — share decks privately, control downloads, hide ads and more …

sessionとcookieが多分わかる資料

 sessionとcookieが多分わかる資料

Yoshiki Kobayashi

May 29, 2020
Tweet

More Decks by Yoshiki Kobayashi

Other Decks in Programming

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