密码框限制xxs注入字符处理

该段代码展示了在Vue.js应用中,如何使用A-Form-Model组件进行密码输入的校验,以防止XSS跨站脚本攻击。通过定义校验规则,检查用户输入的密码中是否包含特定的危险字符或JavaScript事件,确保密码的格式正确且安全。
摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
	<a-form-model-item ref="password" prop="password">
   		<a-input-password
      		placeholder="请输入登录密码"
      		v-model="cusForm.password"
      	/>
	</a-form-model-item>
</template>

<script>
export default {
  data() {
    //  密码输入校验
    var checkPwd = (rule, value, callback) => {
      //xss攻击特殊字符过滤
      let arr = [
        "alert",
        "eval",
        "script",
        "<script>",
        "<\/script>",
        "onblur",
        "onload",
        "onfocus",
        "onerror",
        "onclick",
        "onMouseOver",
        "onMouseOut",
        "onSelect",
        "onChange",
        "onSubmit",
        "console",
        "href",
        "<iframe>",
        "</iframe>",
        "<img>",
        "</img>",
        "<iframe>",
        "</iframe>",
        "<video>",
        "</video>",
        "<canvas>",
        "</canvas>",
        "<label>",
        "</label>",
        "<span>",
        "</span>",
        "document",
        "location",
        "javascript",
      ];
      //遍历数组 验证数组中的每一项是否存在于输入的字符串里。
      for (let i = 0; i < arr.length; i++) {
        //方法可返回某个指定的字符串值在字符串中首次出现的位置
        if (value.indexOf(arr[i]) != -1) {//判断条件是否成立
          this.cusForm.password = "";
          return callback("请输入正确的格式密码");
        }
      }
      callback();
    };
    return {
      cusForm: {
        password: "",
      },
      cusRules:{
	  	 password: [
          {
            required: true,
            message: "请输入登录密码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 20,
            message: "密码长度应为5-20位",
            trigger: "blur",
          },
          { validator: checkPwd, trigger: ["blur", "change"] },
        ],
	  }
   }
}
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值