如何在 Chrome 插件中使用 CSRF 令牌/来自其他来源

Question

我的基本目标是将一些数据从 chrome 插件发送到 Django 服务器。到目前为止，我的基本尝试如下所示：

1. 使用 javascript 在插件代码中捕获数据。

   loginData = {
       'username': document.getElementById("login-email").value,
       'password': document.getElementById("login-password").value
   };
   

2. 使用 REST 框架将其发送到 Django。

   csrfToken = getCookie('csrftoken');
   
   $.ajax(login_url, {
       type: 'post',
       data: JSON.stringify(loginData),
       contentType: 'application/JSON',
       dataType: 'json',
       headers: {
           'HTTP_X_CSRFTOKEN': csrfToken
       },
       success: function (data, status, XhrObj) {
           // Do some stuff
       },
       error: function (XhrObj, status, error) {
           // Do some other stuff
       }
   });
   

我卡住的地方是我不断收到错误响应{"detail":"CSRF Failed: CSRF token missing or incorrect."} 我试图关注the instructions listed in Django's documentation for adding the CSRF header into requests，但是他们在那里声明的getCookie 函数总是返回null，因为我正在执行此操作的页面是不是来自该域（请记住它在 Chrome 插件“域”内），因此无法访问我的 cookie（这是正确的）。

他们在该文档中进一步提到“如果您激活 CSRF_USE_SESSIONS，则必须在 HTML 中包含 CSRF 令牌并使用 JavaScript 从 DOM 中读取令牌。”但是，在您的 HTML 中包含该标记不是完全违背了 CSRF 标记的目的吗？ IE。它允许攻击者端点获取有效的 CSRF 令牌，然后他们可以使用该令牌执行恶意攻击，对吗？

我还研究了能够get the cookie value directly from the AJAX response，但它也被阻止以防止我正在尝试执行的确切类型的“攻击”。

当我检查流量时，我确实看到名为“csrftoken”的 cookie 与我的请求一起发送，所以我想我也有点困惑 Django 为什么/如何希望我将其拉出到 HTTP header 而不是仅仅从已经发送的 cookie 中读取它。

所以，我猜，有两个问题：

1. 在 HTML 中包含 CSRF 令牌的 Django 不是完全违背了所述 CSRF 令牌的目的吗？
2. 在不打开 Chrome 扩展程序的安全漏洞的情况下向远程 API 提交数据的方法是什么？

Answer 1

所以我实际上最终自己解决了这个问题（尽管@wOxxOm 为我指出了正确的方向）。

需要改变两件事才能使其正常工作：

1. 我不得不使用 wOxxOm 建议的chrome.cookies API，而不是使用 Django 建议的获取 cookie 的方式。
2. 将 http 标头从 HTTP_X_CSRFTOKEN 更改为 X-CSRFToken。

感谢您的帮助，希望这对其他人有所帮助！

另外，关于我的第一个问题，事实证明，表单中包含的 CSRF 令牌只是 cookie 中 CSRF 令牌的哈希值，并且这两种表单都必须以 django 生成的表单存在才能通过CSRF 验证，as documented in the Django documentation.