Cookie ストレージの謎が明らかに: ブラウザとサーバー間の対話の詳細な説明

インターネットの発展に伴い、Web の閲覧、ショッピング、ログインなどの操作にブラウザを使用する機会が増えています。これらのプロセスでは、Cookie という言葉をよく耳にします。では、クッキーとは一体何なのでしょうか？その機能は何ですか?今日は、Cookie ストレージの謎を明らかにし、ブラウザとサーバー間の対話を詳細に分析し、具体的なコード例を示します。

1. Cookie とは何ですか?

簡単に言うと、Cookie はサーバーからブラウザに送信され、ローカルに保存される小さなデータです。ブラウザは同じサーバーにリクエストを行うたびに、以前に保存された Cookie データを取得します。この場合、サーバーはブラウザ内の Cookie データを読み取り、その情報に基づいて対応する操作を実行できます。

2. Cookie の役割

1. セッション状態管理

Cookie を通じて、サーバーはユーザーを識別し、ユーザーがアクセスしたときにそれを保持できます。ユーザーのセッション状態。たとえば、ログインすると、サーバーはログイン情報を含む Cookie をブラウザに送信します。これにより、Web サイトに再度アクセスすると、サーバーは前回と同様にユーザーを認識し、自動的にログインできます。

2. パーソナライズされた設定

Cookie を通じて、サーバーはユーザーの個人的な習慣や好み、その他の情報の一部を取得し、それによってユーザーに、よりパーソナライズされたサービスや提案を提供できます。たとえば、ショッピング Web サイトを閲覧すると、サーバーは過去の購入記録や閲覧履歴に基づいて関連商品を推奨します。

3. 追跡分析

サーバーは Cookie を通じてユーザーの閲覧習慣を追跡し、関連する分析と統計を実行できます。たとえば、広告会社は Cookie を使用してユーザーがさまざまな Web サイトにアクセスした時間や頻度などの情報を追跡し、ユーザーの興味や購入希望を理解し、広告主により良い広告宣伝サービスを提供できます。

3. ブラウザとサーバー間のやり取り

Cookie の保存と取得はブラウザとサーバーの間で行われ、やり取り全体のプロセスは次の 4 つのステップに分けることができます。

1. ブラウザはサーバーにリクエストを送信しますが、そのリクエストには Cookie 情報が含まれません。
2. サーバーはリクエストを受信すると、Cookie データを生成してブラウザに送信します。
3. ブラウザは Cookie データを受信すると、それをローカルに保存します。
4. ブラウザは、以前に保存した Cookie データをリクエストに含めて、同じサーバーにリクエストを再度送信します。

このプロセスをより深く理解するために、具体的な例を見てみましょう。

(1) サーバー コードの例

以下は、Cookie 情報を含む応答をブラウザーに送信するために Node.js フレームワークを使用して記述されたサーバー コードです。

const http = require('http');

http.createServer((req, res) => {
  //设置cookie
  res.writeHead(200, {
    'Set-Cookie': 'name=cookie_test; max-age=60'
  });

  //发送响应
  res.end('Hello World!
');
}).listen(8080);

console.log('Server running at http://localhost:8080/');

コード分析:

• サーバー応答ヘッダーの Set-Cookie フィールドを使用して、Cookie データをブラウザーに送信します。
• max-age パラメータを使用して Cookie の有効期間を設定します。ここでは 60 秒に設定されています。

(2) ブラウザコード例

以下は、上記サーバーにリクエストを送信し、レスポンスを受信した際にCookie情報を出力するJavaScriptで記述したブラウザコードです。

// 发送请求
fetch('http://localhost:8080')
  .then(response => {
    // 读取cookie
    console.log(response.headers.get('Set-Cookie'));
    return response.text();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));

コード分析:

• fetch 関数を使用して、サーバーにリクエストを送信します。
• response.headers.get('Set-Cookie') メソッドを通じて、応答ヘッダー内の Cookie 情報を読み取ります。
• response.text() メソッドを使用して、応答本文のテキスト情報を取得します。

4. Cookie の共通属性

上記の例で使用されている max-age 属性に加えて、Cookie には他の多くの属性があります。共通の属性は次のとおりです。

1. Path

この属性は、Cookie のパスを指定します。ブラウザがリクエストを開始すると、リクエストのパスが Cookie のパスと正確に一致する場合にのみ Cookie が取得されます。

res.writeHead(200, {
  'Set-Cookie': 'name=value; Path=/test'
});

2. Domain

この属性は、Cookie のドメイン名を指定します。ブラウザがリクエストを開始すると、リクエストされたドメイン名が Cookie のドメイン名と正確に一致する場合にのみ、Cookie が組み込まれます。

res.writeHead(200, {
  'Set-Cookie': 'name=value; Domain=.example.com'
});

3. Expires

この属性は、Cookie の有効期間を指定します。この属性を設定すると、Cookie は指定された時刻に自動的に期限切れになり、ブラウザによって削除されます。

res.writeHead(200, {
  'Set-Cookie': 'name=value; Expires=Wed, 18 Nov 2020 08:51:29 GMT'
});

4. Secure

この属性は、Cookie を https プロトコル経由でのみ送信できるかどうかを指定します。この属性を設定すると、HTTPS リクエストが行われたときにのみ Cookie が取得されるようになります。

res.writeHead(200, {
  'Set-Cookie': 'name=value; Secure'
});

5. HttpOnly

この属性は、Cookie を http プロトコル経由でのみ送信できるかどうかを指定します。この属性を設定すると、ブラウザは JavaScript を通じて Cookie 情報を取得できなくなり、Cookie のセキュリティが向上します。

res.writeHead(200, {
  'Set-Cookie': 'name=value; HttpOnly'
});

5. 概要

この記事の導入を通じて、Cookie の定義、機能、保存方法、および共通の属性について学びました。同時に、ブラウザとサーバー間の Cookie の対話モデルについても学び、具体的なコード例を通じて Cookie についての理解を深めました。フロントエンドエンジニアとして、実際の開発においてCookie関連の知識をより柔軟かつ効率的に適用するには、Cookie関連の知識を深く理解し、習得する必要があります。

以上がCookie ストレージの謎が明らかに: ブラウザとサーバー間の対話の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。