javascript - 如何在一个浏览器中处理两个具有一个后端 CSRF 问题的网站？

Question

如何在一个浏览器中处理独立首页和管理网站的CSRF问题？

我们为它写了一个主页前端和一个管理网站前端(有两个前端)，前端使用JavaScript。
由于这两个站点都很大，我们将它们作为虚拟主机放在 Nginx 中。他们是两个网站。我使用 Python (Django) 编写一个后端，两个站点调用一个后端。

主页使用Nginx的default.conf，admin网站使用vhosts/admin.conf。

这是测试域:

http://www.ajw123.xyz 作为主页。
http://admin.ajw123.xyz 作为管理网站。

我的麻烦是当我在浏览器中使用帐户登录首页网站时:

然后我用这个账号登录admin网站(或者其他账号)，抛出CSRF Token Error:

你看到 csrftoken 都是:

csrftoken=L5bRGEXDvW9dJaXsanLlMTOrxxGpxJCw6vji1zQtjzYrskOq0FBjQtfkhvFKFDmj; 

在预览中:

CSRF Failed: CSRF token missing or incorrect.

我使用 Django-Rest-Framework 作为 rest API，我们的前端同事写了两个站点(一个是普通用户的前端和后端站点，另一个是管理员的后端站点)，两者都使用我的 rest API。

Answer 1

这个问题在我看来是XY problem的一个例子.在接下来的文字中，我将回到我的主张并加以解释。

OP 使用 Django REST Framework 编写了一个 REST API。忽略此信息最初导致的关注度非常低。包含此信息后，事情变得更加清晰。

让我们首先回顾一下有关 REST API 的一些基础知识。 REST API 与语言无关。它不关心客户端是用哪种语言编写的，客户端也不关心 API 是用哪种语言编写的。可以通过不同的方式访问(使用)REST API:从命令行使用 curl；来自以任何编程语言编写的脚本；来自使用(很可能)JavaScript(或 JavaScript 框架)的浏览器。

由于有两个网站使用 API，OP 希望为他们提供 API 访问权限。出现的障碍是CSRF(跨站请求伪造)。
Django 使用 CSRF token 实现了 CSRF 保护。这意味着我们保护我们的网站免受来自其他网站的请求，通常可以将表格发布到我们的网站。

在实际情况下，客户端是托管在不同域中的两个不同网站，因此来自它们的请求来自不同的站点。 OP 真正想知道的是:
“如何授予或限制对使用我的 API 的其他网站的访问权限？”
而不是:
“如何处理 CSRF 问题？”

Django REST Framwork 的官方文档有一个页面专门针对这个问题:
Working with AJAX, CSRF & CORS

这是 CORS 的部分:

Cross-Origin Resource Sharing is a mechanism for allowing clients to interact with APIs that are hosted on a different domain. CORS works by requiring the server to include a specific set of headers that allow a browser to determine if and when cross-domain requests should be allowed.

The best way to deal with CORS in REST framework is to add the required response headers in middleware. This ensures that CORS is supported transparently, without having to change any behavior in your views.

Otto Yiu maintains the django-cors-headers package, which is known to work correctly with REST framework APIs.

我会强调第一句话:

Cross-Origin Resource Sharing is a mechanism for allowing clients to interact with APIs that are hosted on a different domain.

原来如此。 OP 希望允许客户端与托管在不同域上的 API 进行交互。
最后一句推荐使用django-cors-headers，就是解决问题的方法。
有关该应用程序使用的所有更多详细信息，请参见其文档。