Cookie 入門、Cookieとは？、設定、危険性、js-cookieなども解説｜JavaScript入門（17）

JavaScript
2021.08.20
この記事は約20分で読めます。

Cookie 入門、Cookieとは？、設定、危険性、js-cookieなども解説｜JavaScript入門（17）のPodcast

下記のPodcastは、Geminiで作成しました。

Spotify
open.spotify.com

はじめに

ウェブサイトを閲覧している際、以前ログインしたサイトに再びアクセスするとログイン状態が維持されていたり、ショッピングサイトのカートに入れた商品が数日後も残っていたりすることがあります。これらの便利な機能を実現している技術の核心が「Cookie（クッキー）」です。現代のウェブ開発において、Cookieはユーザー体験の向上に不可欠な役割を果たす一方で、プライバシー保護の観点からその取り扱いや法規制は年々厳格化しています 。本稿では、JavaScript入門講座の第17弾として、Cookieの基本概念から最新の技術動向、ブラウザの設定方法、セキュリティ上のリスク、そして実務で多用されるライブラリ「js-cookie」の使い方までを詳細に解説します。2026年現在の最新情報を踏まえ、初心者の皆様にも分かりやすく丁寧に紐解いていきます 。

Cookieの基礎知識

Cookieとは何か

Cookie（HTTP Cookie）とは、ウェブサーバーとユーザーのブラウザ（クライアント）との間で情報をやり取りし、ユーザーの端末に一時的に保存されるテキスト形式の小さなデータファイルのことです 。本来、ウェブの基盤となる HTTP プロトコルは「ステートレス（状態を持たない）」という特性を持っており、一回ごとの通信は独立しています。そのため、サーバーは「先ほどアクセスしてきたユーザーと、今アクセスしてきたユーザーが同じ人物であるか」を判別することができません。Cookieはこの「状態」を保持するために開発されました 。サーバーはレスポンスヘッダーに Set-Cookie を含めることで、ブラウザにデータを保存させることができます。ブラウザはそれ以降、そのサーバーにリクエストを送るたびに保存されたCookieを自動的に送信します。これにより、サーバーは特定のユーザーを識別し、パーソナライズされたサービスを提供することが可能になります 。

Cookieの主な利用目的

Cookieは主に以下の3つの目的で利用されます 。

カテゴリ具体的な用途詳細
セッション管理ログイン状態の維持、ショッピングカートユーザーがページを移動しても「ログイン中であること」や「カートの中身」を保持します 。
パーソナライズユーザー設定（言語、テーマなど）ユーザーが選択した表示言語やダークモードの設定などを記憶し、再訪時に反映させます 。
トラッキング広告配信、アクセス解析複数のサイトを跨いだ行動を記録し、興味関心に合わせた広告を表示したり、サイトの改善に役立てたりします 。

Cookieの種類：発行元による分類

Cookieはその発行元によって、大きく二つに分類されます 。

ファーストパーティCookie: ユーザーが現在訪問しているドメイン（アドレスバーに表示されているドメイン）から直接発行されるCookieです。主にそのサイト内での利便性のために使用され、ブラウザの設定でブロックされることは比較的少ない傾向にあります 。

サードパーティCookie: 訪問しているサイト以外のドメイン（広告配信サーバーやSNSの共有ボタンなど）から発行されるCookieです。ドメインを横断したユーザーの追跡（トラッキング）を可能にするため、近年のプライバシー保護の潮流により、多くのブラウザで制限や廃止の対象となっています 。

ブラウザにおけるCookieの設定と管理

Cookieが正常に動作するためには、ブラウザ側でその受け入れが有効になっている必要があります。一方で、セキュリティの観点から、不要なCookieを削除したりブロックしたりする方法を知っておくことも重要です 。

Google Chrome での設定（デスクトップ・Android共通）

Google Chromeでは、プライバシーサンドボックスの導入が進んでおり、Cookieの設定画面も進化しています 。

設定手順:

1. ブラウザ右上のメニュー（三点リーダー）から「設定」を選択します 。

