Question

我目前正在使我的代码与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调用失败...'”，而没有Safari的提示-更令人沮丧的是，它以前可以工作，但现在又开始失败。有什么方法可以调试为什么对requestStorageAccess的调用失败的原因？

我尝试按照the instructions启用ITP调试模式日志，但确实从中获得了一些用处。它一次给了我这个错误：

2018-09-04 15：15：40.930157-0700 0x110c87信息0x0
69100 Safari技术预览：（WebKit） [com.apple.WebKit：ResourceLoadStatisticsDebug]无法授予存储由于example.com的Cookie被第三方阻止，因此可以访问上下文，并且尚未收到作为第一方的用户交互。

但是，当我在第一方上下文中访问它并重新加载页面时，没有其他原因导致对requestStorageAccess的调用失败。如果有人有任何想法，请告诉我您建议我尝试调试的问题。

谢谢！

Answer 1

有更新的调试说明：https://stackoverflow.com/a/61532464/13443904

但是我也想为那些为Safari ITP苦苦挣扎的人们提供一些更具体的步骤，因为它花了很长时间才弄清所有规则。

1）不要在requestStorageAccess内嵌入requestStorageAccess。这会丢失提示请求requestStorageAccess所需的用户交互（单击按钮）。

2）hasStorageAccess和requestStorageAccess是承诺。确保在promise的成功关闭过程中嵌套了任何后续操作（即，如果您有一个提交按钮，请在完成请求requestStorageAccess之前不要让它提交表单）。

3）您必须先设置一个第一方Cookie，并在子域的顶级窗口中与用户进行交互，然后才能通过您子域iframe中的用户交互来请求对第三方Cookie的StorageAccess。在主域/父窗口中设置cookie /互动不起作用。

4）在Safari Technology Preview中进行测试使重置ITP选项变得更加容易-只需清除历史记录并退出/重新打开即可，您应该重新开始。 Safari似乎永远坚持这些价值观。

Answer 2

您是否以第一方身份与您的网站进行互动（点击/点击/表单输入）？仅仅拜访是不够的。用户必须与具有与请求存储访问权限的域相同的eTLD + 1的网页进行交互。

示例： 1）service.example被ITP划分为具有跟踪能力的类别。 2）用户访问来自service.example或* .service.example的页面并与之交互。 3）service.example在用户点击service.example的iframe时在othersite.example下调用Storage Access API。

如何调试Safari ITP 2.0 requestStorageAccess失败

2 个答案: