Storage Access API doesn't work with Safari?

Question

I'm working on a Sharepoint SPFx project, which has an Iframe embedding content from our server. The issue is Safari blocking third-party cookies with Prevent Cross-site Tracking settings, which disallows iframe content to be shown on my Sharepoint page. The target is to work around without forcing users to manually disable the setting. I tried to follow instruction from MDN and Webkit, also from posts around here, but none works.

Applying the code to the project, document.hasStorageAccess() always return true on Safari code from instruction, but still the content is not shown. The target is to show click button when there's no access, and hide button when the access is already granted.

This is how i tried to work with it following instruction:

protected doThingsWithFirstPartyStorageAccess(): void {
    document.cookie = "foo=bar";
    localStorage.setItem("accessStatus", "accessed")
  }

 protected getAccessToFirstPartyStorage(): void {
   const clickBtn = document.getElementById("btn");

   if (typeof document.hasStorageAccess === 'function'
     && typeof document.requestStorageAccess === 'function') {
       //trying to work around with Chrome not supporting these
     
     if (document.hasStorageAccess === null) {
       document.getElementById("btn").style.display = "none" 
         console.log("This browser doesn't support")
     } else {
       document.hasStorageAccess().then((hasAccess) => {
         if (hasAccess) {
           clickBtn.style.display = "none"
           this.doThingsWithFirstPartyStorageAccess()
             console.log("Already have access")
         } else {
           clickBtn.style.display = "block"
             console.log("no access, need requesting")
           clickBtn.addEventListener ('click', () => {
            document.requestStorageAccess().then(() => {
               this.doThingsWithFirstPartyStorageAccess()
                   console.log("Now it should have access")
               }).catch((err) => {
               console.log("Error obtaining storage access", err)
             })
           })
         }
       })
     }
   } 
 }

This is the render. I planned to call getAccessToFirstPartyStorage() function right when rendering. The src of iframe is basically submitted through a form:

public render(): void {  

  this.getAccessToFirstPartyStorage()

  this.domElement.innerHTML = `
    <section id="iframeID" class=" 
        ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}"
      >      
       <iframe id="iframeElemID"></iframe>
       <button id="btn">
         Allow Access Cookies
       </button>  
    </section>`;

I'm new to this, any opinions to fix this broken code are all welcomed.

Storage Access API doesn't work with Safari?

0 Answers0