vue与django中预防CSRF

Posted lovenethui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue与django中预防CSRF相关的知识,希望对你有一定的参考价值。

一、环境:

vue2.0、django 1.10.x、iview

二、django后台处理

1、将django的setting的MIDDLEWARE中加入django.middleware.csrf.CsrfViewMiddleware,一般新建的django项目中会自带的。

1 MIDDLEWARE = [
2     django.middleware.security.SecurityMiddleware,
3     django.contrib.sessions.middleware.SessionMiddleware,
4     django.middleware.common.CommonMiddleware,
5     ‘django.middleware.csrf.CsrfViewMiddleware‘,
6     django.contrib.auth.middleware.AuthenticationMiddleware,
7     django.contrib.messages.middleware.MessageMiddleware,
8     django.middleware.clickjacking.XFrameOptionsMiddleware,
9 ]

2、在templete的html页的from(iview的<i-form></i-form> 标签)中添加{% csrf %},后台渲染语法如下:

render(request,xxxx.html)

二、前端处理

修改axios 请求设置为:这里取当前cookie中的值,赋值在请求头的‘X-CSRFToken‘变量中
 axios.interceptors.request.use((config) => {
            config.headers[‘X-Requested-With‘] = ‘XMLHttpRequest‘;
            let regex = /.*csrftoken=([^;.]*).*$/;
            config.headers[‘X-CSRFToken‘] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
            return config
        });

这样向后台的请求都会带django生成的那个csrf_token值。中间件csrf模块会截取判断csrf_token值是否一致,如果一致则请求合法。

三、ivew表单效验注意事项

由于使用的是vue2.0 版本,此时绑定的写法有变动。

<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate"  :label-width="80">
                {% csrf_token %}
       <Form-item label="验证码:" prop="uidcode">
              <i-input v-model="formValidate.uidcode" laceholder="请输入验证码" style="width:80%"></i-input>
       </Form-item>
</i-form>    
 new Vue({
            el: "#temp",
            data() {
                return {
                    formValidate: {
                        uidcode: ‘‘,
                    },
                    ruleValidate: {
                        uidcode: [
                                 { required: true, message: ‘不能为空!‘, trigger: ‘blur‘ }
                        ]
                    }
                }
            },
            methods: {
                handleSubmit (name) {
                    this.$refs[name].validate((valid) => {
                        if (valid) {    
                                //do something                  
                        }
                    })
                },
                handleReset (name) {
                    this.$refs[name].resetFields();
                }
            },
        })
        

关于django中更多的CSRF问题,详见 利用django中间件CsrfViewMiddleware防止csrf攻击

 

以上是关于vue与django中预防CSRF的主要内容,如果未能解决你的问题,请参考以下文章

csrf_token的了解

什么是CSRF攻击,如何预防

前端技能树,面试复习第 36 天—— 浏览器原理:如何预防 XSS 攻击与 CSRF 攻击

CORS、Ajax 和 CSRF

Django Rest 框架、CSRF 和 Vue.js

如何预防CSRF攻击?可以试试这三种方式