vue与django中预防CSRF

Posted 2021-02-08 lovenethui

一、环境：

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攻击