11

我想测试新的Firefox 存储访问 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 中单击“登录”按钮时，会生成以下日志输出：

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 参数最初为“假”
  • document.requestStorageAccess() 的承诺被返回并解决
  • 第二个承诺 document.hasStorageAccess() 解决
  • hasAccess 参数现在为“true”
  • 然而，对本地存储的简单存储访问是不可能的。

我做错了什么？

更多信息：

  • Firefox 开发者版 65.0b9
  • 内容屏蔽设置：内容屏蔽设置
4

1 回答 1

3

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

为父级创建了一个 Node.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');
});

为孩子创建了一个 Node.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');
});

为父级创建了一个 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>

并为孩子创建了 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 上。

此外，如果您想在最后尝试一下，看看这是否与您所拥有的不同，这里是我设置的 zip 的链接：server.zip

让我知道是否还有其他我可以提供的帮助。

于 2019-10-08T09:26:45.380 回答