vue與django中預防CSRF
阿新 • • 發佈：2019-02-11
.html let smi 請求頭 pan int === 賦值 width
一、環境：
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