Cookieとは？

Transcript

1. Cookie🍪とは？ ざっくりと学ぶWebの基礎
2. 自己紹介 • 名前 ◦ 松永勇太（@ufoo_yuta） • 出身学科 ◦ 大阪工業大学ロボット工学科 • 職業 ◦ Webエンジニア • すきなこと ◦ シンプルなものづくり
3. 今日のテーマ： Cookie🍪について
4. なぜこのテーマ？ ここ数年、クッキーというワードを結構見ませんでしたか？
5. このLTが目指すところ ビジネス向けのネット記事よりは具体的だけど、 エンジニア向けの技術記事よりはライトな内容。 さらに詳しいことは各自調べてみて下さい
6. ざっくり基礎
7. これだけ覚えて帰って欲しい Cookieとは、 ブラウザのストレージ機能の一つ それ以上でも、 それ以下でもない！
8. ブラウザのストレージ機能 (本当はもう少し種類があるが)大きく３つくらいがメインで使われる • Cookie • LocalStorage • SessionStorage
9. ブラウザのストレージの基本１ ストレージは、ドメイン単位 で管理される。 この例だと、 https://xxx.google.com というURL内で有効
10. ブラウザのストレージの基本２ ストレージは、それぞれ有効期限 がある。 ストレージ 有効期限 Cookie 設定次第（最大４００日ぐらい） LocalStorage 無期限と言われるが、最近は最大７日 SessionStorage ブラウザを閉じるまで
11. ブラウザのストレージの基本３ ストレージは、JavaScriptを経由する。 ストレージ 書き込み方法 Cookie document.cookie = "hoge=fuga" LocalStorage localStorage.setItem("hoge", "fuga") SessionStorage sessionStorage.setItem("hoge", "fuga")
12. その中でも Cookieが注目されやすい理由 問題なのは使われ方 • センシティブな情報が入りやすい ◦ 認証情報 ▪ トークン ◦ ユーザー行動 ▪ 買ったもの ▪ 住んでいるところ • サーバー通信に適している ◦ なぜ適しているかは次で説明する ◦ サーバーに送るためのユーザー情報が収集される
13. サーバー通信に適しているとは？ 例えばLocalStorageの場合、 • HTTP通信でサーバーにデータを送る時は必ず値を明示する必要がある • 中身はスクリプトで自由に参照できるので攻撃の危険がある Cookieの場合、 • HTTP通信を呼び出したら自動でサーバーに送ってくれる • 設定次第でスクリプトからの参照をブロックできる
14. コード例を比較 LocalStorageの場合、
15. コード例を比較 Cookieの場合、 サーバーから Cookieを設定 JavaScriptでの明示は不要
16. 少し踏み込んだ話
17. クッキーへの同意が最近増えた理由 簡単に一言でまとめると、 今まで勝手にやってたことが最近規制され始めた↓
18. サードパーティクッキーって何？ ファーストパーティクッキーとは？ • サイト自身が発行する Cookie サードパーティクッキーとは？ • サイトとは別に発行された Cookie • 基本的にはiframeの技術を使用 ◦ サイト内に別のWEBを表示する仕組み ◦ WEB広告とか動画の埋め込みとか
19. 安全なCookieとは？ 以下の設定が有効化されているもの • Secure ◦ Https通信のみを制限 • HttpOnly ◦ JavaScriptからの参照ができない • SameSite=Strict or Lax ◦ サードパーティクッキーの利用を制限
20. さいごに ブラウザはこの先、 「できること」 が増えていく。 その一方で、 「できたことへの制限」 も増えていく。 （Cookieへの規制もその例）