2. 「プライバシーとセキュリティ」から「サードパーティ Cookie」をクリックします 。

3. 以下の3つの選択肢から適切なものを選択します 。

サードパーティの Cookie を許可する: すべてのCookieを受け入れます。

シークレット モードでサードパーティ Cookie をブロックする: プライベート閲覧時のみ制限します。

サードパーティ Cookie をブロックする: 最も制限が強い状態です。一部のウェブサイトの機能が正常に動作しなくなる可能性があります 。

例外の設定: 特定のサイトでのみCookieを許可したい場合は、「サイトの設定」の例外リストからウェブアドレスを追加することで個別に管理できます 。

iPhone (Safari) での設定

iPhoneのSafariでは、プライバシー保護機能が非常に強力であり、デフォルトでサードパーティCookieの多くが制限されています 。

設定の確認と変更:

1. ホーム画面から「設定」アプリを開きます 。

2. 「アプリ」一覧の中から「Safari」を選択します 。

3. 最下部にある「詳細」をタップします 。

4. 「すべてのCookieをブロック」のスイッチを確認します 。

オフ（グレー）: 通常はこの設定で使用します。サイトのログイン機能などが動作します 。

オン（緑）: すべてのCookieが拒否され、多くのウェブサービスが利用できなくなります 。

サイト越えトラッキングを防ぐ: 「プライバシーとセキュリティ」セクションにあるこの機能（ITP）がオンになっていると、サードパーティCookieによる追跡が自動的に遮断されます 。

Cookieの危険性とセキュリティ対策

Cookieは利便性をもたらす一方で、重要な情報（セッションIDなど）を含むため、適切に管理しなければ大きなリスクとなります 。

想定される主なリスク

情報の窃取と不正ログイン: 共用パソコンなどでCookieが残ったままになると、次にその端末を使った他人が本人になりすましてサービスにアクセスできてしまう可能性があります。これを「セッションハイジャック」と呼びます 。

クロスサイトスクリプティング (XSS): サイトの脆弱性を悪用した攻撃者が、JavaScriptを通じてユーザーのCookieを盗み出す攻撃です。これを防ぐには、後述する HttpOnly 属性の設定が不可欠です 。

クロスサイトリクエストフォージェリ (CSRF): ユーザーが意図しない操作を、保存されているCookieを利用して強制的に実行させる攻撃です。現代のブラウザでは SameSite 属性によってこのリスクが軽減されています 。

情報を守るための削除手順

セキュリティを維持するため、定期的なCookieの削除や、共用端末利用後のデータ消去を推奨します。

Google Chrome: 「履歴」メニューから「閲覧履歴データの削除」を選択し、「Cookieと他のサイトデータ」にチェックを入れて消去を実行します 。

iPhone (Safari): 「設定」→「Safari」→「履歴とWebサイトデータを消去」から、期間を指定して削除できます 。

2026年現在の法規制とプライバシー環境

Cookieを取り巻く法的状況は、世界的に厳格化の一途を辿っています 。

日本の改正個人情報保護法と電気通信事業法

日本では、2022年4月施行の改正個人情報保護法により「個人関連情報」という枠組みが新設されました 。Cookieデータ自体は単体では個人を特定できませんが、提供先で他のデータと紐付けて個人を識別できる場合、提供元は「本人の同意」を確認しなければなりません 。

また、2023年6月施行の改正電気通信事業法では、いわゆる「外部送信規律」が導入されました 。ウェブサイトやアプリが利用者の情報を外部のサーバー（広告タグやアクセス解析ツールなど）に送信する場合、以下のいずれかの対応が義務付けられています 。

1. 送信先や利用目的の「通知」または「公表」

2. 事前の「同意取得（オプトイン）」

3. 「拒否機会の提供（オプトアウト）」

これに伴い、多くのウェブサイトで「Cookieの使用に関する同意」を求めるポップアップ（CMP: 同意管理プラットフォーム）が表示されるようになっています 。

ブラウザ各社の対応状況

