如何在静态站点上防止 CSRF？

Question

我有一个静态网站，由 CDN 提供服务，通过 AJAX 与 API 通信。如何防范 CSRF？

由于我无法控制静态网站的服务方式，因此当有人加载我的静态网站时我无法生成 CSRF 令牌（并将令牌插入表单或与我的 AJAX 请求一起发送）。我可以创建一个GET 端点来检索令牌，但似乎攻击者可以简单地访问该端点并使用它提供的令牌？

有没有一种有效的方法可以用这个堆栈来防止 CSRF？

---

其他细节：这里的身份验证是完全独立的。我想要 CSRF 保护的一些 API 请求是经过身份验证的端点，还有一些是公共 POST 请求（但我想确认它们来自我的站点，而不是其他人的）

Answer 1

我可以创建一个 GET 端点来检索令牌，但似乎攻击者可以简单地访问该端点并使用它提供的令牌？

正确。但 CSRF 代币并不意味着保密。它们仅用于确认按一个用户期望的顺序执行操作（例如，表单 POST 仅在表单的 GET 请求之后）。即使在动态网站上，攻击者也可以向页面提交他们自己的 GET 请求并解析出嵌入在表单中的 CSRF 令牌。

来自OWASP：

CSRF 是一种欺骗受害者提交恶意请求的攻击。它继承受害者的身份和特权，代表受害者执行不受欢迎的功能。

在页面加载时发出初始 GET 请求以获取新令牌然后在请求执行操作时提交它是完全有效的。

如果您想确认提出请求的人的身份，您需要进行身份验证，这与 CSRF 不同。

Answer 2

我的解决方法如下

客户端 [静态 html]

<script>
// Call script to GET Token and add to the form
fetch('https:/mysite/csrf.php')
.then(resp => resp.json())
.then(resp => {
    if (resp.token) {
        const csrf = document.createElement('input');
        csrf.name = "csrf";
        csrf.type = "hidden";
        csrf.value = resp.token;
        document.forms[0].appendChild(csrf);
    }
});
</script>

可以修改以上内容以针对预先存在的 csrf 字段。我用它来添加到带有表单的页面。该脚本假定页面上的第一个表单是目标，因此如果需要也需要更改。

在服务器上生成 CSRF（使用 PHP：假设 > 7）

[CSRFTOKEN 在配置文件中定义。例子]

define('CSRFTOKEN','__csrftoken');

服务器：

$root_domain = $_SERVER['HTTP_HOST'] ?? false;
$referrer = $_SERVER['HTTP_REFERER'] ?? false;

// Check that script was called by page from same origin
// and generate token if valid. Save token in SESSION and
// return to client
$token = false;
if ($root_domain && 
    $referrer && 
    parse_url($referrer, PHP_URL_HOST) == $root_domain) {
  $token = bin2hex(random_bytes(16));
  $_SESSION[CSRFTOKEN] = $token;
}

header('Content-Type: application/json');
die(json_encode(['token' => $token]));

最后在处理表单的代码中

session_start();

// Included for clarity - this would typically be in a config
define('CSRFTOKEN', '__csrftoken');

$root_domain = $_SERVER['HTTP_HOST'] ?? false;
$referrer = parse_url($_SERVER['HTTP_REFERER'] ?? '', PHP_URL_HOST);

// Check submission was from same origin
if ($root_domain !== $referrer) {
    // Invalid attempt
    die();
}

// Extract and validate token
$token = $_POST[CSRFTOKEN] ?? false;
$sessionToken = $_SESSION[CSRFTOKEN] ?? false;
if (!empty($token) && $token === $sessionToken) {
  // Request is valid so process it
}

// Invalidate the token  
$_SESSION[CSRFTOKEN] = false;
unset($_SESSION[CSRFTOKEN]);

Answer 3

同样有很好的解释，请查看
https://cloudunder.io/blog/csrf-token/

据我了解，如果我们添加了 X-Requested-With 标志，由于 CORS 限制，静态站点似乎不会遇到 CSRF 的任何问题。
我还想在这里强调一个问题，

如何保护从移动应用程序和静态站点调用的 api？
由于 api 是公开的，您要确保只有允许的用户才能调用它。
我们可以在我们的 API 服务层添加一些检查以进行相同的检查

1) 对于 AJAX 请求（来自静态站点）检查请求域，因此只有允许的站点才能访问它
2) 对于移动请求使用 HMAC 令牌，请在此处阅读更多信息
http://googleweblight.com/i?u=http://www.9bitstudios.com/2013/07/hmac-rest-api-security/&hl=en-IN