sessionとcookieが多分わかる資料Yoshiki Kobayashi2020/05/291
View Slide
この資料に書いてあること● sessionのきほん● cookieのきほん● それぞれの利用用途● 基本的な使い方2
この資料に書いてないこと● secureとか● CSRFとか● 細かいセキュリティとか● 上手な日本語3
sessionのきほんの前に…4
httpのステートレス通信について5
ステートレス通信って何6
通信元の情報がわからないそもそもhttpの通信は7
例僕の情報ください私の情報!僕の情報も!Aさん Bさん Cさん誰が誰かわかんないんだよなぁ…サーバ君8
sessionを利用することで…9
ステートフルに通信することができる10
例僕の情報ください私の情報!僕の情報も!Aさん Bさん Cさん識別子があるからどこからの通信かわかる〜サーバ君各自の識別子Aさん:aBさん:bCさん:c+Aさんの識別子[a] +Bさんの識別子[b]+Cさんの識別子[c]11
これがsessionの基本12
sessionは基本的にサーバ側で管理される13
でも、、、14
ユーザを判別する識別子はどこに保存するのDB?メモリ?それともファイル?15
再掲→これ僕の情報ください私の情報!僕の情報も!Aさん Bさん Cさん識別子があるからどこからの通信かわかる〜サーバ君各自の識別子Aさん:aBさん:bCさん:c+Aさんの識別子[a] +Bさんの識別子[b]+Cさんの識別子[c]16
ここからCookieの話の前に、、、17
ぶっちゃけCookieて何18
Cookieとはマジッククッキーの一種であり、RFC 6265などで定義されたHTTPにおけるウェブサーバとウェブブラウザ間で状態を管理する通信プロトコル、またそこで用いられるウェブブラウザに保存された情報のことを指す。by wikipedia19
は?20
ブラウザに好きなデータが保存して使えるよ!ってことつまり簡単に言うと21
制限は色々あるけどね22
Cookieを踏まえてsessionを考えてみると23
サーバで識別子を払い出して、ブラウザのCookieに保存しちゃえばいいんじゃね?24
具体例ログイン画面でログインしてくれ自分のログイン情報と一緒にログインするよID/PASSWORDAさんログイン成功や!Aさんの識別子発行するやで!token/abcdefgAさんはログイン中というステータスをサーバで管理返却されたtokenをAさんのブラウザCookieにセット25
具体例Aさん僕の情報ちょうだい!リクエスト+token/abcdefgCookieにセットされたtokenをリクエストに付与Aさんからの通信やな!Aさんの情報だけ返却するで!Aさんの情報を返却token情報からAさんのログイン状態を照合26
具体例(ログインしていない場合)Aさん僕の情報ちょうだい!リクエストのみだれからの通信かわからんな …ログインしてないようだ(例えば)ログイン画面を返却するなどtoken情報がなく誰からの通信かわからない27
ステートフル通信28
まとめると● Cookieとは、ブラウザが持っている好きなデータを貯められるストア● JavaScriptで設定することができる● サーバからのレスポンスで自動で設定することもできる● Sessionとは、サーバ側で保持しているデータ● ステートレスであるhttp通信をステートレスにするために用いられる(ことが多い)● SessionにはID(前述したToken)があり、ユーザのCookieで管理する方法、DBで管理する方法など様々ある29
実際にどんな感じで設定されるか見てみよう30
我らのRoomingログイン画面31
ログインすると・・・32
Cookieが設定されるここの[_app_session]っていうのが、Rails側で払い出されたsession_id※クッキー名[Rooming]はsession用のCookieでは無い33
コードで言うとこの部分sessionの中に[userId]っていうキーを持ち、user.idを代入してる34
Railsからのレスポンスを見てみようこれがsession_idHttpOnlyをつけてJSから抜き出せないようにしてるSet-Cookieっていうヘッダーがついたレスポンスが返却されると、自動でCookieが設定される35
JSでCookieを取得してみようHttpOnlyが付いていないCookieに関しては取得することができている36
ん?37
結局JSから操作できないんか?38
JSで取得できないならaxiosでどうやって送ったらええの?39
再掲Aさん僕の情報ちょうだい!リクエスト+token/abcdefgCookieにセットされたtokenをリクエストに付与Aさんからの通信やな!Aさんの情報だけ返却するで!Aさんの情報を返却token情報からAさんのログイン状態を照合40
これできなくね?41
一部の条件下であればできました42
コードで言うとこの部分オプションに[withCredentials]を付与。ヘッダーにAllow-Originを追加すると、自動でCookie内のsession_idが付与されてリクエストが送信される43
リクエストするときにCookieが設定されるヘッダーからマイページアイコンを押したときの処理(ユーザID取得関数)自動的にCookieがリクエストに付与されて、Rails側で処理されてる44
コードで言うとこの部分送られてきたCookieの中からsession_idをパースして、userIdの値からfind_by_idを実行している図45
以上が、サーバで発行したセッションIDがCookieに保存されて、クライアントからのリクエストにセッションIDが付与されるまでの仕組み46
注意Allow-Origin正しく設定しないとリクエストもレスポンスもCookieつかないよ!!!47
今日おぼえたこと!● Cookieとはなんぞや● Sessionとはなんぞや● ステートレス、ステートフルとはなんぞや● 結論どうやって使うんや48
終わり!!!!!!最後に好きな絵文字で終わりますTo Be Continued … ?49