JS `Cross-Origin Resource Leakage` (跨域资源泄露) 通过计时攻击

Alright, buckle up everyone,因为今天要讲的东西，可能会让你对浏览器的安全性产生新的认识。我们今天要聊的是一个听起来有点吓人的东西：跨域资源泄露（Cross-Origin Resource Leakage），以及它如何通过计时攻击（Timing Attacks）来实现。

想象一下，你的浏览器就像一个有很多房间的大房子。每个房间代表一个不同的网站，它们之间应该彼此隔离，互不干扰。但是，如果房子里有秘密通道，坏人就可以偷偷地从一个房间窥视另一个房间的信息。这就是跨域资源泄露想要解决的问题。

什么是跨域资源泄露？

简单来说，跨域资源泄露是指攻击者可以利用浏览器的特性，绕过同源策略（Same-Origin Policy），从而窃取其他网站的敏感信息。同源策略是浏览器安全的核心，它限制了来自不同源的文档或脚本之间的交互。

但是，同源策略并非完美无缺。某些HTML标签，比如<script>, <img>, <iframe>等，可以跨域加载资源。虽然浏览器禁止JavaScript直接访问这些跨域资源的内容，但攻击者可以通过一些巧妙的手段，间接地推断出关于这些资源的信息。

计时攻击：泄露信息的秘密武器

计时攻击是一种利用程序执行时间差异来推断信息的攻击方式。在跨域资源泄露的场景下，攻击者可以通过测量加载跨域资源所需的时间，来推断出资源的内容，甚至用户的信息。

举个例子：历史记录嗅探（History Sniffing）

这是一个经典的计时攻击例子。假设我们要判断用户是否访问过某个网站，比如https://example.com。我们可以尝试加载一个<img>标签，指向这个网站上的一个资源。

<img src="https://example.com/some_image.jpg" onload="handleLoad()" onerror="handleError()">

<script>
  let startTime;

  function startTimer() {
    startTime = performance.now();
  }

  function handleLoad() {
    const endTime = performance.now();
    const loadTime = endTime - startTime;
    console.log("加载成功，耗时：", loadTime);
    // 如果加载时间很短，可能说明浏览器缓存了该资源，用户可能访问过该网站
    if (loadTime < 50) { // 这是一个阈值，需要根据实际情况调整
      console.log("用户可能访问过 example.com");
    }
  }

  function handleError() {
    const endTime = performance.now();
    const loadTime = endTime - startTime;
    console.log("加载失败，耗时：", loadTime);
  }

  startTimer();
</script>

代码解释：

<img>标签： 我们使用<img>标签加载目标网站的图片。
onload和onerror事件： onload事件在图片加载成功后触发，onerror事件在加载失败后触发。
performance.now()： 这个函数可以提供高精度的时间戳，用于测量加载时间。
startTimer()： 记录开始时间。
handleLoad()： 计算加载成功的时间，如果时间很短，可能说明浏览器缓存了该图片，用户可能访问过example.com。
handleError()： 计算加载失败的时间。

原理：

如果用户之前访问过https://example.com，浏览器可能会缓存该网站的资源。当我们再次尝试加载相同的资源时，浏览器可以直接从缓存中读取，加载速度会非常快。相反，如果用户没有访问过该网站，浏览器需要从服务器下载资源，加载速度会慢很多。

通过测量加载时间，我们可以推断出用户是否访问过https://example.com。

更复杂的例子：利用CSS选择器计时攻击

这种攻击方式更加隐蔽，它利用了CSS选择器的执行时间差异。假设目标网站有一个秘密页面，只有特定用户才能访问。我们可以尝试通过CSS选择器来判断用户是否具有访问该页面的权限。

<!DOCTYPE html>
<html>
<head>
<title>CSS Timing Attack</title>
<style>
  #secret-content {
    display: none; /* 默认隐藏 */
  }

  body.authorized #secret-content {
    display: block; /* 如果body有.authorized类，则显示 */
  }
</style>
</head>
<body>
  <div id="secret-content">
    This is a secret!
  </div>

  <script>
    function checkAuthorization() {
      const startTime = performance.now();
      // 尝试添加一个只有授权用户才有的类名
      document.body.classList.add('authorized');

      // 等待一段时间，让CSS选择器生效
      setTimeout(() => {
        const endTime = performance.now();
        const timeTaken = endTime - startTime;

        // 移除类名，清理状态
        document.body.classList.remove('authorized');

        if (timeTaken > 100) { // 阈值需要根据实际情况调整
          console.log("用户没有权限访问秘密页面");
        } else {
          console.log("用户可能有权限访问秘密页面");
        }
      }, 50); // 延迟时间需要调整
    }

    checkAuthorization();
  </script>
