JS `Storage Access API` (提案)：解决第三方 Cookie 限制下的跨域存储

各位观众老爷，大家好！我是今天的主讲人，咱们今天聊点刺激的——JS Storage Access API。

相信大家都被第三方 Cookie 这玩意儿折磨过，尤其是搞广告、数据分析的兄弟们。浏览器动不动就给你禁了，辛辛苦苦埋的点，瞬间失效，简直是噩梦。

别慌，Storage Access API 就是来拯救世界的！它提供了一种更优雅、更安全的方式，让咱们在第三方上下文中访问存储，还不用再求爷爷告奶奶地跟浏览器斗智斗勇。

一、第三方 Cookie 的爱恨情仇

首先，咱们得搞清楚第三方 Cookie 到底是个啥，为啥浏览器要这么针对它。

简单来说，Cookie 就是服务器存在你浏览器里的小纸条，用来记住你的身份、偏好啥的。

第一方 Cookie: 你访问 example.com，example.com 种下的 Cookie，就是第一方 Cookie。它属于自家地盘，随便用，浏览器一般不会管。
第三方 Cookie: 你访问 example.com，但是页面里嵌入了来自 ad-server.com 的资源（比如广告），ad-server.com 种下的 Cookie，就是第三方 Cookie。

第三方 Cookie 的问题在于，它可以跨站点追踪用户，你在 A 网站看了啥，B 网站也知道，细思极恐！这就侵犯了用户的隐私，所以浏览器们开始收紧第三方 Cookie 的政策。

浏览器	第三方 Cookie 策略
Chrome	逐步淘汰第三方 Cookie，计划用 Privacy Sandbox 替代。目前有 Tracking Protection 功能，限制第三方 Cookie。
Firefox	默认阻止第三方跟踪器，包括第三方 Cookie。
Safari	全面阻止第三方 Cookie。
Edge	提供 Tracking Prevention 功能，可以设置为 Basic、Balanced、Strict 三种模式，控制第三方 Cookie 的行为。

二、Storage Access API：曲线救国

既然第三方 Cookie 限制越来越严，咱们就得另辟蹊径。 Storage Access API 就是这么个好东西，它允许咱们在第三方 iframe 中，经过用户授权后，访问顶层域的存储（比如 Cookie、localStorage、IndexedDB）。

核心思想：

用户授权： 不再偷偷摸摸地种 Cookie，而是明明白白地告诉用户：“老铁，我想访问你的存储，可以吗？”，用户同意了才能访问。
安全性： API 设计充分考虑了安全性，防止恶意站点滥用存储权限。

三、Storage Access API 的用法

Storage Access API 主要涉及以下几个方法：

document.hasStorageAccess()： 检查当前上下文是否已经获得了存储访问权限。

async function checkStorageAccess() {
  try {
    const hasAccess = await document.hasStorageAccess();
    console.log("已经获得存储访问权限:", hasAccess);
    return hasAccess;
  } catch (error) {
    console.error("检查存储访问权限出错:", error);
    return false;
  }
}

这个方法返回一个 Promise，resolve 的结果是 true 或 false，表示是否已经获得了存储访问权限。注意，这个方法本身不会发起权限请求，只是检查一下状态。

document.requestStorageAccess()： 请求存储访问权限。

async function requestStorageAccess() {
  try {
    const hasAccess = await document.requestStorageAccess();
    console.log("请求存储访问权限成功:", hasAccess);
    return hasAccess;
  } catch (error) {
    console.error("请求存储访问权限失败:", error);
    if (error.name === 'NotAllowedError') {
      console.warn("用户拒绝了存储访问权限.");
    } else {
      console.error("请求存储访问权限出错:", error);
    }
    return false;
  }
}

这个方法会弹出一个权限请求提示框，询问用户是否允许当前 iframe 访问顶层域的存储。用户可以选择允许或拒绝。如果用户允许，Promise resolve 的结果是 true；如果用户拒绝，Promise reject，错误类型是 NotAllowedError。

