Vue+Element项目中如何处理XSS过滤后的乱码问题？

Question

目前公司的后台针对xss攻击做了过滤，一些类似< '' ;特殊符号做了转码。造成页面回显时，出现乱码的情况。而XSS防御后台又不能取消，只能由前段来对每一个输入框做转码处理，但现在项目又是一个开发完成的项目，项目使用的是vue+element，输入框基本都是el-input，所以想问一下大家，有什么类似于组件或致指令的方式去解决这个问题。。

Answer 1

使用 vue-xss 插件

Answer 2

我用的是自定义指令

import { App } from 'vue';

export function setupDirectives(app: App) {
  app.directive('encode', {
    // 指令的绑定函数
    beforeMount(el: HTMLInputElement) {
      // 给元素绑定 input 事件
      el.addEventListener('input', (event: Event) => {
        const input = event.target as HTMLInputElement;
        input.value = encodeHTML(input.value);
      });
    },
    // 卸载时移除事件监听
    unmounted(el: HTMLInputElement) {
      el.removeEventListener('input', () => {});
    }
  });
}

// HTML 编码函数
function encodeHTML(value: string): string {
  return value
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;')
    .replace(/;/g, '&#59;');
}