html表单本身不防xss，需在提交前、接收后、渲染时三道环节严格处理：前端验证可被绕过，服务端须类型转换+转义+白名单过滤，前端渲染优先用textcontent，innerhtml必须经dompurify处理。
HTML 表单元素本身不防 XSS，真正起作用的是你在提交前、接收后、渲染时的三道处理动作。光靠 <input type="text"> 或 pattern 属性拦不住任何有效攻击。
表单提交前：JS 验证只是障眼法，别信它能防 XSS
用户填完就点提交，你用 onsubmit 拦住并调用 validateForm()，看起来很牢靠——但只要打开 DevTools 改几行 JS，或直接用 curl 发 POST 请求，所有前端校验都形同虚设。
- 正则检查邮箱、手机号等格式，只对 UX 有用，和 XSS 防御无关
-
event.preventDefault()只能阻止本页默认提交，不能阻止恶意请求绕过 - 不要在 JS 里拼接
innerHTML显示错误提示，比如errorEl.innerHTML = '用户名 ' + userInput + ' 不合法'—— 这里已经触发 XSS - 正确做法是统一用
errorEl.textContent = '用户名不合法'，或者把用户输入先过html.escape()（Python）或DOMPurify.sanitize()（JS）再塞进去
服务端接收时：必须对每个字段做类型+转义+白名单三重处理
PHP 的 $_POST['username']、Python 的 request.form['email']、Node.js 的 req.body.comment，拿到的都是原始字符串，没经过任何安全过滤。
- 数字类字段（如
age）立刻用intval()（PHP）、int()（Python）强制转换，丢掉非数字部分 - 字符串类字段（如
bio）必须调用语言原生转义函数：htmlspecialchars($input, ENT_QUOTES, 'UTF-8')（PHP）、html.escape(input, quote=True)（Python） - 若字段允许有限 HTML（如富文本评论），禁止自己写正则删
<script></script>，改用 DOMPurify（服务端版）或 bleach（Python）按白名单过滤标签和属性 - 文件上传字段要单独校验：
Content-Type和扩展名必须匹配，且保存路径不能被 Web Server 直接访问（如放在/var/uploads/而非/public/uploads/）
前端渲染输出时：textContent 是默认选项，innerHTML 是高危例外
你从后端取回数据，准备往页面上放——这是 XSS 最常爆发的环节。哪怕服务端已转义，前端再错一步就前功尽弃。
- 显示用户名、邮箱、时间戳等纯文本？一律用
el.textContent = data，不解析 HTML，零风险 - 非得渲染用户提交的 HTML（如后台编辑器导出的内容）？必须走
DOMPurify.sanitize(dirtyHtml)，再赋给el.innerHTML；别用el.insertAdjacentHTML('beforeend', ...)直接插入 - 插进属性值（如
title="{{ data }}"或data-id="{{ data }}"）时，quote=True不够——双引号属性要确保"被转成"，单引号属性则处理'；URL 类属性（href、src）还得先encodeURIComponent() - 绝对避免
<button onclick="doSomething('{{ data }}')"></button>这种写法，事件处理器里拼用户数据无解
最易被忽略的一点：模板引擎默认行为不一致。Jinja2 的 {{ data }} 默认转义，但 EJS 的 不转，Vue 的 {{ data }} 转而 v-html 不转。上线前不确认这个，等于把门钥匙交给攻击者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