ブラウザサードパーティCookieへの対応状況
Safari以前からITP機能により全面的にブロック済み 。
Firefox標準設定でトラッカーのCookieを強力にブロック 。
Google Chrome2024年7月、全面廃止方針を撤回。代わりに「ユーザーに選択肢を提供する新しい機能」の搭載を検討中 。
Microsoft Edge追跡防止機能を搭載し、段階的な規制を進めている 。

JavaScriptによるCookieの書き込みと読み込み

JavaScriptでは、document.cookie プロパティを使用してCookieを直接操作できます 。

基本的な書き込み方法

javascript

document.cookie = "Name1=Yamada";

この一文を実行すると、Name1 というキーに Yamada という値が保存されます。既に他のCookieが存在していても、それらを消去することなく「追記」される仕組みです 。

属性の設定

Cookieを保存する際には、セミコロンで区切って様々な属性を付与できます 。

javascript

document.cookie = "Name1=Yamada; expires=Fri, 31 Dec 2026 23:59:59 GMT; path=/; secure";
属性内容説明
expires有効期限UTC形式の日時で指定します。これを過ぎるとブラウザが自動削除します 。
max-age有効期間（秒）現在からの経過秒数で期限を指定します。expires よりも優先されます 。
path有効なパスCookieを読み取れるURLの範囲を指定します。通常はサイト全体を示す / を設定します 。
domain有効なドメインCookieを利用可能なホスト名を指定します。サブドメイン間での共有時に使用します 。
secure安全な通信HTTPS接続時のみCookieを送信するように強制します 。
HttpOnlyJSアクセス禁止JavaScriptからの読み取りを禁止し、XSS攻撃を防ぎます。サーバー側でのみ設定可能です 。
SameSiteサイト間制限CSRF対策。Strict, Lax, None のいずれかを設定します。最新のブラウザでは指定なしの場合 Lax とみなされます 。

最新技術：CHIPSとStorage Access API

サードパーティCookieが制限される中、機能性を維持しつつプライバシーを守るための新しい仕組みが導入されています 。

CHIPS (Cookies Having Independent Partitioned State)

CHIPSは、Partitioned 属性を付与することで、サードパーティCookieをトップレベルサイトごとに「分割（パーティション化）」して保存する仕組みです 。これにより、ドメインを跨いだユーザーの追跡を防ぎつつ、埋め込みチャットやマップなどの利便性を損なわないように設計されています 。

設定例：

http

Set-Cookie: __Host-id=abc; SameSite=None; Secure; Path=/; Partitioned;

※ Partitioned 属性を使用する場合、Secure 属性の設定が必須となります 。

Storage Access API

これは、iframe（埋め込みフレーム）内のコンテンツがユーザーに許可を求めて、通常ブロックされているサードパーティCookieへのアクセス権を一時的に取得するためのJavaScript APIです 。SNSのログイン連携やコメント投稿機能などで活用されます 。

javascript

// アクセス権があるか確認
const hasAccess = await document.hasStorageAccess();
if (!hasAccess) {
  // ユーザーの操作（クリック等）をきっかけに要求
  try {
    await document.requestStorageAccess();
    // 成功時の処理
  } catch (err) {
    // 失敗・拒否時の処理
  }
}

ライブラリ「js-cookie」による効率的な操作

素のJavaScript（document.cookie）による操作は、文字列のエンコード処理やパースが複雑になりがちです。これを簡潔かつ安全に扱えるようにするのが「js-cookie」という軽量ライブラリです 。2026年現在の最新版は v3.0.5 であり、多くのプロジェクトで採用されています 。

導入方法

npmの場合:

bash

npm install js-cookie

CDN（jsDelivr等）の場合:

html

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>

基本的な操作

js-cookieを使えば、直感的なメソッドで操作が可能になります 。

●1. Cookieを保存する

javascript

// 基本的な保存
Cookies.set('user_name', 'Yamada');

// 有効期限を7日間に指定し、安全な接続のみ許可
Cookies.set('token', 'abc-123', { expires: 7, secure: true, sameSite: 'strict' });

