Cookie とは、ブラウザに保存されるデータのまとまりで、ウェブサイトの機能を実行するために必要な状態やその他の情報を保持する目的で使用されます。
Cookie は、ウェブサイトがユーザーのパソコンに保存する小さなファイルで、保存された情報はブラウザとウェブサイトとの間で送受信されます。
各 Cookie は Key-Value ペアと、その Cookie を使用するタイミングと場所を制御する複数の属性です。これらの属性は、有効期限の設定や、Cookie の送信を HTTPS でのみ行うよう指示するために使用されます。Cookie は、HTTP ヘッダーまたは JavaScript インターフェースで設定できます。
Cookie は、ウェブサイトに永続的な状態を追加するための方法の 1 つです。年を追うごとにその能力は成長と進化を遂げてきましたが、プラットフォームにはこれまで問題を抱えていたいくつかの問題が残っていました。これに対処するために、ブラウザ（Chrome、Firefox、Edge など）は動作を変更し、よりプライバシーに配慮したデフォルト設定を適用します。
Cookie の活用例
たとえば、ブログで「最新情報」をプロモーションを できます。プロモーションを閉じると、しばらくの間再度表示されません。 設定を Cookie に保存し、1 か月で期限切れになるように設定する。 HTTPS 経由でのみ送信できます。このヘッダーは、次のようになります。 これを次のように使用します。
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
<ph type="x-smartling-placeholder">Set-Cookie ヘッダーを使用して Cookie を設定します。
これらの要件を満たすページを読者が閲覧すると、その読者は Cookie の作成から 1 か月未満で、ブラウザが このヘッダーをリクエストに含めて送信します。
Cookie: promo_shown=1
<ph type="x-smartling-placeholder">Cookie ヘッダーで Cookie を返します。
また、
document.cookie。document.cookie に割り当てを行うと、
そのキーで Cookie をオーバーライドできます。たとえば、
次の動作を行います。
→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"
document.cookie を読み取ると、現在の URL でアクセス可能なすべての Cookie が出力されます
各 Cookie をセミコロンで区切って指定します。
→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
<ph type="x-smartling-placeholder">document.cookie を使用して Cookie にアクセスできます。
いくつかの人気サイトでこれを試してみると
3 つよりもはるかに多く設定されますほとんどの場合、
そのドメインに対するすべてのリクエストで Cookie が送信されます。
影響しますアップロードの帯域幅は、多くの場合、ダウンロードよりも制限されます
すべてのアウトバウンド リクエストのオーバーヘッドが
使用できます。Cookie の数とサイズは慎重に設定してください。製造元
Cookie が残らないようにするため、Max-Age 属性を使用する
時間がかかります。
ファーストパーティ Cookie とサードパーティ Cookie とは
先ほど見ていたサイトに戻ると さまざまなドメインで Cookie が存在しています。 アクセスできます。URL のドメインと一致する Cookie は、 現在のサイト、つまりブラウザのアドレスバーに表示されているものは、 ファーストパーティ Cookie に変更します。同様に、サイト以外のドメインからの Cookie は、 現在のサイトをサードパーティ Cookie と呼びます。絶対的ではない ユーザーのコンテキストに関連します。同じ Cookie を ユーザーがアクセスしているサイトに応じて、
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">上の例で言うと、あなたのブログ投稿の 1 つに
素晴らしい猫の写真が表示されています
/blog/img/amazing-cat.png。素晴らしい画像だから
サイトで直接使用している場合ですブログにアクセスしたことがあり、
promo_shown Cookie、次にユーザーが amazing-cat.png を表示したとき
その画像のリクエストで Cookie が送信されることをユーザーのサイトに許可しています。この
promo_shown は何も使用されないため、特にユーザーにとっては有用ではありません
リクエストのオーバーヘッドが増えるだけです
これが意図しない結果であるのであれば、なぜこのような処理を行いますか。これです メカニズムを使用して、サイトが特定のサービスで使用されている サードパーティ コンテキストで識別されます。たとえば、サイトに YouTube 動画を埋め込んでいる場合、 サイト訪問者には [後で見る] とオプションを使用します。サイト訪問者が ログインしている場合、そのセッションは 埋め込まれたプレーヤーに動画が表示され、] ボタンを 動画を一度に保存できるので、ユーザーにログインを求めたり、 ページから移動して YouTube に呼び戻すことができます。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">ウェブの文化的特性の一つは、
あります。これこそが、多くの人が
独自のコンテンツやアプリを提供できますしかし、これにより多くの
セキュリティとプライバシーに関する懸念ですクロスサイト リクエスト フォージェリ（CSRF）攻撃は、
特定のオリジンへのリクエストには Cookie が添付されています。これは、
リクエストを開始するユーザーを指定できます。たとえば、evil.example にアクセスすると、
your-blog.example へのリクエストをトリガーすると、ブラウザが
関連付けられます。ブログでこれらを検証する方法が慎重に検討されていないと、
リクエストが送信されると、evil.example が投稿の削除や
独自のコンテンツを作成します。
またユーザーは、Cookie を使用して自分のイベントを
複数のサイトにわたるアクティビティを確認できます。しかし これまでは
Cookie を使用してインテントを明示的に記述する必要があります。promo_shown Cookie の設定
ファーストパーティ コンテキストでのみ送信されますが、ウィジェットのセッション Cookie は
他のサイトに埋め込まれる予定のため、意図的に
ユーザーのログイン ステータスに関する情報です。
適切な SameSite 属性を設定することで、Cookie を使用してインテントを明示的に記述できます。
ファーストパーティ Cookie を特定して適切な属性を設定するには、ファーストパーティ Cookie のレシピをご覧ください。