网络安全漏洞防护知识一：input输入防止xss攻击的防御措施
input输入预防xss网络攻击的防御措施
1.首先项目安装 dompurify, 终端安装命令：npm i dompurify
2.在utils文件夹下面创建directives文件夹，然后在该文件夹下面创建inputFilter.js 具体内容如下：
import DOMPurify from 'dompurify';
/**
*? 实现功能
*? 1、默认情况下只禁止空格输入
*? 2、intFilter 限制只能输入整数
*? 3、priceFilter 限制只能输入整数和小数（价格类）
*? 4、phoneFilter 限制只能输入手机号
*? 5、specialFilter 限制最大值和最小值(抛出错误给回调函数)
*? 6、domPurify 限制非法字符的输入
*/
const addListener = function(el, type, fn) {
? el.addEventListener(type, fn, false)
}
const domPurify = function(el){
addListener(el, 'keyup', () => {
? el.value =? DOMPurify.sanitize(el.value);
el.dispatchEvent(new Event("input"));
})
}
const spaceFilter = function(el) {
? addListener(el, 'keyup', () => {
? ? el.value = el.value.replace(/\s+/, '');
el.dispatchEvent(new Event("input"));
? })
}
const intFilter = function(el) {
? addListener(el, 'keyup', () => {
? ? el.value = el.value.replace(/\D/g, '');
el.dispatchEvent(new Event("input"));
? })
}
const priceFilter = function(el) {
? addListener(el, 'keyup', () => {
? ? el.value = el.value.replace(/[^\d.]*/g, '')
? ? if (isNaN(el.value)) {
? ? ? el.value = ''
? ? }
el.dispatchEvent(new Event("input"));
? })
}
const specialFilter = function(el) {
? addListener(el, 'keyup', () => {
? ? el.value = el.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '');
el.dispatchEvent(new Event("input"));
? })
}
const phoneFilter = function(el) {
? addListener(el, 'blur', () => {
? ? if (!el.value) {
? ? ? return
? ? }
? ? const phoneReg = new RegExp('^(13|14|15|16|17|18|19)[0-9]{9}$')
? ? if (!phoneReg.test(el.value)) {
? ? ? alert('手机号输入错误')
? ? ? el.value = ''
? ? }
? })
}
const urlFilter = function(el) {
? addListener(el, 'blur', () => {
? ? if (!el.value) {
? ? ? return
? ? }
? ? const urlReg = /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
? ? if (!urlReg.test(el.value)) {
? ? ? alert('url输入错误')
? ? ? el.value = ''
? ? }
? })
}
export default {
? bind(el, binding) {
? ? if (el.tagName.toLowerCase() !== 'input') {
? ? ? el = el.getElementsByTagName('input')[0]
? ? }
? ? spaceFilter(el)
? ? switch (binding.arg) {
? ? ? case 'int':
? ? ? ? intFilter(el)
? ? ? ? break
? ? ? case 'price':
? ? ? ? priceFilter(el)
? ? ? ? break
? ? ? case 'special':
? ? ? ? specialFilter(el)
? ? ? ? break
? ? ? case 'phone':
? ? ? ? phoneFilter(el)
? ? ? ? break
? ? ? case 'url':
? ? ? ? urlFilter(el)
? ? ? ? break
? case 'dom':
? domPurify(el)
? break
? ? ? default:
? ? ? ? break
? ? }
? }
}
然后创建index.js文件 具体代码如下：
import inputFilter from './inputFilter'
const install = function(Vue) {
? Vue.directive('inputFilter', inputFilter)
}
if (window.Vue) {
? window.inputFilter = inputFilter
? Vue.use(install)
}
inputFilter.install = install
export default inputFilter
最后在main.js中引入js
import DomPurify from './utils/directives/index.js'
Vue.use(DomPurify);
在vue项目中使用如下v-input-filter:dom
? ? ? ? ? ? ? ? <el-input
? ? ? ? ? ? ? ? ? ? type="password"
? ? ? ? ? ? ? ? ? ? v-model="bsform.password"
? ? ? ? ? ? ? ? ? ? placeholder="请输入密码"
? ? ? ? ? ? ? ? ? ? autocomplete="off"
? ? ? ? ? ? ? ? ? ?v-input-filter:dom
? ? ? ? ? ? ? ? ? ? :show-password="true"
? ? ? ? ? ? ? ? ? ? class="login-input"
? ? ? ? ? ? ? ? ? ></el-input>