crsf-token表单防护

CRSF-Token

后端生成token

class CSRFTokenAPI(MethodView):
    def get(self):
        csrf_token = generate_csrf()  # 生成CSRF令牌
        response = make_response(jsonify({'csrf_token': csrf_token}))
        # response.set_cookie(httponly=True, secure=True, samesite='None')
        return response
csrf_token_view = CSRFTokenAPI.as_view('csrf_token_api')
bp.add_url_rule('/get_csrf_token/', view_func=csrf_token_view, methods=['GET'])

前端，以登录为例

async getCsrfToken() {
      try {
        const headers = {'Content-Type': 'application/json','Access-Control-Allow-Origin':'*',
          'Access-Control-Allow-Credentials':'true',};
        const response = await axios.get(`${this.backendurl}/user/get_csrf_token/`,{withCredentials: true})
      // console.log(response)
      this.csrf_token=response.data.csrf_token;
      console.log("getCsrfToken:",this.csrf_token)
      } catch (error) {
        console.error(error);
      }
    },
async login() {
      await this.getCsrfToken()
      //邮箱提示信息元素
      var email1_msg = this.$refs.email1_msg;
      //密码提示信息元素
      var pwd1_msg = this.$refs.pwd1_msg;
      //登录表单html元素
      var loginform = this.$refs.loginform;
      // console.log(this.backendurl)
      // console.log("login里面的方法:",this.csrf_token)
      //添加令牌到请求头中
      const headers = { 'X-CSRFToken': this.csrf_token,'Content-Type': 'application/json','Access-Control-Allow-Origin':'*',
          'Access-Control-Allow-Credentials':'true',};
      await axios
        .post(`${this.backendurl}/user/login/`, this.user_form,{headers:headers,withCredentials:true})
        // .post(`${this.backendurl}/user/login/`, this.user_form)
        .then((res) => {
          if (res.data["status"] === 200) {
            //从返回的数据中获取user_id
            var user_id = res.data["user_id"];
            var username=res.data["user_name"]
            var email=res.data["email"]
            // console.log(user_id,username,email)
            var userinfo={
                'user_id':user_id,
                'username':username,
                'email':email
            }
            this.$store.commit("userinfo/saveuserinfo", userinfo);
            //将user_id转成string类型
            // user_id = String(user_id);
            // console.log(user_id)
            // //将user_id加密
            // var cipherText = CryptoJS.AES.encrypt(
            //   user_id, "user_id" 
            // ).toString();
            //存入cookie,参数：存入名称，存入值，存储时长
            // this.$cookies.set("user_id", cipherText,"24d");
            this.$router.push({
              name: "system",
            });
          } else {
            this.user_form.email = res.data["email"];
            this.user_form.password = res.data["password"];
            email1_msg.innerHTML = res.data["emailtip"];
            pwd1_msg.innerHTML = res.data["passwordtip"];
            loginform.classList.add("was-validated");
          }
        });
    },

注意一个要点，就是前端输入的url，要输入数字，不要用localhost，因为前后端的ip校验是文本校验，所以写localhost的话会有跨域问题。