I'm trying to use a 'root' domain that I control to store a login token in a cookie, and to use this login token in other domains that all run off the same backend system. The goal is to seamlessly authenticate a user across these different domains without them having to manually log in again on each different domain they hit. Each domain will retrieve the token via postMessage communication with an iframe run in the 'root' domain, which requires cross-origin storage access. I'm following the instructions (e.g. https://webkit.org/blog/11545/updates-to-the-storage-access-api/) for how to authorize cross-origin storage access to get at the cookie, but I'm unsure of how to capture a user event in the cross-origin iframe in order to be allowed to call document.requestStorageAccess().
From my understanding, click listeners are not triggered when a page is loaded in a cross-origin iframe, and my testing seems to support this. I have a relatively simple HTML file that gets loaded in the iframe, which mainly listens for messages sent via postMessage from the other domain, gets/sets/removes cookies based on the message, and sends data back to the top-level requesting page via postMessage. The postMessage process works without issue.
If I add some DOM elements to this, add an onclick to any of those elements, and then click them when the file is loaded via the cross-origin iframe, nothing happens. If I open this HTML file directly, the click listeners are triggered as I'd expect. If I call document.requestStorageAccess() from a message handler, I get an error saying that it can only be called from a user-generated event handler.
All the instructions I've seen on getting users through the flow to authorize this cross-origin storage access just seem to implicitly assume that the iframe's click listeners can be triggered, and I'm not sure what I'm missing here. WebKit's instructions (linked above) use an example with two subdomains, which may have laxer restrictions. Mozilla's instructions (https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API) just sort of gloss over capturing a click/tap event. Calling something like document.getElementById().click() from inside the iframe page also throws an error about it not being a user-generated event handler.
I also tried to see if you could pass a click event on the top-level page to the iframe, but it seems like that doesn't work either - passing the event as the message for postMessage threw an error about MouseEvent objects not being able to be cloned. And JSON.stringifying it completely destroys the useful information that makes it a user click event.
Is my understanding of cross-origin iframes' click listening wrong? If it's not, then how do you capture a user interaction inside the iframe to allow requestStorageAccess to be run? To reiterate, the iframe is on a completely separate domain from the domain that's embedding it.