inputfilter

一个用于输入过滤、防止富文本与 XSS 攻击的轻量工具包，提供核心过滤、Vue 指令与混入、全局输入拦截器、HTTP 请求拦截器等多种集成方式。

安装

npm i @chenxiaoyuyaofei/inputfilter

主要特性

• 基础过滤: 移除 HTML 标签与危险内容
• 富文本过滤: 仅允许指定 HTML 标签
• 严格过滤: 仅允许纯文本（可选移除特殊字符）
• 危险内容检测: 检测脚本、事件处理器、危险协议等
• 表单/对象批量过滤: 便捷处理结构化数据
• Vue 集成: 指令与 Mixin 即插即用
• 全局拦截: 输入与 HTTP 请求自动拦截与过滤
• 可配置: 白名单标签、属性、长度限制、危险模式等

快速开始（核心 API）

import {
  InputFilter,
  filterInput,
  filterRichText,
  filterStrict,
  hasDangerousContent,
  getFilterStats
} from '@chenxiaoyuyaofei/inputfilter'

// 基础过滤 - 移除所有 HTML 标签与危险内容
const safeText = filterInput('<script>alert(1)</script>正常文本')
// => "正常文本"

// 富文本过滤 - 保留允许的标签
const rich = filterRichText('<p>段落</p><script>危险</script><b>粗体</b>', {
  allowedTags: ['p', 'b', 'i', 'br']
})
// => "<p>段落</p><b>粗体</b>"

// 严格过滤 - 只允许纯文本
const pure = filterStrict('<p>HTML</p>&nbsp;实体<script>脚本</script>')
// => "HTML实体"

// 危险检测
hasDangerousContent('<img onerror=alert(1)>') // true

// 统计信息
const stats = getFilterStats('原始字符串', '过滤后字符串')

过滤选项（通用）

const options = {
  // 富文本：允许标签与属性
  allowedTags: ['p', 'b', 'i', 'br'],
  allowedAttributes: ['class', 'id'],

  // 通用：最大长度
  maxLength: 1000,

  // 基础过滤：是否移除
  removeHtmlTags: true,
  removeDangerousPatterns: true,
  removeHtmlEntities: true,

  // 严格过滤：是否移除特殊字符
  removeSpecialChars: true,
  allowedChars: /[\u4e00-\u9fa5a-zA-Z0-9\s\-_.!,?]/
}

子路径导入（按需）

import InputFilterCore from '@chenxiaoyuyaofei/inputfilter/core'
import directives from '@chenxiaoyuyaofei/inputfilter/directive'
import mixins from '@chenxiaoyuyaofei/inputfilter/mixin'
import interceptor from '@chenxiaoyuyaofei/inputfilter/interceptor'
import httpInterceptor from '@chenxiaoyuyaofei/inputfilter/http-interceptor'

Vue 指令（inputFilterDirective.js）

提供以下指令：

• v-input-filter（基础）
• v-rich-text-filter（富文本）
• v-strict-filter（严格）
• v-safe-input（基础安全输入别名）
• v-custom-filter（自定义过滤函数）

示例：

<template>
  <!-- 基础过滤 -->
  <input v-input-filter="basic" />

  <!-- 富文本过滤 -->
  <textarea v-rich-text-filter="{ allowedTags: ['p', 'br', 'b'] }" />

  <!-- 严格过滤 -->
  <input v-strict-filter="{ maxLength: 50 }" />

  <!-- 安全输入（基础） -->
  <input v-safe-input="{ maxLength: 100 }" />

  <!-- 自定义过滤 -->
  <input v-custom-filter="{ customFilter: v => v.replace(/[^a-zA-Z0-9]/g, ''), maxLength: 20 }" />
</template>

从包中按需导入（也可整包引入 directive 默认导出）：

import {
  vInputFilter,
  vRichTextFilter,
  vStrictFilter,
  vSafeInput,
  vCustomFilter
} from '@chenxiaoyuyaofei/inputfilter'
// 或
import directives from '@chenxiaoyuyaofei/inputfilter/directive'

