gpt4 book ai didi

javascript - 成功 requestStorageAccess() 调用后,Firefox Storage Access API 拒绝本地存储

转载 作者:行者123 更新时间:2023-12-03 11:19:16 32 4
gpt4 key购买 nike

我想测试新的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 中单击“登录”按钮时,会生成以下日志输出:
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

可见的结论是:
  • promise document.hasStorageAccess() 解析
  • hasAccess 参数最初为“假”
  • document.requestStorageAccess() 的 promise 返回并解析
  • 第二个 promise document.hasStorageAccess() 解析
  • hasAccess 参数现在为 'true'
  • 然而,对本地存储的简单存储访问是不可能的。

  • 我做错了什么?

    更多信息:
  • Firefox 开发者版 65.0b9
  • 内容屏蔽设置:Content Blocking Setting
  • 最佳答案

    这似乎是您使用的 Firefox 版本中的一个错误。我在本地设置了您所拥有的测试,在 Firefox 69.0.1(64 位)中,我没有收到任何错误,并且该值存储到本地存储中。当我拿沙盒标志allow-storage-access-by-user-activation在父 iframe 之外, child 未能获得本地存储权限,因此确认我的设置实际上工作正常。这是我所做的:

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

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

    并为 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 上。

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

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

    关于javascript - 成功 requestStorageAccess() 调用后,Firefox Storage Access API 拒绝本地存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54150021/

    32 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com