Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
sessionとcookieが多分わかる資料
Search
Yoshiki Kobayashi
May 29, 2020
Programming
11
12k
sessionとcookieが多分わかる資料
Yoshiki Kobayashi
May 29, 2020
Tweet
Share
More Decks by Yoshiki Kobayashi
See All by Yoshiki Kobayashi
エンジニアとして生きていくために在学中に多分やっておいた方が良いこと
yoshi0202
1
400
ターミナル操作が多分早くなるtmuxのすゝめ
yoshi0202
0
500
サーバレスアーキテクチャでLINE BOTが多分作れるようになるハンズオン
yoshi0202
0
860
サーバ構築の勘所が多分わかるハンズオン
yoshi0202
0
340
Dockerのことが多分わかるハンズオン
yoshi0202
38
16k
Other Decks in Programming
See All in Programming
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
1.9k
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
1.9k
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
php-conference-japan-2024
tasuku43
0
430
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
2.8k
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
200
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
950
return文におけるstd::moveについて
onihusube
1
1.4k
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
550
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
130
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Practical Orchestrator
shlominoach
186
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Automating Front-end Workflow
addyosmani
1366
200k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Gamification - CAS2011
davidbonilla
80
5.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
BBQ
matthewcrist
85
9.4k
Transcript
sessionとcookieが 多分わかる資料 Yoshiki Kobayashi 2020/05/29 1
この資料に書いてあること • sessionのきほん • cookieのきほん • それぞれの利用用途 • 基本的な使い方 2
この資料に書いてないこと • secureとか • CSRFとか • 細かいセキュリティとか • 上手な日本語 3
sessionのきほん の前に… 4
httpの ステートレス通信 について 5
ステートレス通信 って何 6
通信元の情報が わからない そもそもhttpの通信は 7
例 僕の情報ください 私の情報! 僕の情報も! Aさん Bさん Cさん 誰が誰か わかんないんだよ なぁ…
サーバ君 8
sessionを 利用することで… 9
ステートフルに 通信することができる 10
例 僕の情報ください 私の情報! 僕の情報も! Aさん Bさん Cさん 識別子があるから どこからの通信か わかる〜
サーバ君 各自の識別子 Aさん:a Bさん:b Cさん:c +Aさんの識別子 [a] +Bさんの識別子 [b] +Cさんの識別子 [c] 11
これが sessionの基本 12
sessionは基本的に サーバ側で管理される 13
でも、、、 14
ユーザを判別する 識別子は どこに保存するの DB?メモリ? それともファイル? 15
再掲 →これ 僕の情報ください 私の情報! 僕の情報も! Aさん Bさん Cさん 識別子があるから どこからの通信か
わかる〜 サーバ君 各自の識別子 Aさん:a Bさん:b Cさん:c +Aさんの識別子 [a] +Bさんの識別子 [b] +Cさんの識別子 [c] 16
ここからCookieの話 の前に、、、 17
ぶっちゃけ Cookieて何 18
Cookieとは マジッククッキーの一種であり、RFC 6265な どで定義されたHTTPにおけるウェブサーバ とウェブブラウザ間で状態を管理する通信プ ロトコル、またそこで用いられるウェブブラウ ザに保存された情報のことを指す。 by wikipedia 19
は? 20
ブラウザに 好きなデータが 保存して使えるよ! ってこと つまり簡単に言うと 21
制限は色々あるけどね 22
Cookieを踏まえて sessionを考えてみると 23
サーバで識別子を払い 出して、ブラウザの Cookieに保存しちゃえ ばいいんじゃね? 24
具体例 ログイン画面で ログインしてくれ 自分のログイン情報と一緒 にログインするよ ID/PASSWORD Aさん ログイン成功や! Aさんの識別子発行するやで! token/abcdefg
Aさんはログイン中 というステータスを サーバで管理 返却されたtokenを Aさんのブラウザ Cookieにセット 25
具体例 Aさん 僕の情報ちょうだい! リクエスト+token/abcdefg Cookieにセットさ れた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_id HttpOnlyをつけて JSから抜き出せないよ うにしてる Set-Cookieっていうヘッ ダーがついたレスポン スが返却されると、自動 でCookieが設定される 35
JSでCookieを取得してみよう HttpOnlyが付いていないCookieに関しては 取得することができている 36
ん? 37
結局JSから 操作できないんか? 38
JSで取得できないなら axiosでどうやって 送ったらええの? 39
再掲 Aさん 僕の情報ちょうだい! リクエスト+token/abcdefg Cookieにセットさ れた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