Vue Mixins（inputFilterMixin.js）

• inputFilterMixin: 为组件提供 filterInput、filterFormData、checkInputSafety 等方法
• formInputFilterMixin: 表单场景封装，提供 beforeFormSubmit 等
• tableInputFilterMixin: 表格场景的行/列字段批量过滤

示例：

import {
  inputFilterMixin,
  formInputFilterMixin,
  tableInputFilterMixin
} from '@chenxiaoyuyaofei/inputfilter'

export default {
  mixins: [inputFilterMixin],
  mounted() {
    // 自动为 input/textarea 注册输入与粘贴过滤监听
    this.addInputFilterListeners()
  }
}

全局输入拦截器（inputFilterInterceptor.js）

• 自动拦截页面级输入与粘贴事件
• 表单提交前统一过滤与统计
• 提供对象批量过滤、统计、配置更新等 API

常用方法：

import {
  filterInputValue, // 单值过滤（basic/rich/strict）
  filterInputObject, // 对象/表单数据批量过滤
  getDangerInputStats, // 危险输入统计
  clearDangerInputStats,
  updateGlobalFilterConfig, // 更新全局配置
  addFieldFilterConfig,
  removeFieldFilterConfig,
  isInputSafe,
  getInputFilterMode
} from '@chenxiaoyuyaofei/inputfilter'

全局配置要点（部分）：

updateGlobalFilterConfig({
  defaultMode: 'basic',
  fieldConfig: {
    strict: ['username', 'name', 'title', 'code', 'number', 'id', 'phone', 'mobile', 'email'],
    rich: ['content', 'body', 'text', 'message', 'comment', 'reply', 'detail'],
    basic: ['search', 'keyword', 'query', 'filter', 'sort', 'status', 'type', 'category']
  },
  filterOptions: {
    basic: {
      maxLength: 1000,
      removeHtmlTags: true,
      removeDangerousPatterns: true,
      removeHtmlEntities: true
    },
    rich: {
      maxLength: 5000,
      allowedTags: ['p', 'br', 'b', 'i', 'u', 'strong', 'em', 'span'],
      removeAttributes: true
    },
    strict: { maxLength: 500, removeSpecialChars: false }
  },
  dangerDetection: { enabled: true, showWarning: true, logAttempts: true }
})

HTTP 请求拦截器（inputFilterHttpInterceptor.js）

• 自动过滤 Axios/Vue Resource 的请求数据与参数
• 支持方法白名单、URL 排除、请求头过滤、日志与统计

快速接入：

import axios from 'axios'
import {
  createAxiosInterceptors,
  filterHttpRequestData,
  getHttpFilterStats
} from '@chenxiaoyuyaofei/inputfilter'

createAxiosInterceptors(axios) // 注册请求/响应拦截器

// 手动过滤数据
const data = filterHttpRequestData({ name: '<script>恶意</script>', content: '<p>内容</p>' })
axios.post('/api/save', data)

// 统计
console.log(getHttpFilterStats())

HTTP 配置（部分）：

// 默认：POST/PUT/PATCH 过滤，可添加排除 URL
// addHttpExcludeUrl(/\/upload\//)

常见场景建议

• 用户名/编码/手机号等: 使用严格过滤（strict）
• 内容编辑富文本: 使用富文本过滤（rich）并收敛允许标签
• 搜索/查询词: 使用基础过滤（basic）并限制长度
• 批量数据/表单提交: 使用对象批量过滤 API 或全局拦截

FAQ

• 如何自定义过滤规则？
  • 通过 FILTER_CONFIG 或 updateGlobalFilterConfig 更新允许标签、危险模式、长度等
• 过滤后长度变化如何评估？
  • 使用 getFilterStats(original, filtered) 获取增量指标
• 性能影响如何控制？
  • 仅在必要时过滤、限制实时警告、对大数据使用批处理与缓存

变更日志

• v1.0.0 初始版本：核心过滤、Vue 指令与混入、输入与 HTTP 拦截、可配置导出
• v1.0.1 完善 README.md

License

MIT