成功调用 requestStorageAccess() 后，Firefox 存储访问 API 拒绝本地存储

Question

我想测试新的 Firefox Storage Access API 以允许第一方存储（cookie、本地存储、indexeddb 等）到不同域的 iframe（但仍在我的控制之下）。

父标记/代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Parent Domain</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jschannel/1.0.0-git-commit1-8c4f7eb/jschannel.min.js"></script>
    </head>
    <body>
        <div>
            Cookies: <ul class="cookie-data"></ul>
        </div>
        <iframe 
            id="rpc-gateway"
            src="http://child.local:8080/iframe-firefox.html"
            sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"></iframe>
        <script type="text/javascript">            
            var chan = Channel.build({
                window: document.getElementById("rpc-gateway").contentWindow,
                origin: "*",
                scope: "testScope"
            });
        </script>
    </body>
</html>

子 iframe 标记/代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Child Domain</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jschannel/1.0.0-git-commit1-8c4f7eb/jschannel.min.js"></script>
    </head>
    <body>
        <button onClick="onLoginClick()">Login</button>
        <script type="text/javascript">
            var chan = Channel.build({
                window: window.parent,
                origin: "*",
                scope: "testScope"
            });

            let onLoginClick = function(trans, params) {
                document.hasStorageAccess().then(hasAccess => {
                    if (!hasAccess) {
                        console.log("no access - requesting access");
                        return document.requestStorageAccess();
                    }
                }).then(_ => {
                    document.hasStorageAccess().then(hasAccess => {
                        console.log("hasAccess:", hasAccess);
                        window.localStorage.setItem('foo', 'bar');
                    })
                }).catch((err) => {
                    console.log("hasStorageAccess() failed", err);
                });
            };
        </script>
    </body>
</html>

单击子 iframe 中的 "Login" 按钮时，会生成以下日志输出：

no access - requesting access      # iframe-firefox.html:22:25
hasAccess: true      # iframe-firefox.html:27:25
Request to access cookie or storage on “http://child.local:8080/iframe-firefox.html” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.      # iframe-firefox.html:28:24

可见的结论是：

承诺 document.hasStorageAccess() 解决
hasAccess参数最初是'false'
document.requestStorageAccess()的promise返回并解析
第二个承诺 document.hasStorageAccess() 解决
hasAccess 参数现在是 'true'
然而，对本地存储的简单存储访问是不可能的。

我做错了什么？

更多信息：

Firefox 开发者版版本 65.0b9
内容阻止设置：

Answer 1

这似乎是您使用的 Firefox 版本中的错误。我在本地对您拥有的内容进行了测试，在 Firefox 69.0.1（64 位）中，我没有收到任何错误，并且该值存储在本地存储中。当我从 parent iframe 中取出沙箱标志 allow-storage-access-by-user-activation 时，child 无法获得本地存储的权限，因此确认我的设置实际上工作正常。这是我所做的：

为 parent 创建了一个节点。js/Express 服务器：

const express = require('express');
const cors = require('cors');
const path = require('path');
const server = express();

server.use(cors());
server.use(express.static(path.resolve('./public')));

server.listen(8080, function() {
  console.log('listening on *:8080');
});

为 child 创建了一个节点。js/Express 服务器（使用不同端口触发同源策略）：

const express = require('express');
const cors = require('cors');
const path = require('path');
const server = express();

server.use(cors());
server.use(express.static(path.resolve('./public')));

server.listen(8081, function() {
  console.log('listening on *:8081');
});

为 parent 创建了一个 index.html（与您的几乎相同）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Parent Domain</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jschannel/1.0.0-git-commit1-8c4f7eb/jschannel.min.js"></script>
    </head>
    <body>
        <div>
            Cookies: <ul class="cookie-data"></ul>
        </div>
        <iframe
            id="rpc-gateway"
            src="http://127.0.0.1:8081/iframe-firefox.html"
            sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"></iframe>
        <script type="text/javascript">
            var chan = Channel.build({
                window: document.getElementById("rpc-gateway").contentWindow,
                origin: "*",
                scope: "testScope"
            });

            // Added this to try out the JSChannel
            chan.call({
                method: "reverse",
                params: "hello world!",
                success: function(v) {
                    console.log(v);
                }
            });

        </script>
    </body>
</html>

并为 child 创建了 iframe-firefox.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Child Domain</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jschannel/1.0.0-git-commit1-8c4f7eb/jschannel.min.js"></script>
    </head>
    <body>
        <button onClick="onLoginClick()">Login</button>
        <script type="text/javascript">
            var chan = Channel.build({
                window: window.parent,
                origin: "*",
                scope: "testScope"
            });

            // Other end of the JSChannel call
            chan.bind("reverse", function(trans, s) {
                return s.split("").reverse().join("");
            });

            let onLoginClick = function(trans, params) {
                document.hasStorageAccess().then(hasAccess => {
                    if (!hasAccess) {
                        console.log("no access - requesting access");
                        return document.requestStorageAccess();
                    }
                }).then(_ => {
                    document.hasStorageAccess().then(hasAccess => {
                        console.log("hasAccess:", hasAccess);
                        window.localStorage.setItem('foo', 'bar');
                    })
                }).catch((err) => {
                    console.log("hasStorageAccess() failed", err);
                });
            };
        </script>
    </body>
</html>

一切都按预期工作...所以我非常确定问题出在您使用的特定版本的 Firefox Developer Edition 上。

此外，这里有一个 link 到我的设置的压缩包，如果你想在你这边试一试，看看它的工作方式是否与你现有的不同：server.zip

如果还有什么我可以帮忙的，请告诉我。

成功调用 requestStorageAccess() 后，Firefox 存储访问 API 拒绝本地存储

Firefox Storage Access API denies local storage after successful requestStorageAccess() call

javascript

cookies

iframe

firefox

storage-access-api

父标记/代码

子 iframe 标记/代码