First-Party Sets demo

πŸ’‘ Read "First-Party Sets testing instructions" for more detail!

This demo will show you how to set up First-Party Sets, requestStorageAccess(), and requestStorageAccessForOrigin() in Chrome for local testing. This site will attempt to set a number of same-site and cross-site cookies to run through the different functionality.

πŸ§‘β€πŸ’» See the code…

Set-up and settings

1⃣ […] Chrome 108 or higher required.

2⃣ Launch Chrome with the following command line arguments:

google-chrome \
--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/

Note: Command line arguments must be passed exactly as isβ€”it's pretty picky! You can find an explanation of the flags in the accompanying developer article.

3⃣ […] document.requestStorageAccess() available.

4⃣ […] document.requestStorageAccessForOrigin() available.

5⃣ 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.

6⃣ [TEST] Third-party cookies are blocked.

7⃣ [TEST] Demo cookies are set.

Check Set-Cookie: sameSite=[timestamp]; Path=/; Secure; SameSite=Lax:

Check Set-Cookie: crossSite=[timestamp]; Path=/; Secure; SameSite=None:

Demo scenarios

This site first-party-sets.glitch.me is the primary member of set. fps-member-1.glitch.me is a member of that set.