Django / Graphene / Apollo / django-webpack-loader / Vue：CORS / CSRF不能一起工作吗？

Question

我正在一个项目中使用Django作为后端，Vue作为前端，并尝试实现Apollo / Graphene / GraphQL作为数据传输层。大多数功能都可以使用，但是我对CORS / CSRF设置一无所知。

（在这里，这里，这里和这里都进行了很多研究。

有谁知道如何通过CSRF令牌解决对graphql / graphene API的保护？在django日志终端上，我得到：

Forbidden (CSRF token missing or incorrect.): /graphql/

...在Vue / Js控制台上，我看到了

Cross-Origin Request Blocked: The Same Origin Policy disallows 
reading the remote resource at http://localhost:8080/sockjs-node/
info?t=1558447812102. 

您可以在此处查看（并结帐，它是开源的）此项目。

http：// localhost：8000，http：// localhost：8000 / admin和http：// localhost：8000 /都可以正常工作。该查询query{menuItems{id, title, slug, disabled}}在graphiql中运行良好。

settings.py：

Forbidden (CSRF token missing or incorrect.): /graphql/

问题在这里：* yarn serve在http：// localhost：8080./manage.py runserver上运行 * 在http：// localhost：8000上运行，并且通过Webpack代理Vue前端开发服务器。

vue.config.js：

module.exports = {
    // The base URL your application bundle will be deployed at
    publicPath: 'http://localhost:8080',

    // ...

    chainWebpack: config => {
        // ...
        config.devServer
            .public('http://localhost:8080')
// ...

vue-apollo.js：

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:8000/graphql/'

编辑：如果我graphql/用来包装api urlpath csrf_exempt，它可以工作：

Cross-Origin Request Blocked: The Same Origin Policy disallows 
reading the remote resource at http://localhost:8080/sockjs-node/
info?t=1558447812102. 

但是，这是BadIdea（TM）安全的。如何将Vue与Django和webpack_loader一起使用，将该令牌带入前端？

Answer 1

跳过该请求的 CSRF 检查可能没问题，但很难根据您提供的信息对其进行评估，因此让我首先解释一下为什么我们需要 CSRF 检查。

CSRF 的创建是为了修复 HTTP 和 Web 浏览器工作方式中存在的“漏洞”。该漏洞的原理如下：任何网站都可以包含向您的网站提交数据的表单，这样做时，cookie 将与用户提交的表单一起传递。

这意味着第 3 方网站可以欺骗您的用户在您的网站上执行某些操作。为了防止这种情况发生，CSRF 代币的想法应运而生。简而言之：您网站上负责执行任何可能对用户有害的操作（当被第 3 方网站欺骗提交该操作时）的任何表单，都必须在为此操作提交的所有数据旁边包含 CSRF 令牌字段。相同的 CSRF 令牌需要出现在用户会话或 cookie 中。提交表单时，将对这 2 个标记进行比较，如果它们不匹配或其中任何一个不存在，则表单将被拒绝。

这可以保护第三方网站提交的任何表格，因为其他网站无法读取来自您网站的 cookie，即使它们与来自此类网站的请求一起传递。那么该网站就不可能在表单数据中设置匹配的令牌。

话虽这么说，当您不使用 cookie 保持用户会话时，就不会出现此问题。当您的前端位于单独的域上时，这也不是问题，因为来自前端的所有请求都将具有Origin带有其域名的标头。因此，如果是其中一种情况，您可以相应地禁用 CSRF 检查：

• 当不使用 cookie 进行用户会话或用户身份验证时（例如，如果您完全依赖通过标头传递的 JWT），您可以对所有不使用 cookie 的视图完全禁用 CSRF。
• 当您的前端位于单独的域（或子域）上时，CORS 允许连接到您的网站，请使用CSRF_TRUSTED_ORIGINS将其列入白名单。