前端安全的输入验证和输出转义最佳实践
前端安全：输入验证 + 输出转义 最佳实践（全网最清晰）
这是前端面试必问、业务必守的安全准则，能直接防御：XSS 攻击、SQL 注入、命令注入、CSRF、非法数据入侵。
我给你整理成能直接背、能直接用的最佳实践。
一、输入验证（Input Validation）最佳实践
1. 永远不要信任用户输入！
前端所有输入都可被篡改，前端验证只是体验，后端必须二次验证。
2. 使用白名单校验（拒绝黑名单）
只允许合法内容，拒绝一切可疑内容
手机号：
/^1[3-9]\d{9}$/邮箱：标准正则
用户名：只允许中文、字母、数字、下划线
禁止输入：
< > ' " \ / & * %等特殊字符
3. 长度限制
所有输入框加最大长度，防止超长攻击、溢出攻击。
4. 数据类型强校验
数字必须是数字
日期必须是日期格式
禁止字符串注入数字字段
5. 禁止直接拼接用户输入到 SQL / HTML / 请求头
这是最危险的行为！
6. 文件上传严格验证
检查文件类型（MIME + 后缀）
检查文件大小
文件重命名存储
上传目录不可执行
7. 框架自带验证优先使用
Vue：VeeValidate / Element 校验
React：Formik / Yup
原生：HTML5
required pattern
8. 敏感关键词过滤
禁止：
script iframe javascript onload onerror alert 等二、输出转义（Output Escaping）最佳实践
核心：用户输入渲染到页面时必须转义！防止 XSS 攻击。
1. HTML 转义（最重要）
把特殊字符转成安全实体：
<→<>→>"→"'→'&→&
2. 不要使用危险 API
禁止：
innerHTMLdocument.writev-html（Vue）dangerouslySetInnerHTML（React）
必须用时，必须先转义。
3. JS 上下文转义
渲染到 JavaScript 变量时，转义：
\ ' " \n \r4. URL 转义
使用：
encodeURIComponent()5. CSS 转义
过滤：
(){}*% 防止 CSS 注入6. 框架默认安全机制
Vue、React 默认插值表达式是安全的，会自动转义。危险的是
v-html 和 dangerouslySetInnerHTML。7. 第三方转义库（推荐）
DOMPurify最安全（XSS 终极防御）
三、前端安全黄金口诀（背会）
用户输入不可信
前端验证是体验，后端验证才是安全
白名单校验，长度限制，类型强校验
输出必须转义，禁止直接渲染 HTML
不用 innerHTML、v-html、document.write
文件上传必须校验类型、大小、重命名
防御 XSS = 输入过滤 + 输出转义 + 安全渲染
四、极简总结（面试满分答案）
输入验证最佳实践
不信任任何用户输入，前后端双重校验
使用白名单规则，限制长度、类型、格式
过滤特殊字符与敏感关键词
文件上传严格校验
输出转义最佳实践
渲染到页面前必须 HTML 转义特殊字符
禁止使用危险的 HTML 插入 API
框架默认插值安全，慎用富文本渲染
使用 DOMPurify 做 XSS 过滤
