我正在做一个项目，使用Django作为后端，Vue作为前端，并试图实现Apollo/Graphene/GraphQL作为数据传输层。它的大部分工作，但我没有得到我的头周围的CORS/CSRF设置。
(Had做了很多研究here和here和here。
有谁知道如何通过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.你可以看到（并 checkout ，它是开源的）这个项目here。
http://localhost:8000、http://localhost:8000/admin和http://localhost:8000/工作得很好。查询query{menuItems{id, title, slug, disabled}}在graphiql中运行良好。
settings.py:
INSTALLED_APPS = [
# ...
'corsheaders',
'rest_framework',
'webpack_loader',
'graphene_django',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # new
# ...
]
CORS_ORIGIN_ALLOW_ALL = DEBUG # (=True)问题就在这里：* 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/'编辑：如果我用csrf_exempt Package graphql/ API urlpath，它可以工作：
urlpatterns = [ # ...
path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True, schema=schema))),
]但这是一个坏主意（TM）的安全性。我如何使用Vue和Django以及webpack_loader将该token放入前端？
1条答案
按热度按时间uz75evzq1#
跳过CSRF检查这个请求可能没问题，但是很难从您提供的信息中评估它，所以让我解释一下为什么我们首先需要CSRF检查。
创建CSRF是为了修复HTTP和Web浏览器工作方式中存在的“漏洞”。这个洞是这样的：任何网站都可以包含向您的网站提交数据的表单，当这样做时，cookie将与用户提交的表单沿着传递。
这意味着第三方网站可以欺骗您的用户在您的网站上执行某些操作。为了防止这种情况，创建了CSRF令牌的想法。简单地说：您网站上的任何表单，如果被第三方网站欺骗提交，负责执行任何可能以任何方式对用户有害的操作，则必须在为此操作提交的所有数据旁边包含CSRF令牌字段。在用户的会话或cookie中需要存在相同的CSRF令牌。当表单被提交时，这两个令牌被比较，如果它们不匹配或其中任何一个都不存在，表单将被拒绝。
这可以保护第三方网站提交的任何表格，因为其他网站无法读取您网站的cookie，即使它们与来自此类网站的请求沿着传递。那么网站就不可能在表单数据中设置匹配令牌。
也就是说，当您不使用Cookie保存用户会话时，此问题不会出现。当您的前端位于单独的域时，这也不是问题，因为来自您的前端的所有请求都将具有带有其域名的
Origin头。因此，如果出现上述任何一种情况，您可以相应地禁用CSRF检查：CSRF_TRUSTED_ORIGINS将其列入白名单。