requestStorageAccessFor() - First-Party Sets demo

📋 Quick requirements check: Make sure you do the set-up instructions on the home page first! 🔎 Chrome 113+: […] 🔎 requestStorageAccess() […]

• Bottom-up approach: use requestStorageAccess() in a cross-site, same-set iframe.
• 👉 Top-down approach: use requestStorageAccessFor() for embedded cross-site, same-set resources.

🧑‍💻 Code for this page.

This demo uses two sites: first-party-sets.glitch.me and fps-member-1.glitch.me, which are both part of the same First-Party Set. first-party-sets.glitch.me sets a cookie named crossSite to that will be allowed in the cross-site, same-set contexts via the Storage Access API.

🍪 crossSite cookie sent on cross-site, same-set requests? […]

1. Check navigator.permissions.query({name: 'top-level-storage-access', requestedOrigin: 'https://first-party-sets.glitch.me'}).then(res => {…} and see that res.state is […].
2. 1. If prompt we need to put the document.requestStorageAccessFor('https://first-party-sets.glitch.me').then(res => {…}) behind a user gesture, e.g. clicking a button:
      🍪 Click for cookies → […]
   2. If granted we can just call document.requestStorageAccessFor('https://first-party-sets.glitch.me').then(res => {…}) immediately → […]
3. After a successful requestStorageAccessFor() call, cross-site requests will include cookies if they include CORS or the crossorigin attribute.

🍪 crossSite cookie sent on subsequent cross-site, same-set requests? […]