●2. Cookieを取得する

javascript

// 特定の名前のCookieを取得
const name = Cookies.get('user_name'); // 'Yamada'

// 存在しない場合は undefined が返る
const age = Cookies.get('age'); // undefined

// すべてのCookieをオブジェクトとして取得
const all = Cookies.get(); // { user_name: 'Yamada', token: 'abc-123' }

●3. Cookieを削除する

javascript

Cookies.remove('user_name');

// 属性（path等）を指定して作成した場合は、削除時も同じ指定が必要
Cookies.remove('token', { path: '/' });

注意点：JSONの取り扱い

かつてのバージョンでは getJSON() というメソッドがありましたが、最新版では廃止されています 。現在は、JavaScript標準の JSON.stringify と JSON.parse を組み合わせて使用します 。

javascript

// オブジェクトを保存
const user = { id: 1, name: 'Tanaka' };
Cookies.set('user_info', JSON.stringify(user));

// 取得してパース
const userInfo = JSON.parse(Cookies.get('user_info'));
console.log(userInfo.name); // 'Tanaka'

結論

2026年におけるCookieの取り扱いは、単なるデータの保存という技術的側面を超え、プライバシーへの配慮と法的遵守が不可欠なフェーズにあります 。サードパーティCookieが制限される一方で、CHIPSやStorage Access APIといった新しい技術によって、安全かつプライバシーを尊重した形での利便性の維持が図られています 。初心者の方は、まずは document.cookie の基本特性を理解し、実務ではセキュリティ属性（Secure, HttpOnly, SameSite）を確実に設定できるよう意識しましょう 。また、煩雑な操作を簡略化するために「js-cookie」のような信頼できるライブラリを適切に導入することも、品質の高いコードを書くための近道です 。この記事を通じて、Cookieの仕組みと最新の情勢を正しく把握し、安全で快適なウェブアプリケーション開発に役立てていただけることを願っています。

参考資料

1. Set-Cookie の属性と最新のデフォルト挙動、https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Set-Cookie

2. Cookie 入門、Cookieとは？、設定、危険性、js-cookieなども解説｜JavaScript入門（17）、https://yanai-ke.com/javascript017/

3. Cookieレス時代に対策すべき点、https://www.ebis.ne.jp/column/cookie-less/

4. Chrome で Cookie を削除、許可、管理する、https://support.google.com/chrome/answer/95647?hl=ja

5. ブラウザごとのサードパーティCookie廃止状況、https://www.ebis.ne.jp/column/cookie/

6. 改正個人情報保護法 2026年 施行 内容 クッキー 影響、https://www.ppc.go.jp/personalinfo/legal/kaiseihogohou/

7. MDN Document.cookie、https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

8. MDN Set-Cookie Header、https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie

9. MDN Third-party cookies、https://developer.mozilla.org/en-US/docs/Web/Privacy/Guides/Third-party_cookies

10. MDN Storage Access API、https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API

11. MDN Set-Cookie CHIPS Partitioned attribute 2026、https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie

12. Googleが発信した内容をおさらい、https://oneder.hakuhodody-one.co.jp/blog/google-3rdpartycookie

13. Cookie セキュリティ対策 2026 XSS CSRF CHIPS、https://www.ebis.ne.jp/column/cookie-less/

14. 2026年 Cookie 規制 日本 企業 対応 義務 化 最新、https://cloudcircus.jp/products/cmp/column/cookie/

15. MDN Set-Cookie の属性と最新のデフォルト挙動、https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

16. 個人関連情報に係る本人同意、https://www.freee.co.jp/kb/kb-trend/cookie-regulation-japan-since-when/

17. JavaScript Cookie GitHub、https://github.com/js-cookie/js-cookie

18. cookie npm package、https://www.npmjs.com/package/cookie

19. iPhoneのCookie機能をオン・オフの設定、https://www.icracked.jp/topics/column/ip-cookie-setup-confirmation.html

20. Cookie規制はまだ進行中、https://www.sevennet.com/column/202510-1004/

