Please tell me how to use Storage Access API correctly

JunItoMixi commented 4 years ago

I am testing on iOS13.4 Safari. I found in the document below that 3rd-Party cookies are blocked. https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/ I tried option 2 storage access API, but storage access was denied. My goal is to get permission with requestStorageAccess () and read / write third party cookies.

I created a simple demo site. it's here http://firstjun33930.com/test_iframe_parent/parent.php When you press the UserAction button, console.log always passes "Storage Access Denied".

The contents of the code are as follows.

firstjun33930.com/test_iframe_parent/parent.php

<?php
setcookie("1st-party-cookie", "hoge", time() + 86400);
?>
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<html>
  <head>
    <meta charset="UTF-8" />
    <title>iframe test</title>
  </head>
  <body>
    <div>
      parent.php
    </div>
    <ul>
      <li><a href="http://reoito.com/test_iframe_child/first_party_cookie.php">first party cookie set in reoito.com</a></li>
    </ul>
    <div>
      cookie:
    </div>
    <div>
        <pre><?=htmlspecialchars(print_r($_COOKIE), ENT_QUOTES)?></pre>
    </div>
    <div>
        <iframe src="http://reoito.com/test_iframe_child/child.php"
                sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"
                width="100%"
                height="400"
        >
        </iframe>
  </body>
</html>

reoito.com/test_iframe_child/child.php

<?php

setcookie("3rd-party-reoito.com", "hoge", time() + 86400);

?>
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<html>
  <head>
    <meta charset="UTF-8" />
    <title>iframe test</title>
  </head>
  <body>
    <div>
      child.php
    </div>
    <div>
      cookie:
    </div>
    <div>
        <pre><?=htmlspecialchars(print_r($_COOKIE), ENT_QUOTES)?></pre>
    </div>
    <div>
        <button onclick="makeRequestWithUserGesture()">UserAction</button>
    </div>

    <script>
        function makeRequestWithUserGesture() {
            var promise = document.hasStorageAccess();
            promise.then(
                function (hasAccess) {
                    // Boolean hasAccess says whether the document has access or not.
                    console.log("hasStorageAccess:"+ hasAccess);

                    if (!hasAccess) {
                        var promise = document.requestStorageAccess();
                        promise.then(
                            function () {
                                // Storage access was granted.
                                console.log("Storage access was granted");
                            },
                            function () {
                                // Storage access was denied.
                                console.log("Storage access was denied");
                            }
                        );
                    }
                },
                function (reason) {
                    // Promise was rejected for some reason.
                    console.log("rejected for some reason:"+reason);
                }
            );
        }
    </script>
  </body>
</html>

johnwilander commented 4 years ago

Hi! This GitHub repository is for working on standardization of the Storage Access API. For Safari/WebKit specific questions of issues, please file a bug at https://bugs.webkit.org. Thanks!

JunItoMixi commented 4 years ago

Thank you for your reply. This closes.

privacycg / storage-access

Please tell me how to use Storage Access API correctly #19