关于前后端分离项目中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_COOKIE"]
        # Since the cookie is being used, flag to sen
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于前后端分离的应用,Spring Security提供了一种处理跨站请求伪造(CSRF)的方式。CSRF攻击是一种利用用户已经认证的身份进行恶意操作的攻击方式,而Spring Security通过在请求包含一个CSRF令牌来防止此类攻击。 在前后端分离的应用前端通常会发送Ajax请求来与后端进行交互。为了防止CSRF攻击,可以在后端配置Spring Security来生成和验证CSRF令牌。 首先,在后端的Spring Security配置文件,需要将CSRF保护启用。这可以通过以下代码实现: ```java @Override protected void configure(HttpSecurity http) throws Exception { http .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()) .and() // 其他配置 } ``` 在这个配置,我们使用了`CookieCsrfTokenRepository`作为CSRF令牌的存储库,并设置`httpOnly`为`false`,允许前端访问该Cookie。你也可以选择其他的存储库,如`HeaderCsrfTokenRepository`。 接下来,在前端的每个请求,需要包含CSRF令牌。可以通过以下方式获取令牌: ```javascript var token = document.querySelector("meta[name='_csrf']").getAttribute("content"); var header = document.querySelector("meta[name='_csrf_header']").getAttribute("content"); ``` 然后,在每个请求,将令牌放入请求头: ```javascript var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader(header, token); // 其他请求设置 xhr.send(data); ``` 后端会验证请求头CSRF令牌与Cookie的令牌是否匹配,如果匹配则继续处理请求,否则返回错误。 这样,通过在前端发送请求时包含CSRF令牌,并在后端验证令牌,就可以有效防止CSRF攻击。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值