First-Party Sets demo

📖 Note: Refer to the First-Party Sets documentation to understand how the API works.

Demo scenarios

👋 Make sure you follow and [PASS] the "Set-up and settings" steps below before trying the demos.

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

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.

Set-up and settings

• […] Chrome 113 or higher required.
• Launch Chrome with the following command line arguments:

  --enable-features="FirstPartySets:FirstPartySetsClearSiteDataOnChangedSets/1,StorageAccessAPI,StorageAccessAPIForOriginExtension,PageInfoCookiesSubpage,PrivacySandboxFirstPartySetsUI" \
  --use-first-party-set="{\"primary\": \"https://first-party-sets.glitch.me\", \"associatedSites\": [\"https://fps-member-1.glitch.me\"]}" \
  https://first-party-sets.glitch.me/
    

• […] document.hasStorageAccess() available.
• […] document.requestStorageAccess() available.
• […] document.requestStorageAccessFor() available.
• In Chrome settings, go to Privacy and Security → Cookies and other site data or chrome://settings/cookies. Under General settings ensure that Block third-party cookies is enabled and the sub-option Allow related sites to see your activity in the group is also enabled.
• [TEST] Third-party cookies look like they're blocked.
• [TEST] Set demo cookie:
  Check Set-Cookie: crossSite=[timestamp]; Path=/; Secure; SameSite=None: