cookieの属性とその使い方【ウェブデザイン技能検定 1級学科範囲】

2024年12月1日 2024年11月21日 8分54秒

タスラ t3l

令和4年のウェブデザイン技能検定でも出題されたcookieの属性について、今回は詳しく解説します。cookieの各属性がどのような状況で使われるかも併せて説明します。

1 cookieとは
2 cookieの主要な属性
3 JavaScript以外でのcookie設定
4 まとめ

cookieとは

cookieは、ウェブサイトがユーザーのブラウザに情報を保存する仕組みです。
これにより、ユーザーがウェブサイトを再訪問した際に、保存された情報を利用してユーザーの設定や状態を保持することができます。

名前の由来は、プログラムの「魔法のクッキー（magic cookie）」という用語から由来しています。
この用語は、オペレーティングシステムやソフトウェアが内部で使用する、ユーザーには見えないが重要な情報の断片を指します。ウェブブラウザでのcookieも同様に、ユーザーの情報を小さなデータ片として保存し、後で利用することから、この名前が使われるようになりました。。。。だそうです。。。あまり私はピンときませんでした　笑

cookieの主要な属性

1. secure属性

secure属性は、cookieの送信をHTTPS通信時のみに制限する属性です。
これにより、cookieの内容が安全に保護され、HTTP通信時に盗聴されるリスクを軽減します。

document.cookie = "username=JohnDoe; secure";

使用される事例

金融サイトやショッピングサイト: ユーザーの個人情報や支払い情報を扱う際に使用されます。

2. HttpOnly属性

HttpOnly属性は、JavaScriptからのアクセスを禁止し、HTTP（およびHTTPS）通信によるアクセスのみを許可します。
これにより、クロスサイトスクリプティング（XSS）攻撃からcookieを保護することができます。

document.cookie = "sessionToken=abc123; HttpOnly";

使用される事例

セッション管理: セッションIDを含むcookieに設定して、セキュリティを強化します。

3. SameSite属性

SameSite属性は、クロスサイトリクエストフォージェリ（CSRF）攻撃を防ぐために、同一サイト内でのみcookieを送信するように制限します。
SameSiteには、Strict、Lax、およびNoneの3つの値があります。

document.cookie = "cartId=789xyz; SameSite=Lax";

使用される事例

フォーム送信: ユーザーが同一サイト内で操作を完了する際に使用されます。

4. expires属性

expires属性は、cookieの有効期限を指定するための属性です。
有効期限が過ぎると、cookieは自動的に削除されます。

let date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7日後
document.cookie = "username=JohnDoe; expires=" + date.toUTCString();

使用される事例

ログイン情報の保存: ユーザーが次回訪問時にログイン情報を自動入力するために設定されます。

5. max-age属性

max-age属性は、cookieの有効期限を秒単位で指定します。
expires属性と似ていますが、より精確な期限指定が可能です。

document.cookie = "username=JohnDoe; max-age=604800"; // 7日後

使用される事例

一時的なトラッキング情報: 短期間のユーザー行動を追跡する際に使用されます。

6. domain属性

domain属性は、cookieを送信する対象のドメインを指定します。
この属性を使用することで、サブドメイン間でのcookie共有が可能になります。

document.cookie = "username=JohnDoe; domain=example.com";

使用される事例

サブドメインの共有: example.comのすべてのサブドメインで同じcookieを使用する場合に設定されます。

7. path属性

path属性は、cookieが送信されるリクエストパスを指定します。
特定のパスに対してのみcookieを送信することができます。

document.cookie = "username=JohnDoe; path=/account";

使用される事例

特定のセクション: サイトの特定の部分（例：アカウントページ）でのみcookieを使用する場合に設定されます。

JavaScript以外でのcookie設定

ここまでJavaScriptでの表記をしてきましたが、cookieはさまざまなサーバーサイドのプログラミング言語（PHP、Python、Ruby、Node.jsなど）を使用して設定することができます。

以下サンプルになります。

PHPでのcookie設定

<?php
// cookieを設定
setcookie("username", "JohnDoe", time() + (86400 * 7), "/"); // 7日間有効
?>

Python（Flask）でのcookie設定

from flask import Flask, make_response

app = Flask(__name__)

@app.route('/')
def set_cookie():
    resp = make_response("Cookie Set")
    resp.set_cookie('username', 'JohnDoe', max_age=60*60*24*7) // 7日間有効
    return resp

if __name__ == '__main__':
    app.run()

Ruby（Rails）でのcookie設定

class ApplicationController < ActionController::Base
  def set_cookie
    cookies[:username] = { value: 'JohnDoe', expires: 7.days.from_now }
  end
end

Node.js（Express）でのcookie設定

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.cookie('username', 'JohnDoe', { maxAge: 60 * 60 * 24 * 7 * 1000 }); // 7日間有効
  res.send('Cookie Set');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

まとめ

cookieは、ウェブサイトがユーザーのブラウザに情報を保存するための重要な仕組みです。
各属性を適切に使用することでcookieのセキュリティと有効性を管理することができます。
さらに、JavaScriptだけでなく、PHP、Python、Ruby、Node.jsなどのサーバーサイドのプログラミング言語を使用してcookieを設定することも可能です。
これらの属性の役割と使用事例を理解し、適切に活用することが求められます。