Safari ITP 影响实验

在本实验的第一部分，我们将创建一个简单的测试应用程序来演示 Safari ITP 如何影响第三方 Cookie 和 localStorage。

测试应用

下面是一个交互式测试应用程序，它将帮助我们理解 ITP 的行为：

<div class="test-container">
  <div class="test-section">
    <h3>第三方 Cookie 测试</h3>
    <button id="setThirdPartyCookie">设置第三方 Cookie</button>
    <button id="readThirdPartyCookie">读取第三方 Cookie</button>
    <div id="thirdPartyCookieResult"></div>
  </div>

  <div class="test-section">
    <h3>localStorage 测试</h3>
    <button id="setLocalStorage">设置 localStorage 项</button>
    <button id="readLocalStorage">读取 localStorage 项</button>
    <div id="localStorageResult"></div>
  </div>

  <div class="test-section">
    <h3>跨站点请求测试</h3>
    <button id="makeCrossSiteRequest">发送跨站点请求</button>
    <div id="crossSiteRequestResult"></div>
  </div>
</div>

<script>
  // 第三方 Cookie 测试
  document.getElementById('setThirdPartyCookie').addEventListener('click', () => {
    try {
      document.cookie = "testCookie=value; domain=.example.com; path=/";
      document.getElementById('thirdPartyCookieResult').textContent = 
        "Cookie 设置成功。请检查 Safari 的开发者工具以查看是否被阻止。";
    } catch (e) {
      document.getElementById('thirdPartyCookieResult').textContent = 
        "设置 Cookie 时出错：" + e.message;
    }
  });

  document.getElementById('readThirdPartyCookie').addEventListener('click', () => {
    const cookies = document.cookie;
    document.getElementById('thirdPartyCookieResult').textContent = 
      "当前 Cookie：" + cookies;
  });

  // localStorage 测试
  document.getElementById('setLocalStorage').addEventListener('click', () => {
    try {
      localStorage.setItem('testKey', 'testValue');
      document.getElementById('localStorageResult').textContent = 
        "localStorage 项设置成功";
    } catch (e) {
      document.getElementById('localStorageResult').textContent = 
        "设置 localStorage 时出错：" + e.message;
    }
  });

  document.getElementById('readLocalStorage').addEventListener('click', () => {
    try {
      const value = localStorage.getItem('testKey');
      document.getElementById('localStorageResult').textContent = 
        "localStorage 值：" + value;
    } catch (e) {
      document.getElementById('localStorageResult').textContent = 
        "读取 localStorage 时出错：" + e.message;
    }
  });

  // 跨站点请求测试
  document.getElementById('makeCrossSiteRequest').addEventListener('click', async () => {
    try {
      const response = await fetch('https://api.example.com/test', {
        credentials: 'include'
      });
      const data = await response.json();
      document.getElementById('crossSiteRequestResult').textContent = 
        "请求成功。请检查网络面板以查看详细信息。";
    } catch (e) {
      document.getElementById('crossSiteRequestResult').textContent = 
        "发送请求时出错：" + e.message;
    }
  });
</script>

<style>
  .test-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .test-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  button {
    margin: 5px;
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
  #thirdPartyCookieResult,
  #localStorageResult,
  #crossSiteRequestResult {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
  }
</style>

如何使用

打开 Safari 的开发者工具（开发 > 显示 Web 检查器）
转到存储面板以监控 Cookie 和 localStorage
转到网络面板以监控跨站点请求
点击按钮执行不同的测试
观察 ITP 如何影响每个操作

需要注意什么

第三方 Cookie 测试：
- 检查 Cookie 是否成功设置
- 查看控制台中是否有警告
- 检查 Cookie 是否被分区
localStorage 测试：
- 验证 localStorage 操作是否有效
- 检查数据是否在页面重新加载后保持
- 查找任何存储访问错误
跨站点请求测试：
- 监控请求头
- 检查是否包含凭证
- 查找任何 CORS 或 ITP 相关错误

下一步

继续第二部分

测试第三方 Cookie 和 localStorage

测试应用

如何使用

需要注意什么

下一步