搜索结果列表页面开发

src/directives/xss-protect.ts

@@ -0,0 +1,67 @@
+import type { Directive } from 'vue';
+import { watch } from 'vue';
+
+const xssTokenReplace = { // xss repalce rules
+  '<': '&lt;',
+  '>': '&gt;'
+  // '"': '&quot;',
+  // "'": '&#x27;'
+};
+function generateReg(replaceRules:Record<string, string>) { // 替换字符查找
+  const temArr = [];
+  temArr.push('(');
+  for (const key in replaceRules) {
+    temArr.push(key);
+    temArr.push('|');
+  }
+  temArr.length > 1 && temArr.pop();
+  temArr.push(')');
+  return new RegExp(temArr.join(''), 'g');
+}
+const replaceReg = generateReg(xssTokenReplace);
+function replaceAll(str:string, replaceRules:Record<string, string>) {
+  return str.replace(replaceReg, function(match, position, original) { return replaceRules[match]; });
+}
+const repairMaxLength = function(str:string, maxLength:number) { // 设置最大长度不生效的问题
+  const len = str.length;
+  return len > maxLength ? str.slice(0, maxLength) : str;
+};
+const handlePaste = function(vnode:any, event:any) { // 复制粘贴过滤
+  const value = event.target.value;
+  const pos = event.target.selectionStart;
+  const pasetText = (event.clipboardData || (window as any).clipboardData).getData('text');
+  const insertStr = replaceAll(pasetText, xssTokenReplace);
+  let composeStr = value.slice(0, pos) + insertStr + value.slice(pos);
+  if (vnode.ctx.attrs?.maxlength) composeStr = repairMaxLength(composeStr, vnode.ctx.attrs?.maxlength);
+  event.target.value = composeStr;
+  event.target.setSelectionRange(pos + insertStr.length, pos + insertStr.length);// 计算鼠标位置
+  vnode.ctx.emit('update:modelValue', event.target.value);// 双向绑定更新
+  event.preventDefault();
+};
+const handleInput = function(vnode:any, event:any) { // 输入替换
+  if (replaceReg.test(event.key)) {
+    const pos = event.target.selectionStart;
+    const value = event.target.value;
+    const insertStr = replaceAll(event.key, xssTokenReplace);
+    let composeStr = value.slice(0, pos) + insertStr + value.slice(pos);
+    if (vnode.ctx.attrs?.maxlength) composeStr = repairMaxLength(composeStr, vnode.ctx.attrs?.maxlength);
+    event.target.value = composeStr;
+    event.target.setSelectionRange(pos + insertStr.length, pos + insertStr.length);// 计算鼠标位置
+    vnode.ctx.emit('update:modelValue', event.target.value);// 双向绑定更新
+    event.preventDefault();
+  }
+};
+export const xssEscape = (str:string) => replaceAll(str, xssTokenReplace);// 替换渲染中的非法字符（如果需要保留v-html的元素渲染，请勿使用）
+let handleMoveInput:any = null;
+let handleMovePaste:any = null;
+export default {
+  mounted(el, binding, vnode) {
+    el.addEventListener('paste', handleMovePaste = handlePaste.bind(null, vnode));
+    el.addEventListener('keypress', handleMoveInput = handleInput.bind(null, vnode));
+  },
+  beforeUnmount(el) {
+    el.removeEventListener('paste', handleMovePaste);
+    el.removeEventListener('keypress', handleMoveInput);
+  }
+} as Directive;
+