ストレージアクセス API の使用

<iframe
  sandbox="allow-storage-access-by-user-activation
                 allow-scripts
                 allow-same-origin">
  …
</iframe>

function doThingsWithCookies() {
  document.cookie = "foo=bar"; // クッキーを設定
}

function doThingsWithLocalStorage(handle) {
  handle.localStorage.setItem("foo", "bar"); // ローカルストレージのキーを設定
}

async function handleCookieAccess() {
  if (!document.hasStorageAccess) {
    // このブラウザーはストレージアクセス API に対応していない
    // とにかく、アクセスできることを期待するしかない
    doThingsWithCookies();
  } else {
    const hasAccess = await document.hasStorageAccess();
    if (hasAccess) {
      // サードパーティクッキーを保有しているので、さっそく始める
      doThingsWithCookies();
      // パーティションが設定されていない状態を変更したい場合は、ハンドルをリクエストする必要がある
      const handle = await document.requestStorageAccess({
        localStorage: true,
      });
      doThingsWithLocalStorage(handle);
    } else {
      // 同じサイト内の別の埋め込みコンテンツに対して、サードパーティ
      // クッキーへのアクセスが許可されているかどうかを調べる
      try {
        const permission = await navigator.permissions.query({
          name: "storage-access",
        });

        if (permission.state === "granted") {
          // その場合は、ユーザー操作を必要とせずに requestStorageAccess() を呼び出すことが可能
          // そうすれば、自動的に解決される
          const handle = await document.requestStorageAccess({
            cookies: true,
            localStorage: true,
          });
          doThingsWithLocalStorage(handle);
          doThingsWithCookies();
        } else if (permission.state === "prompt") {
          // ユーザーの操作の後で、requestStorageAccess() を呼び出す必要がある
          btn.addEventListener("click", async () => {
            try {
              const handle = await document.requestStorageAccess({
                cookies: true,
                localStorage: true,
              });
              doThingsWithLocalStorage(handle);
              doThingsWithCookies();
            } catch (err) {
              // ストレージへのアクセス中にエラーが発生した場合
              console.error(`Error obtaining storage access: ${err}.
                            Please sign in.`);
            }
          });
        } else if (permission.state === "denied") {
          // ユーザーがサードパーティクッキーへのアクセスを拒否したため、
          // 別の対応が必要となる
        }
      } catch (error) {
        console.log(`権限の状態にアクセスできませんでした。エラー: ${error}`);
        doThingsWithCookies(); // やはり、アクセスできることを期待するしかない
      }
    }
  }
}

navigator.permissions
  .query({
    name: "top-level-storage-access",
    requestedOrigin: "https://example.com",
  })
  .then((permission) => {
    if (permission.state === "granted") {
      // その権限はすでに得られている
      // requestStorageAccessFor() を再度呼び出す必要はない。そのままクッキーを使用して始めてください。
      doThingsWithCookies();
    } else if (permission.state === "prompt") {
      // ユーザーの操作の後で、requestStorageAccessFor() を呼び出す必要がある
      btn.addEventListener("click", () => {
        // ストレージへのアクセスをリクエストする
        rSAFor();
      });
    } else if (permission.state === "denied") {
      // ユーザーがサードパーティクッキーへのアクセスを拒否したため、
      // 別の対応が必要となる
    }
  });

function rSAFor() {
  if ("requestStorageAccessFor" in document) {
    document.requestStorageAccessFor("https://example.com").then(
      (res) => {
        doThingsWithCookies();
      },
      (err) => {
        // エラー処理
      },
    );
  }
}

navigator.permissions.query({
  name: "top-level-storage-access",
  requestedOrigin: "https://example.com",
});

function checkCookie() {
  fetch("https://example.com/getcookies.json", {
    method: "GET",
    credentials: "include",
  })
    .then((response) => response.json())
    .then((json) => {
      // 何かを行う
    });
}