21. Cookieデータを含む利用情報の第三者提供、https://solution.toppan.co.jp/bx/contents/cdp_contents08.html

22. iPhone標準ブラウザ のCookie設定確認、https://www.icracked.jp/topics/column/ip-cookie-setup-confirmation.html

23. 改正電気通信事業法「外部送信規律」、https://internet.watch.impress.co.jp/docs/news/1504790.html

24. iPhoneアプリの設定変更（Safari）、https://www.softbank.jp/mobile/special/support-channel/contents/?t=08&c=123

25. Cookie partitioning (CHIPS) Designing domains、https://www.namesilo.com/blog/en/website-development/cookie-partitioning--chips-designing-domains-for-a-third-party-cookie-lite-web

26. iPhoneでCookieを有効にする手順、https://support.apple.com/ja-jp/guide/iphone/iph1ec277219/ios

27. Using the Storage Access API、https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API/Using

28. iPhoneでSafariの閲覧履歴、キャッシュ、Cookieを消去する、https://support.apple.com/ja-jp/105082

29. Storage Access API Explained、https://github.com/privacycg/storage-access

30. 個人情報保護法31条1項（受領者の義務）、https://businessandlaw.jp/articles/a20230228-1/

31. 改正個人情報保護法 2022年4月施行、https://www.braze.com/ja/resources/articles/cookie

32. js-cookie npm package、https://www.npmjs.com/package/js-cookie

33. js-cookie 最新の使用例、https://github.com/js-cookie/js-cookie

34. Social Network Commenting Widget SAA、https://github.com/privacycg/storage-access

35. 改正法ではcookieは「個人関連情報」、https://digitalidentity.co.jp/blog/marketing/privacy-protection-law.html

36. Storage Access API (Netlify)、https://mdn2.netlify.app/en-us/docs/web/api/storage_access_api/

37. iOS 19/20 Safari クッキー設定、https://support.apple.com/ja-jp/guide/iphone/iphb01019664/ios

38. Cookies Having Independent Partitioned State (CHIPS) Baseline 2025、https://developer.mozilla.org/en-US/docs/Web/Privacy/Guides/Privacy_sandbox/Partitioned_cookies

39. MDN 第三者クッキーのガイド、https://developer.mozilla.org/en-US/docs/Web/Privacy/Guides/Third-party_cookies

40. js-cookie Releases、https://github.com/js-cookie/js-cookie/releases

41. Preparing for Privacy Sandbox: What is Storage Access API?、https://analyticahouse.com/blogs/privacy-sandbox-api

42. js-cookie GitHub release 2026、https://github.com/js-cookie/js-cookie/releases

43. CHIPS の仕組みと設定方法、https://developer.mozilla.org/en-US/docs/Web/Privacy/Privacy_sandbox/CHIPS

44. js-cookie GitHub releases v3.0.0、https://github.com/js-cookie/js-cookie/releases

45. js-cookie 使い方 最新 2026 npm CDN、https://chaika.hatenablog.com/entry/2019/02/05/083000

46. Lazarus Campaign Malicious Packages、https://thehackernews.com/2026/02/lazarus-campaign-plants-malicious.html

47. js-cookie npm scorecard、https://deps.dev/npm/js-cookie

48. js-cookie/js-cookie GitHub Scorecard、https://deps.dev/npm/js-cookie

49. js-cookie npm latest version snyk、https://security.snyk.io/package/npm/js-cookie

50. @types/js-cookie health score、https://security.snyk.io/package/npm/%40types%2Fjs-cookie

51. Enable cookies on iPhone、https://support.apple.com/guide/iphone/enable-cookies-iph1ec277219/ios

52. How to enable and manage cookies in Safari 2025、https://www.clym.io/blog/how-to-enable-and-manage-cookies-in-safari-on-mac-and-ios-2025

53. 改正個人情報保護法 クッキー規制 2022年4月、https://cloudcircus.jp/products/cmp/column/cookie/

コメント

タイトルとURLをコピーしました