javascript - 如何调试 Safari ITP 2.0 requestStorageAccess 失败
问题描述
我目前正在努力使我的代码与Safari ITP 2.0兼容。在 onClick 触发的方法中,我的代码类似于以下代码:
if (document.hasStorageAccess && document.requestStorageAccess) {
console.log('On Safari 12');
document.hasStorageAccess().then(
function successful(hasAccess) {
console.log('Testing if hasAccess');
if (hasAccess) {
console.log('Access granted already');
} else {
console.log('Requesting access');
document.requestStorageAccess().then(
function successful() {
console.log('Access request was a success');
window.location.reload();
},
function fail() {
console.log('Storage Access API call failed...');
});
}
},
function rejected(reason) {
console.log('hasStorageAccess failed: ', reason);
});
}
然而,运行它会得到日志语句“'Storage Access API call failed...'”而没有来自 Safari 的提示 - 更令人沮丧的是它以前工作但现在又开始失败了。有什么方法可以调试 requestStorageAccess 调用失败的原因?
我尝试按照说明启用 ITP 调试模式日志,我确实从中得到了一些用处。它给了我一次这个错误:
2018-09-04 15:15:40.930157-0700 0x110c87 信息 0x0
69100 Safari 技术预览:(WebKit) [com.apple.WebKit:ResourceLoadStatisticsDebug] 无法授予对 example.com 的存储访问权限,因为它的 cookie 在第三方上下文中被阻止并且它没有作为第一方接收用户交互。
但是当我在第一方上下文中访问它并重新加载页面时,我没有进一步的理由说明对 requestStorageAccess 的调用失败了。如果有人有任何想法,请告诉我您对我尝试调试问题的建议。
谢谢!
解决方案
有更新的调试说明:https ://stackoverflow.com/a/61532464/13443904
但我也想为那些在 Safari ITP 中苦苦挣扎的人提供一些更具体的步骤,因为弄清楚所有规则需要很长时间。
1) 不要在 hasStorageAccess 中嵌入 requestStorageAccess。这会丢失提示 requestStorageAccess 所需的用户交互(按钮单击)。
2) hasStorageAccess 和 requestStorageAccess 是承诺。确保任何后续操作都嵌套在 Promise 的成功闭包中(即,如果您有提交按钮,在您完成请求 requestStorageAccess 之前不要让它提交表单)。
3) 您必须先设置第一方 cookie 并在子域的顶级窗口中进行用户交互,然后才能通过子域的 iframe 中的用户交互请求第三方 cookie 的存储访问权限。在主域/父窗口中设置 cookie/交互不计算在内。
4) Safari Technology Preview 中的测试使重置 ITP 选项更容易 - 只需清除历史记录并退出/重新打开,您就应该重新开始。Safari 似乎永远坚持这些价值观。
推荐阅读
- c++ - 如何让我的 m_refcount 变量打印出我想要的值而不是垃圾?
- elasticsearch - Elasticsearch:匹配和过滤器中的术语有什么区别?
- rust - 为什么 Vec 不实现 Iterator 特征?
- python-3.x - 基于列值进行过滤后的 Pandas Groupby
- opengl - 图形驱动程序不支持 OpenGL 2.1 版,可能需要更新
- docker - 如何将端口公开给主机的临时端口并将其绑定到 localhost
- react-native - 如何将 Assets 文件夹中的压缩文件复制到 DocumentDirectoryPath?
- c# - 运行多个服务器网站时出现端口错误
- amazon-web-services - ECS滚动更新时,ALB如何请求健康检查?
- python - 如何获取在另一台机器上运行的作业的状态?