こんにちわ、西田@リテールアプリ共創部マッハチームです
Storage Access API とは?
ユーザーの同意を確認するプロンプトを表示し、3rd Party Cookieへのアクセスの許可を得ることができるAPIです
3rd Party Cookieはクロスサイトトラッキングを防ぐ目的で段階的に廃止されています。その一方でトラッキング以外のユーザーにとって利便性の高い3rd Party Cookieのユースケースが満たせなくなってしまいます
Storage Access APIは、そのユースケースを救うことを目的としたAPIです
※ なお、Storage Access APIは執筆時点では、まだExperimental(実験的)な機能です
3rd Party Cookieとは?
オリジン(ユーザがブラウザで明示的にアクセスしたサイト)に埋め込まれたリソースから送信されるCookieです
オリジンからサーバーに送信されるクッキーを 1st Party Cookie と呼び、オリジンに埋め込まれたリソース(iframe、画像等)で、クロスオリジン(ユーザーがブラウザで明示的にアクセスしたサイトと別のオリジン)のサイトに送信されるクッキーを3rd Party Cookieと呼びます
3rd Party Cookieのユースケース
3rd Party Cookieの主なユースケースとしては以下のようなものがあります
- ユーザーの行動のトラッキング
- 認証連携(SSO、埋め込みコンテンツ等)
ユーザーの行動のトラッキング
ユーザーの行動をトラッキングにするのに使われます。広告のリターゲティングなどに使われています。たとえば、キャンプの情報を検索し、それに関連するページを見ていたら、それらのページとは全く関係のない別のサイトでテントの広告ばかりが表示されるといったようなことが起きます
3rd Party Cookieの廃止は、このようなトラッキング用途を防ぐ目的で廃止されます
認証連携
一方3rd Party Cookieは認証の連携にも使われます。たとえば、YouTubeのプレミアム会員になっていると、YouTube以外のサイトに埋め込まれた(3rd Party)動画でも、広告を流さないといったことが実現できます
Storage Access APIは、このような用途を3rd Party Cookie廃止後にも行えることを目的としています
Storage Access APIの使い方
Storage Access APIには2つのメソッドがあります
Document.hasStorageAccess()
Document.requestStorageAccess()
hasStorageAccess
埋め込まれたサイトが、3rd Party Cokieに対するアクセス権があるかどうかを boolean 値で解決するPromiseを返します
document.hasStorageAccess().then((hasAccess) => {
if (hasAccess) {
// すでに許可されている
else {
// まだ許可されていない
}
});
参考: mdn Document.hasStorageAccess
requestStorageAccess
埋め込まれたサイトから3rd Party Cookieに対するアクセス権をユーザーに対してリクエストします。ユーザーが許可したかどうかは返却されるPromiseでわかります。
許可された場合に履行(fullfilled)され、許可されなかった拒否(rejected)されます
document.requestSotrageAccess().then(
() => {
// アクセスが許可された
},
() => {
// アクセスが許可されなかった
},
);
参考: mdn Document.requestStorageAccess
実際に試す
Storage Access API は、まだ実験的な機能でブラウザによって挙動が変わります。
ChromeとSafariで実際にStorage Access APIを試していきます
環境を作成する
オリジンと、オリジンにiframeとして埋め込まれるクロスオリジンのサイトを作成します
オリジン側HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Origin</title>
</head>
<body>
<h1>Origin</h1>
<iframe
src="https://other.example.com/"
sandbox="allow-scripts allow-same-origin allow-storage-access-by-user-activation"
></iframe>
</body>
</html>
埋め込まれるiframeに対してサンドボックス設定で以下を許可しています
- allow-scripts: iframe内でスクリプトの実行を許可します
- allow-same-origin: Cookieへのアクセスの許可を得るために必要です
- allow-storage-access-by-user-activation: Storage Access APIを使用するために必要です
埋め込まれる(iframe)側のHTML
埋め込まれる側はサーバーサイドから以下の Set-Cookie ヘッダがサーバーから送信されるようにしておきます
SameSite=None;
は、そのクッキーが3rd Party Cookieとしてあることを示すマークです。3rd Party Cookieとしても取り扱いたい場合に必要です
Set-Cookie: name=3rdPartyCookieValue; SameSite=None; Secure
以下のHTMLは、ボタン押下時に Storage Access API プロンプトが表示され、ユーザーが許可をすると、画面内にCookieの内容が表示されます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>iframe</title>
<script>
async function makeRequestWithUserGesture() {
const display = document.getElementById("display");
// 3rd Party Cookieへのアクセス許可を確認する
if (!await document.hasStorageAccess()) {
try {
// 3rd Party Cookieへのアクセス許可をリクエスト
await document.requestStorageAccess();
} catch (error) {
// プロンプトが表示され、許可されなければ reject される
display.innerText = "許可されなかった"
return;
}
}
// Cookieの内容を画面表示
display.innerText = document.cookie;
}
</script>
</head>
<body>
<h1>iframe</h1>
<button onclick="makeRequestWithUserGesture()">Request Storage Access</button>
<div id="display" />
</body>
</html>
Chromeで試してみた
3rd Party Cookieを無効化
chrome://flags/#test-third-party-cookie-phaseout
にアクセスし一時的に3rd Party Cookieが廃止された状態にします
埋め込まれる側のページにアクセスしCookieを保存
Storage Access APIはあくまで、自身の 1st Party Cookie として保存されたCookieを3rd Party CookieとしてもアクセスできるようにするAPIです。
一度埋め込まれる側のページに直接アクセスし、1st Party Cookieとしてサーバーから送信されたCookieをブラウザに保存します
オリジンにアクセスする
オリジンのサイトにアクセスします
埋め込まれたiframe側のSet-Cookieに警告が表示されています
オリジン側のCookieは送信されますが、埋め込まれたiframe側は先ほど保存したCookieが送信されないことを確認できます
Storage Access APIを使用し許可を得る
iframe内のボタンを押して、Storage Access APIを呼び出し、表示されたポップアップで許可します
iframeのJavaScriptでCookieにアクセスできることが確認できます
ただし、サーバーにはCookieは送信されませんでした。サーバーにCookieを送信させるには別途 Chromeを操作し3rd Party Cookieのトラッキングを許可する必要がありました
Safariで試してみる
safariはデフォルトで3rd Party Cookieが無効化されてますので、特別な操作は必要ありません
埋め込まれる側のページにアクセスしCookieを保存
オリジンのページにアクセスする
埋め込まれた側(iframe側)の Set-Cookie
ヘッダが送信されてるのに、リクエストにCookieがヘッダが含まれてないことが確認できます
Storage Access APIを使用し許可を得る
Storage Access APIを使用し許可を得ます
※ 執筆時点のSafari(バージョン17.5)では元々の hasStorageAccess
APIを使って事前に許可を得てるか確認してからだと上手く動作しなかったので、事前確認なしてで requestStorageAccess
を呼び出しています。この実装でも、ユーザーの許可はキャッシュされるので、2回目以降は一定時間プロンプトが開くことなく3rd Party Cookieにアクセスできます
<script>
async function makeRequestWithUserGesture() {
const display = document.getElementById("display");
// 3rd Party Cookieへのアクセス許可を確認する
try {
// 3rd Party Cookieへのアクセス許可をリクエスト
await document.requestStorageAccess();
} catch (error) {
console.error(error);
// プロンプトが表示され、許可されなければ reject される
display.innerText = "許可されなかった"
return;
}
// Cookieの内容を画面表示
display.innerText = document.cookie;
}
</script>
プロンプトが起動するので許可を選択します
iframeのJavaScriptでCookieにアクセスできることが確認できます
Safariは Storage Access APIで3rd Party Cookieへのアクセスを許可すると、サーバーにCookieとして送信されました
まとめ
今回は3rd Party Cookieを、ユーザーの許可があればアクセスできるようにする Storage Access APIを試してみました。
まだ実験的な機能なので、今後変更されると思いますが、3rd Party Cookieが廃止後にどのような対応が必要なのかイメージすることができました
この記事が誰かの参考になれば幸いです
参考
Storage Access API | Privacy Sandbox | Google for Developers