cookieについて調べてみた

ハム研🐹 第1会 LT会

Transcript

1. Cookie について調べてみた もっくん 1
2. 導入 現在卒研で next+supabase で認証を実装していて、 その中で Cookie をﾁｮｯﾄ理解する必要があったので、自分なりに調べてまとめてみまし た。 今回の LT を通して ↓ みたいなやつはどうすればいいのか がわかるようになります！ 2
3. Cookie の役割 簡単に言うと、ウェブサイトを閲覧する際に、 サイト側がユーザーのブラウザに情報を書き込むためのデータファイルのこと 3
4. Cookie は何のために使うの？ Web サイトがユーザーの訪問履歴や設定などを記録し、次回訪問時に同じユーザ ーであることを識別できるようにするため 使用例 セッション管理: ユーザーのログイン状態、ショッピングカート、ゲームのスコ ア、またはその他のユーザーセッションに関するサーバーが覚えておくべきその他 のもの パーソナライズ: 表示言語や UI テーマのようなユーザー設定 トラッキング: ユーザーの行動の記録および分析 4
5. Cookie の仕組み 引用: https://www.sedesign.co.jp/marketing-blog/what-is-cookie 5
6. Cookie の種類 cookie の種類は 2 つに分けられる 1st party cookie 3rd party cookie それぞれの特徴は次の通り 6
7. Cookie の種類：1st party cookie その Web サイトだけで使われる Cookie 例えるなら… 「お店独自のポイントカード」 （その店でしか使えない） 、お店が自由に情報を読み書きできる ユーザーの許可なしで使用 OK (ポップアップを出さなくても良い) EU では 法律違反になるみたい 7
8. Cookie の種類：3rd party cookie 複数の Web サイトをわたって使える Cookie 例えるなら… T ポイントカード どのお店でも自由に読み書きできる 日本でも「Cookie を許可しますか？」の表示が必要 許可なしの利用は禁止 主にインターネット広告で使われている 沖縄旅行について調べていると、広告が沖縄旅行だらけになるアレ 8
9. ログイン情報と Cookie ウェブサイトのログイン状態を維持するために Cookie がよく使われる 一度ログインすると、次回アクセス時にもログイン状態が続いているのは Cookie のお かげ 9
10. Cookie の有効期限 セッション Cookie 有効期限が設定されていない場合 ブラウザを閉じると削除される 一時的なセッション管理によく使われます 永続 Cookie 有効期限が設定されている場合 その期限までブラウザに保存される ログイン状態の維持や、ユーザー設定の記憶などに使われます 10
11. Cookie と LocalStorage の違い Cookie LocalStorage 保存容量 約 4KB 2MB 以上 サーバへの通信 毎リクエスト送信 送信しない 期限 任意で設定可能 半永久的 Cookie は主にサーバーとのやりとりや認証情報の保持に使われる。 LocalStorage は大容量のデータをクライアント側だけで保持したいときに便利。 用途やセキュリティ要件に応じて使い分けよう！ 11
12. まとめ Cookie は Web サイトがユーザーの情報をブラウザに保存する仕組み ユーザー識別のために使われる ファーストパーティとサードパーティの 2 種類がある ログイン情報の保持など、Web 体験を便利にするために不可欠！ 12
13. Q. 結局これはどうすればいいの...？ A. 何も考えずに許可！しておけば、おｋ でも... 自分の個人情報を抜かれてやな気持ちになるって人は拒否！ 興味のない広告を減らし、自分が本当に欲しいものをレコメンドしてくれるような広 告を表示したい場合は、クッキーの許可は有効にしておきましょう！ ご清聴ありがとうございました！ 13
14. 参考 https://youtu.be/QOb1SWOvbu4?si=D3uJ08_qSyQXFahL https://qiita.com/nanamihirooka/items/8cea5c5d40e1474b844f https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/Cookies https://www.sedesign.co.jp/marketing-blog/what-is-cookie 14