vue3运用dompurify编写防xss攻击的自定义指令

针对输入或者后台返回的数据可能有html标签，可能会造成xss攻击的情况，可以运用dompurify封装一个xss清除指令。

dompurify简介：

[DOMPurify：一个只针对 DOM 的、超快的、宽容的 HTML XSS清理工具]

DOMPurify 是一个只针对 DOM 的、超快的、超容忍的 HTML、MathML 和 SVG 跨站脚本清理器。 DOMPurify 用于进行 HTML 文本的过滤，它会尽可能保留更多无害的属性，尽可能保持原有效果。它基于 dom，生成 dom 树后对其各属性进行过滤，执行效率高。

核心代码

import * as DOMPurify from 'dompurify';

const xss = DOMPurify;
function xssHtmlDirective(t) {
  var uData = t == null ? void 0 : t.default;
  const s = uData != null ? uData : {};
  function runSanitize(a, e) {
    const o = e.value;
    if (e.oldValue === o)
      return;
    const l = e.arg || {};
    a.innerHTML = DOMPurify.sanitize(o, { ...s, ...l });
  }
  return {
    beforeMount: runSanitize,
    updated: runSanitize
  };
}
export {
  xss,
  xssHtmlDirective
};

导出后注册自定义指令 在dom上绑定使用即可