JavaScript 防御机制：对抗 CSRF 攻击的有效武器

CSRF 令牌

CSRF 令牌是一种随机生成的、一次性使用的值，嵌入在应用程序中。当用户向应用程序发出请求时，令牌将随请求一起传递。应用程序会将令牌与会话中的预期令牌进行比较。如果不匹配，则请求将被拒绝，从而阻止 CSRF 尝试。

演示代码：

// 在请求中注入 CSRF 令牌
$(document).ready(function() {
  $.ajax({
    url: "api/update-profile",
    method: "POST",
    beforeSend: function(req) {
      req.setRequestHeader("X-CSRF-Token", "b6f79c2f-0620-4463-a7dd-6de22cb62871");
    }
  });
});

同源策略

同源策略是一种浏览器安全措施，它阻止不同源（协议、主机、端口）的脚本或请求执行操作。 CSRF 依赖于从受害者浏览器发起的请求，而同源策略可以阻止恶意脚本发起此类请求。

演示代码：

try {
  // 尝试从不同源获取敏感信息
  var data = document.getElementById("secret-data").innerHTML;
  console.log(data);
} catch (e) {
  // 抛出 DOMException: XMLHttpRequest 无法载入跨域请求
}

HTTP 标头

HTTP 标头可用来指示浏览器如何处理请求。有几种标头可用来缓解 CSRF 威胁：

• Referer： 包含请求来源页面 URL 的标头。如果 Referer 标头不存在或与预期值不匹配，则可能是 CSRF 尝试。
• Origin： 包含请求源的协议、主机和端口的标头。这有助于应用程序识别请求是否跨域。
• X-Requested-With： 通常由 AJAX 请求使用的标头。如果缺少此标头，则应用程序可以怀疑存在 CSRF 尝试。

演示代码：

// 验证 HTTP 标头
$(document).ready(function() {
  $.ajax({
    url: "api/update-profile",
    method: "POST",
    beforeSend: function(req) {
      req.setRequestHeader("Referer", "https://mydomain.com/profile");
      req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    }
  });
});

结论

通过利用 CSRF 令牌、同源策略和 HTTP 标头， JavaScript 提供了多种有效的防御机制来缓解 CSRF 威胁。通过实施这些措施，应用程序可以增强其安全性并阻止恶意者利用受害者浏览器来执行未经授权的操作。