navigator.webkitTemporaryStorage.queryUsageAndQuota() (Safari): Safari 使用 webkitTemporaryStorage API 来管理存储权限，这个方法可以查询当前域名下的存储使用情况和配额。

if (navigator.webkitTemporaryStorage) {
  navigator.webkitTemporaryStorage.queryUsageAndQuota(
    function(usage, quota) {
      console.log('Used quota: ' + usage +
                  ' bytes, available quota: ' + quota +
                  ' bytes');
    },
    function(e) {
      console.log('Error getting storage info: ' + e);
    }
  );
}

注意： Safari 的 Storage Access API 行为有些特殊，需要额外处理，后面会详细讲。

四、实战演练：一个简单的 Demo

咱们来写一个简单的 Demo，演示如何在第三方 iframe 中使用 Storage Access API。

场景：

parent.com：主站，包含一个 iframe。
iframe.com：iframe 里的页面，需要访问 parent.com 的 localStorage。

parent.com 的代码：

<!DOCTYPE html>
<html>
<head>
  <title>Parent Site</title>
</head>
<body>
  <h1>Parent Site</h1>
  <iframe src="https://iframe.com/iframe.html"></iframe>
  <script>
    localStorage.setItem('parentData', 'Hello from parent!');
  </script>
</body>
</html>

iframe.com/iframe.html 的代码：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe Site</title>
</head>
<body>
  <h1>Iframe Site</h1>
  <button id="getDataButton">Get Data from Parent</button>
  <div id="dataDisplay"></div>

  <script>
    const getDataButton = document.getElementById('getDataButton');
    const dataDisplay = document.getElementById('dataDisplay');

    async function getDataFromParent() {
      let hasAccess = await document.hasStorageAccess();
      if (!hasAccess) {
        hasAccess = await document.requestStorageAccess();
      }

      if (hasAccess) {
        try {
          const parentData = localStorage.getItem('parentData');
          dataDisplay.textContent = 'Data from parent: ' + parentData;
        } catch (error) {
          console.error("访问 localStorage 出错:", error);
          dataDisplay.textContent = 'Error accessing parent data.';
        }
      } else {
        dataDisplay.textContent = 'Storage access denied.';
      }
    }

    getDataButton.addEventListener('click', getDataFromParent);
  </script>
</body>
</html>

代码解释：

parent.com 在 localStorage 中设置了一个名为 parentData 的值。
iframe.com 的页面加载后，点击按钮会触发 getDataFromParent 函数。
getDataFromParent 函数首先检查是否已经获得了存储访问权限。
如果没有，就调用 document.requestStorageAccess() 请求权限，弹出提示框。
如果获得了权限，就尝试从 localStorage 中读取 parentData 的值，并显示在页面上。
如果用户拒绝了权限，或者访问 localStorage 时出错，就在页面上显示错误信息。

运行效果：

打开 parent.com。
iframe 里的页面会显示一个按钮 "Get Data from Parent"。
点击按钮，浏览器会弹出权限请求提示框。
如果选择 "Allow"，iframe 页面会显示 "Data from parent: Hello from parent!"。
如果选择 "Block"，iframe 页面会显示 "Storage access denied."。

五、兼容性问题和 Safari 的特殊处理

Storage Access API 的兼容性还不是特别完美，需要注意以下几点：

浏览器支持： Chrome、Firefox、Safari 都有不同程度的支持。具体情况可以参考 MDN 文档。
Safari 的限制： Safari 对 Storage Access API 的限制比较严格。
- 用户交互： document.requestStorageAccess() 必须在用户交互后才能调用，比如点击事件。
- 有效期： Safari 授予的存储访问权限不是永久的，可能会在用户离开网站一段时间后失效。
- webkitTemporaryStorage API: 需要配合 navigator.webkitTemporaryStorage.queryUsageAndQuota() 来检查存储配额。

Safari 的特殊处理方案：