</body>
</html>

代码解释：

#secret-content： 一个默认隐藏的<div>元素，代表秘密内容。
CSS样式： 如果<body>元素拥有authorized类名，#secret-content将会显示。
checkAuthorization()： 函数用于检测用户是否具有访问权限。
document.body.classList.add('authorized')： 尝试给<body>元素添加authorized类名。
setTimeout()： 延迟一段时间，让CSS选择器生效。
timeTaken： 计算添加类名到CSS样式生效所需要的时间。

原理：

如果用户具有访问秘密页面的权限，服务器可能会在<body>元素上添加一个特定的类名，比如authorized。当我们的攻击代码尝试添加相同的类名时，由于类名已经存在，CSS选择器会立即生效，所需时间会很短。

相反，如果用户没有访问权限，<body>元素上没有authorized类名，CSS选择器需要花费更多的时间来添加和应用样式。

通过测量时间差异，我们可以推断出用户是否具有访问秘密页面的权限。

更高级的攻击：利用服务工作线程（Service Workers）

服务工作线程是一种在浏览器后台运行的JavaScript脚本，它可以拦截网络请求，并提供缓存功能。攻击者可以利用服务工作线程来进行更复杂的计时攻击。

例如，攻击者可以注册一个服务工作线程，拦截对某个跨域资源的请求。服务工作线程可以根据用户的身份或其他信息，选择性地缓存该资源。然后，攻击者可以通过计时攻击来判断服务工作线程是否缓存了该资源，从而推断出关于用户的信息。

如何防御跨域资源泄露？

防御跨域资源泄露需要从多个方面入手：

CORS（Cross-Origin Resource Sharing）： 正确配置CORS头，限制跨域资源的访问。服务器应该只允许来自信任域的请求。
Subresource Integrity (SRI)： 使用SRI确保加载的第三方资源没有被篡改。通过SRI，浏览器可以验证资源的哈希值，防止恶意代码注入。
隔离Origin： 使用Cross-Origin Opener Policy (COOP)和Cross-Origin Embedder Policy (COEP)来隔离你的站点。 COOP确保你的站点在一个新的浏览上下文组中运行，COEP要求嵌入的资源必须声明跨域允许。
限制计时精度： 降低performance.now()的精度，使计时攻击更加困难。但是，这可能会影响一些需要高精度计时的应用程序。
内容安全策略（CSP）： 使用CSP限制可以加载的资源类型和来源。例如，可以禁止加载来自未知域的脚本。
避免敏感信息泄露： 避免在URL中传递敏感信息，比如用户ID、密码等。
随机化和填充： 在响应中添加随机数据和填充，使计时攻击更加困难。
Feature Policy (Permissions Policy)： 使用Feature Policy限制某些浏览器功能的访问，比如地理位置、麦克风等。

总结：

跨域资源泄露是一种复杂的安全问题，它利用了浏览器的特性和计时攻击来实现。防御这种攻击需要从多个方面入手，包括正确配置CORS、使用SRI、隔离Origin、限制计时精度、使用CSP等。

一些表格总结：

攻击方式	描述	防御措施
历史记录嗅探	通过测量加载时间判断用户是否访问过某个网站。	1. 使用CORS限制跨域资源的访问。2. 避免在URL中传递敏感信息。3. 降低`performance.now()`的精度。
CSS选择器计时攻击	通过测量CSS选择器的执行时间判断用户是否具有特定权限。	1. 避免在CSS中使用过于复杂的选择器。2. 使用CORS限制跨域资源的访问。3. 随机化和填充响应数据。
服务工作线程计时攻击	利用服务工作线程拦截网络请求，并根据用户的身份选择性地缓存资源，然后通过计时攻击来判断是否缓存了该资源。	1. 限制服务工作线程的权限。2. 使用CORS限制跨域资源的访问。3. 随机化和填充响应数据。4. 使用COOP和COEP隔离你的站点。
通用计时攻击	利用程序执行时间差异来推断信息。	1. 降低`performance.now()`的精度。2. 随机化和填充响应数据。3. 避免在URL中传递敏感信息。4. 使用CSP限制可以加载的资源类型和来源。5. 使用COOP和COEP隔离你的站点。6. 仔细审查和测试代码，找出潜在的计时攻击漏洞。

重要提示：

没有银弹可以完全防御跨域资源泄露。
防御需要多层保护，并不断更新和改进。
开发者需要时刻关注新的攻击方式，并采取相应的防御措施。

好了，今天的讲座就到这里。希望大家对跨域资源泄露和计时攻击有了更深入的了解。记住，安全无小事，保护用户隐私，人人有责！下次再见！

发表回复 取消回复

发表回复取消回复