关于前后端分离项目中CSRF等一系列问题的理解小结

本文总结了在前后端分离项目中遇到的CSRF和CORS问题,包括CSRF Token生成、服务端CORS限制、浏览器跨域设置Cookie策略以及Django的CSRF策略对跨域的限制。作者详细描述了解决这些问题的过程,最终通过代理方式解决了跨域问题,并提供了相应的配置代码。

最近陆陆续续的在学习前后端分离的知识,期望通过这个方式了解前后端各自的技术栈以及前后端交互的具体实现方式,经过自己挑选,最终选择了Vue+django的技术栈,而在实现Vue和django交互的过程中,遇到的第一个问题就是CSRF的问题,为了理解和解决这个问题,自己查询了很多博主的资料,又引出了CORS的问题,这两个问题交织在一起比较繁琐,特此在这里将自己的理解进行一个总结

一、问题的起因

问题的起因:希望在Vue上实现的表单能够通过post请求将数据发送到服务端,例如登录信息等等,为了功能的安全考虑(包括也为了尝试理解CSRF的逻辑),决定在保留django自带的csrf功能的前提下实现相关功能,进而引出一系列问题

二、尝试使用CSRF防御功能引入的问题汇总

1. CSRF Token生成问题

要引入CSRF功能,需要在前端使用get请求第一次访问服务端时生成相关的Token,关于这个生成方法网上有很多文章,但是自己试用下来并不能正常运行,最后不断尝试,总算发现了如下的方式,即,在服务端处理get请求的View函数中,主动的获取token:

from django.http import HttpResponse
from django.middleware.csrf import get_token
 
 
def index(request):
    if request.method == "GET":
        get_token(request)
        resp = HttpResponse('[Get Request]Hello from MSB4011')
        return resp
        

通过这种方式,当前端请求服务端的这个接口是,服务端将自动返回csrftoken并且储存在cookies中,这样前端就可以获得对应的token,并在后续的post请求中加入'X-CSRFTOKEN': csrftoken来完成相关的认证。需要注意的是,get_token函数本身返回的token并不是标准的csrftoken,而是经过加密计算的,因此很多网络博客写到的用一个变量获取get_token的返回,在通过response的方式返回给前端的逻辑应该是行不通的,不信可以看csrf库里面的代码:

def get_token(request):
    """
    Return the CSRF token required for a POST form. The token is an
    alphanumeric value. A new token is created if one is not already set.

    A side effect of calling this function is to make the csrf_protect
    decorator and the CsrfViewMiddleware add a CSRF cookie and a 'Vary: Cookie'
    header to the outgoing response.  For this reason, you may need to use this
    function lazily, as is done by the csrf context processor.
    """
    if "CSRF_COOKIE" in request.META:
        csrf_secret = request.META["CSRF_COO
在使用Vue和Django进行前后端分离时,解决CSRF跨域问题可以采用以下方法: ### Django后端处理 1. **获取CSRF Token接口**:编写视图函数获取CSRF Token并返回给前端。可以使用`get_token(request)`函数来获取CSRF Token。以下是两种不同的视图函数示例: ```python from django.middleware.csrf import get_token from django.http import HttpResponse import json # 示例1 def getToken(request): token = get_token(request) return HttpResponse(json.dumps({'token': token}), content_type="application/json,charset=utf-8") ``` ```python # 示例2 def search(request): result = {'Succeed': True, 'Data': get_token(request)} return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8") ``` 2. **Settings设置**:在Django的`settings.py`文件中进行相关设置,需要安装`corsheaders`库,并进行如下配置: ```python INSTALLED_APPS = [ ... 'corsheaders', ... ] # 添加中间件 MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', # 默认 'django.contrib.sessions.middleware.SessionMiddleware', # 默认 'corsheaders.middleware.CorsMiddleware', # 新增 'django.middleware.common.CommonMiddleware', # 新增 'django.middleware.csrf.CsrfViewMiddleware', # 默认 'django.contrib.auth.middleware.AuthenticationMiddleware', # 默认 'django.contrib.messages.middleware.MessageMiddleware', # 默认 'django.middleware.clickjacking.XFrameOptionsMiddleware', # 默认 ] # 跨域增加忽略 CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True CORS_ORIGIN_WHITELIST = ( '*' ) CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'XMLHttpRequest', 'X_FILENAME', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', ) ``` ### Vue前端处理 前端第一次访问要用GET方法请求获取CSRF Token的接口,然后将获取到的CSRF Token在后续的请求中携带。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值