From dfd93732c8f1e18fdd6a80904a1a6a11906eb048 Mon Sep 17 00:00:00 2001
From: Marko Bencun <marko@shiftcrypto.ch>
Date: Sun, 13 Jul 2025 17:25:24 +0200
Subject: [PATCH] add section about Storage Access API required for third-party
 cookies by WebKit/Safari

See
https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/.

This allows testing if cookies work with and without using the Storage
Access API.
---
 public/index.php  |  9 +++++++++
 public/js/main.js | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/public/index.php b/public/index.php
index 74921d7..3d581b1 100644
--- a/public/index.php
+++ b/public/index.php
@@ -148,6 +148,15 @@ function displayUrl($url, $main) {
         See also some <a href="https://<?= $main; ?>/quirks/">known browser quirks</a>.
       </p>
 
+      <p>
+        Implicit Third-party cookies are <a href="https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/" target="_blank">fully blocked</a>
+        by WebKit as of iOS 13.4 and Safari 13.1, so this site is not expected to be able to set cookies if embeded in an iframe in a third-party.
+        The linked article explains that calling `document.requestStorageAccess();` is necessary to request permission to use cookies in this context.
+        <div id="hasStorageAccessResult"></div>
+        <button onClick="doRequestStorageAccess()">Request storage access</button>
+        <div id="requestStorageAccessResult"></div>
+      </p>
+
       <article>
         <a class="reload" href="" title="Reload">↻</a>
 <?php
diff --git a/public/js/main.js b/public/js/main.js
index 2865636..5215421 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -113,3 +113,28 @@ function callFetch() {
     }
   });
 }
+
+function doRequestStorageAccess() {
+  let resultDiv = document.querySelector('#requestStorageAccessResult');
+  resultDiv.innerHTML = 'Requesting...';
+  document.requestStorageAccess().then(
+    () => {
+      resultDiv.innerHTML = 'Cookie access granted';
+    },
+    () => {
+      resultDiv.innerHTML = 'Cookie access denied';
+    },
+  );
+}
+
+window.addEventListener('load', function() {
+  let resultDiv = document.querySelector('#hasStorageAccessResult');
+  document.hasStorageAccess().then(
+    (hasAccess) => {
+      resultDiv.innerHTML = "<b>hasStorageAccess result: </b>" + hasAccess.toString();
+    },
+    function (reason) {
+      resultDiv.innerHTML = "<b>hasStorageAccess failed with: </b>" + reason.toString();
+    }
+  );
+});