sessionとcookieが多分わかる資料

by Yoshiki Kobayashi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

sessionのきほんの前に… 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

sessionを利用することで… 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

これが sessionの基本 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

でも、、、 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ぶっちゃけ Cookieて何 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

は？ 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

制限は色々あるけどね 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ステートフル通信 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

我らのRoomingログイン画面 31

Slide 32

Slide 32 text

ログインすると・・・ 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ん？ 37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

これできなくね？ 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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