Unable to get related websets working

Hello, we are having issues getting related web sets to work and would appreciate some assistance. We have our inhouse iam hosted at iamsite.test. Our main application is hosted at mainapp.test. We have another service site hosted at servicesite.test.

User first goes to mainapp.test. User clicks a “login button”, the login window is shown in a popup window and user is redirected to the iamsite.test. User goes through the OIDC login process. iamsite.test sets cookies for session and redirects user back to mainapp.test. When user clicks an “open service” button in mainapp.test, we add a new and load servicesite.test. When servicesite.test loads, it initiates the OIDC authorize flow within the iframe to iamsite.test. Since the user is already logged in and the iamsite cookies are present in the request the user is not challenged and iam redirects user back to servicesite.test in the iframe.</p> <p>This flow is broken when we block third party cookies. We are trying to solve this using related web sets. I created a related web set with all three sites and added it to chrome using --use-related-website-set command line argument.</p> <p><code>chrome --use-related-website-set="{\"primary\": \"https://mainsite.test\", \"associatedSites\":[\"https://iamsite.test\",\"https://servicesite.test\"]}"</code></p> <p>I confirmed the related web set was added by browsing to chrome://system. I then added two calls to requestStorageAccessFor (for both the servicesite.test and iamsite.test). These methods are executed when user clicks the “open service” button in mainsite.test but before the <iframe> is created. This call succeeded without any errors. But, after the iframe is added and the oidc login flow is initiated within the iframe to iamsite.test, the iam cookies are still not being passed. </p> <p>The <a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/requestStorageAccessFor">mdn document</a> has the following</p> <p>“requestStorageAccessFor() can enable third-party cookie access for cross-site resources directly embedded into a top-level site that are unable to request storage access themselves, for example <a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"><img></a> elements. Cross-site content embedded in <iframe>s that has its own logic and resources and needs third-party cookie access should request storage access via <a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/requestStorageAccess">Document.requestStorageAccess()</a>.”</p> <p>But, the <a rel="noreferrer nofollow" target="_blank" href="https://developers.google.com/privacy-sandbox/3pcd/related-website-sets-integration#top-level_sites_requesting_cookie_access_on_behalf_of_cross-origin_sites">google website</a> has no such recommendation. </p> <p>Would requestStorageAccessFor work for requesting access for all iframes in the page (including ones that are currently not rendered in the page)? </p> <p>Any thoughts on what is wrong with our implementation?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/anand-work"><img src="https://avatars.githubusercontent.com/u/160653180?v=4" />anand-work</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>Sample code</p> <pre><code><html> <head> <script> function buttonClick() { /* This fetch does not send cookie */ fetch( "https://<iamsite.test>/endpoint", { method: "GET", credentials: "include", } ) .then((response) => {}) .then((json) => {}); document .requestStorageAccessFor("https://<iamsite.test>") .then( (_) => { /* This fetch sends cookies */ fetch( "https://<iamsite.test>/endpoint", { method: "GET", credentials: "include", } ) .then((response) => {}) .then((json) => {}); /* This image request does not send cookies */ var imageElement = document.getElementById("imageid") imageElement.src = "https://<iamsite.test>/imageendpoint"; /* This frame request does not send cookies */ var iFrameElement = document.getElementById("frameid"); iFrameElement.src = "https://<iamsite.test>/endpoint"; }, (_) => { } ); } </script> </head> <body> <img id="imageid" crossorigin></img> <iframe id="frameid"></iframe> <button id="mybutton" onclick=buttonClick()>My button</button> </body> </html></code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rowan-m"><img src="https://avatars.githubusercontent.com/u/108052?v=4" />rowan-m</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>When you say you're blocking third-party cookies, could you verify if you are testing using <code>chrome://flags/#test-third-party-cookie-phaseout</code> enabled?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/anand-work"><img src="https://avatars.githubusercontent.com/u/160653180?v=4" />anand-work</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>Thanks for the response. I tested it with that flag enabled and the sample attached above did not work. </p> <p>Some workflows in our application that did not work when third party cookies were blocked (under Tools->Settings->Privacy and security) started working after chrome://flags/#test-third-party-cookie-phaseout was enabled (even without rws). Based on my understanding that was due to the <a href="https://developers.google.com/privacy-sandbox/3pcd/temporary-exceptions/heuristics-based-exceptions#scenarios">heuristics based exceptions</a>. But, that is a different discussion. We would first like to figure out why the sample code attached above does not send cookies when the request is made from an iframe. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/cfredric"><img src="https://avatars.githubusercontent.com/u/4204485?v=4" />cfredric</a> commented <strong> 8 months ago</strong> </div> <div class="markdown-body"> <p><code>requestStorageAccessFor(origin)</code> allows the top-level document to issue credentialed fetches to <code>origin</code> (via CORS), but it does not make embedded iframes include cookies automatically. Embedded iframes must still call <code>requestStorageAccess()</code> (which will resolve automatically, without requiring a user gesture) in order to obtain access to their cookies.</p> <p>I.e., in your case <code>mainsite.test</code> should call <code>document.requestStorageAccessFor("https://iamsite.test")</code>, and then the <code>iamsite.test</code> iframe should call <code>document.requestStorageAccess()</code>. Then it should have access to its session cookies.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/cfredric"><img src="https://avatars.githubusercontent.com/u/4204485?v=4" />cfredric</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>There hasn't been any activity on this issue in a some months, so I'm going to assume it has been resolved. Closing.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

WICG / first-party-sets

Unable to get related websets working #209