Safari : LiveView don't work in iframe, websocket error

Hi everyone,

I’m resurrecting a problem that has already been raised, but how do I get Phoenix Liveview to work in an iframe on Safari?

The problem is: by default Safari blocks cookies from an iframe, which seems to block the Phoenix websocket connection: {response: {reason: "stale"}, status: "error"} . Resulting in a frozen page, even when the iframe works on every other browser.

I found a first piece of solution in a link shared in this old topic (that I did not dare to necropost) → Safari Websocket Connection Problems in iframe - endless reload - #4 by Waschti

This script (from Safari iframe cookie workaround · GitHub 's comments) :

<script>
  // Safari now suddenly blocks iframe cookie access, so we need to call this during some user interaction
  function safariFix() {
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
      document.requestStorageAccess().then(() => {
          // Now we have first-party storage access!
          console.log("Got cookie access for Safari workaround");
          // Let's access some items from the first-party cookie jar
          document.cookie = "foo=bar";              // drop a test cookie
        },  () => { console.log('access denied') }).catch((error) => {
          // error obtaining storage access.
          console.log("Could not get access for Safari workaround: " + error);
        });
      }
  }
</script>

Allows you to create a cookie and bypassing the blocking. But I don’t understand how this could allow me to make my websocket work?

Any idea to help me ? Thanks in advance.