async function getDataFromParentForSafari() {
  if (navigator.webkitTemporaryStorage) {
    navigator.webkitTemporaryStorage.queryUsageAndQuota(
      async function(usage, quota) {
        if (quota > 0) {
          // 已经有存储配额，尝试访问 localStorage
          try {
            const parentData = localStorage.getItem('parentData');
            dataDisplay.textContent = 'Data from parent: ' + parentData;
          } catch (error) {
            console.error("访问 localStorage 出错:", error);
            dataDisplay.textContent = 'Error accessing parent data.';
          }
        } else {
          // 没有存储配额，需要请求存储访问权限
          let hasAccess = await document.hasStorageAccess();
          if (!hasAccess) {
            hasAccess = await document.requestStorageAccess();
          }

          if (hasAccess) {
            // 再次尝试访问 localStorage
            try {
              const parentData = localStorage.getItem('parentData');
              dataDisplay.textContent = 'Data from parent: ' + parentData;
            } catch (error) {
              console.error("访问 localStorage 出错:", error);
              dataDisplay.textContent = 'Error accessing parent data.';
            }
          } else {
            dataDisplay.textContent = 'Storage access denied.';
          }
        }
      },
      function(e) {
        console.log('Error getting storage info: ' + e);
        dataDisplay.textContent = 'Error getting storage info.';
      }
    );
  } else {
    // 非 Safari 浏览器，使用标准 Storage Access API
    let hasAccess = await document.hasStorageAccess();
    if (!hasAccess) {
      hasAccess = await document.requestStorageAccess();
    }

    if (hasAccess) {
      try {
        const parentData = localStorage.getItem('parentData');
        dataDisplay.textContent = 'Data from parent: ' + parentData;
      } catch (error) {
        console.error("访问 localStorage 出错:", error);
        dataDisplay.textContent = 'Error accessing parent data.';
      }
    } else {
      dataDisplay.textContent = 'Storage access denied.';
    }
  }
}

六、最佳实践和注意事项

用户体验至上： 在请求存储访问权限之前，应该向用户解释清楚为什么要访问存储，以及访问存储的好处。避免给用户带来不必要的困扰和反感。
错误处理： 妥善处理 document.requestStorageAccess() reject 的情况，比如用户拒绝了权限，或者浏览器不支持 Storage Access API。
渐进增强： 不要依赖 Storage Access API 作为唯一的存储方案。应该提供备选方案，比如使用 postMessage 进行跨域通信。
安全性： Storage Access API 旨在提高安全性，但也需要注意防范 XSS 攻击。对从 localStorage 读取的数据进行适当的转义，避免直接插入到 HTML 中。
隐私合规： 在使用 Storage Access API 的同时，也要遵守相关的隐私法规，比如 GDPR、CCPA。确保用户的数据得到妥善保护。
测试： 在不同的浏览器和设备上进行充分的测试，确保 Storage Access API 的行为符合预期。

七、Storage Access API 的未来

Storage Access API 还在不断发展完善中。随着浏览器厂商对隐私保护的日益重视，Storage Access API 的地位将越来越重要。掌握 Storage Access API，将有助于咱们在第三方 Cookie 限制的大环境下，继续开展业务，实现可持续发展。

总结：

特性	描述
用户授权	必须经过用户明确授权才能访问存储。
跨域访问	允许在第三方 iframe 中访问顶层域的存储。
兼容性	需要考虑浏览器兼容性，特别是 Safari 的特殊处理。
安全性	注意防范 XSS 攻击，确保数据安全。
隐私合规	遵守相关的隐私法规，保护用户数据。
替代方案	提供备选方案，比如使用 `postMessage` 进行跨域通信。
方法	`document.hasStorageAccess()`：检查是否已获得权限；`document.requestStorageAccess()`：请求权限; `navigator.webkitTemporaryStorage.queryUsageAndQuota()`(Safari)：查询存储配额。

好了，今天的讲座就到这里。感谢各位的观看！希望 Storage Access API 能帮助大家摆脱第三方 Cookie 的困扰，在数据海洋里自由翱翔！各位，下课！

发表回复 取消回复

发表回复取消回复