サーバーとJavaScript APIで利用可能なClear-Site-Dataヘッダー

HTTPヘッダーのClear-Site-Data：ブラウザの記憶を消去する仕組み

プログラミングでの利用

Clear-Site-Dataは、サーバー側の設定とクライアント側のJavaScript APIの両方で利用できます。

サーバー側の設定では、以下の方法でClear-Site-Dataヘッダーをレスポンスに追加できます。

• Apache

Header set Clear-Site-Data "cookie,storage"

• Nginx

add_header Clear-Site-Data "cookie,storage";

JavaScript APIでは、Headers オブジェクトを使用してClear-Site-Dataヘッダーを設定できます。

const headers = new Headers();
headers.append("Clear-Site-Data", "cookie,storage");

fetch("/", { headers });

消去できるデータの種類

Clear-Site-Dataヘッダーには、以下のディレクティブを指定して、消去するデータの種類を指定できます。

• "cookie": クッキー
• "storage": ローカルストレージとセッションストレージ
• "cache": サービスワーカーのキャッシュ
• "executionContexts": サービスワーカーの実行コンテキスト
• "mediaKeys": 暗号化されたメディアキー
• "images": 画像
• "fonts": フォント
• "scripts": スクリプト
• "stylesheets": スタイルシート
• "trackers": トラッキングデータ

ワイルドカード

すべての種類のデータを消去したい場合は、ワイルドカード (*) を使用できます。

Clear-Site-Data: *

注意点

• Clear-Site-Dataヘッダーは、ユーザーのプライバシーに影響を与えるため、慎重に使用してください。
• 一部のブラウザでは、すべてのディレクティブに対応していない場合があります。
• Clear-Site-Dataヘッダーは、リロード後にのみ適用されます。

Clear-Site-Dataヘッダーのサンプルコード

Apache

# クッキーとローカルストレージを消去
Header set Clear-Site-Data "cookie,storage"

# 特定のオリジンのみ消去
Header set Clear-Site-Data "cookie,storage" if request.uri =~ ^/example\.com/

# ワイルドカードを使用してすべてのデータを消去
Header set Clear-Site-Data "*"

Nginx

# クッキーとローカルストレージを消去
add_header Clear-Site-Data "cookie,storage";

# 特定のオリジンのみ消去
if ($request_uri ~ ^/example\.com/) {
  add_header Clear-Site-Data "cookie,storage";
}

# ワイルドカードを使用してすべてのデータを消去
add_header Clear-Site-Data "*";

JavaScript API

// クッキーとローカルストレージを消去
const headers = new Headers();
headers.append("Clear-Site-Data", "cookie,storage");

fetch("/", { headers });

// 特定のオリジンのみ消去
const url = new URL("/", location.href);
url.hostname = "example.com";

const headers = new Headers();
headers.append("Clear-Site-Data", "cookie,storage");

fetch(url.toString(), { headers });

// ワイルドカードを使用してすべてのデータを消去
const headers = new Headers();
headers.append("Clear-Site-Data", "*");

fetch("/", { headers });

その他のサンプル

• 特定のサービスワーカーのキャッシュのみ消去

navigator.serviceWorker.getRegistrations().then(registrations => {
  registrations.forEach(registration => {
    registration.unregister();
  });
});

• 画像キャッシュのみ消去

caches.open("images").then(cache => {
  cache.keys().then(keys => {
    keys.forEach(key => {
      cache.delete(key);
    });
  });
});

Clear-Site-Dataヘッダーの代替方法

ブラウザの設定

多くのブラウザでは、設定画面から閲覧履歴、キャッシュ、クッキーなどのデータを消去することができます。

プライバシーモード

多くのブラウザには、プライバシーモードと呼ばれる機能が搭載されています。プライバシーモードで閲覧すると、閲覧履歴やクッキーなどのデータが保存されません。

拡張機能

ブラウザの拡張機能を使用して、特定のサイトのデータを消去することができます。

JavaScript APIを使用して、ブラウザのデータを消去することができます。

各方法の比較