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
Cookieとは?
Search
ufoo68
November 25, 2025
Programming
1
12
Cookieとは?
ufoo68
November 25, 2025
Tweet
Share
More Decks by ufoo68
See All by ufoo68
今更ながら、開発現場での生成AI活用について
ufoo68
0
41
28歳独身エンジニア 婚活してみた
ufoo68
0
5
OpenAIでクッキー型を作る
ufoo68
1
43
初めて開発リーダーをやってみた話
ufoo68
0
120
M5Stack用の指紋認証デバイスを試す
ufoo68
0
790
結婚式のクイズアプリを自作した話
ufoo68
0
640
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
690
KASHIKOIHAKO
ufoo68
0
590
LIFF通話をつくろう!
ufoo68
0
1.5k
Other Decks in Programming
See All in Programming
歴史から学ぶ「Why PHP?」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
seike460
PRO
0
170
Building AI with AI
inesmontani
PRO
1
260
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
moeka__c
5
2.3k
詳細の決定を遅らせつつ実装を早くする
shimabox
2
1.3k
Developing Specifications - Jakarta EE: a Real World Example
ivargrimstad
0
190
Promise.tryで実現する新しいエラーハンドリング New error handling with Promise try
bicstone
3
1.5k
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
agatan
7
9.4k
Atomics APIを知る / Understanding Atomics API
ssssota
1
210
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
ternbusty
7
1.7k
モビリティSaaSにおけるデータ利活用の発展
nealle
1
620
関数の挙動書き換える
takatofukui
4
750
Claude Code on the Web を超える!? Codex Cloud の実践テク5選
sunagaku
0
600
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
KATA
mclloyd
PRO
32
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Embracing the Ebb and Flow
colly
88
4.9k
Why Our Code Smells
bkeepers
PRO
340
57k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Transcript
Cookie🍪とは? ざっくりと学ぶWebの基礎
自己紹介 • 名前 ◦ 松永勇太(@ufoo_yuta) • 出身学科 ◦ 大阪工業大学ロボット工学科 •
職業 ◦ Webエンジニア • すきなこと ◦ シンプルなものづくり
今日のテーマ: Cookie🍪について
なぜこのテーマ? ここ数年、クッキーというワードを結構見ませんでしたか?
このLTが目指すところ ビジネス向けのネット記事よりは具体的だけど、 エンジニア向けの技術記事よりはライトな内容。 さらに詳しいことは各自調べてみて下さい
ざっくり基礎
これだけ覚えて帰って欲しい Cookieとは、 ブラウザのストレージ機能の一つ それ以上でも、 それ以下でもない!
ブラウザのストレージ機能 (本当はもう少し種類があるが)大きく3つくらいがメインで使われる • Cookie • LocalStorage • SessionStorage
ブラウザのストレージの基本1 ストレージは、ドメイン単位 で管理される。 この例だと、 https://xxx.google.com というURL内で有効
ブラウザのストレージの基本2 ストレージは、それぞれ有効期限 がある。 ストレージ 有効期限 Cookie 設定次第(最大400日ぐらい) LocalStorage 無期限と言われるが、最近は最大7日 SessionStorage
ブラウザを閉じるまで
ブラウザのストレージの基本3 ストレージは、JavaScriptを経由する。 ストレージ 書き込み方法 Cookie document.cookie = "hoge=fuga" LocalStorage localStorage.setItem("hoge",
"fuga") SessionStorage sessionStorage.setItem("hoge", "fuga")
その中でも Cookieが注目されやすい理由 問題なのは使われ方 • センシティブな情報が入りやすい ◦ 認証情報 ▪ トークン ◦
ユーザー行動 ▪ 買ったもの ▪ 住んでいるところ • サーバー通信に適している ◦ なぜ適しているかは次で説明する ◦ サーバーに送るためのユーザー情報が収集される
サーバー通信に適しているとは? 例えばLocalStorageの場合、 • HTTP通信でサーバーにデータを送る時は必ず値を明示する必要がある • 中身はスクリプトで自由に参照できるので攻撃の危険がある Cookieの場合、 • HTTP通信を呼び出したら自動でサーバーに送ってくれる •
設定次第でスクリプトからの参照をブロックできる
コード例を比較 LocalStorageの場合、
コード例を比較 Cookieの場合、 サーバーから Cookieを設定 JavaScriptでの明示は不要
少し踏み込んだ話
クッキーへの同意が最近増えた理由 簡単に一言でまとめると、 今まで勝手にやってたことが最近規制され始めた↓
サードパーティクッキーって何? ファーストパーティクッキーとは? • サイト自身が発行する Cookie サードパーティクッキーとは? • サイトとは別に発行された Cookie •
基本的にはiframeの技術を使用 ◦ サイト内に別のWEBを表示する仕組み ◦ WEB広告とか動画の埋め込みとか
安全なCookieとは? 以下の設定が有効化されているもの • Secure ◦ Https通信のみを制限 • HttpOnly ◦ JavaScriptからの参照ができない
• SameSite=Strict or Lax ◦ サードパーティクッキーの利用を制限
さいごに ブラウザはこの先、 「できること」 が増えていく。 その一方で、 「できたことへの制限」 も増えていく。 (Cookieへの規制もその例)