必须转义、&、"、'五个字符才能拦住基础xss；漏任一字符都可能被绕过，如漏&则#x3c;可还原为
直接用用户输入拼进 HTML 标签属性，等于把控制权交给了攻击者——只要能闭合引号，就能加任意属性，包括 onerror、onclick、src、formaction 这类可触发逻辑的字段。
为什么 input value="xxx" 会变成执行入口
表面看只是回显搜索词，但攻击者提交 " onfocus="alert(1)，最终生成的就是：<input value="" onfocus="alert(1)">。浏览器解析时，onfocus 被识别为事件处理器，焦点一落在输入框就触发。
- 闭合引号是关键动作，不依赖
<script></script>或尖括号，单引号、双引号、甚至"实体都能绕过简单正则检测 -
oncut、oncontextmenu、oninvalid等低频事件属性常被漏进白名单或 WAF 规则 - 如果后端把用户输入存进数据库、前端再读出来拼进
innerHTML，两次“看似安全”的操作叠加，反而形成完整攻击链
href 和 src 中的协议陷阱
这两个属性不是只放 URL 就行；浏览器会主动解析并执行其中的伪协议逻辑。比如 href="javascript:fetch('/api/leak')" 点击即发请求，src="data:text/html,<img src="x" onerror="alert(1)">" 也能触发嵌套执行。
- 必须在服务端或净化层校验协议头，只允许
https://、http://、/、#、mailto:等明确可信的协议 - 不要只检查开头是否为
javascript:，攻击者可用javascript:（HTML 实体编码）绕过字符串匹配 -
srcdoc属性极易被忽略——它等价于内联 HTML 页面，<iframe srcdoc="<img src=x onerror=alert(1)>"></iframe>直接触发 DOM XSS
class/id 不是安全区，而是潜在跳板
很多团队默认认为 class 和 id 是纯样式或结构标识，不会执行代码。但一旦前端 JS 用它们做动态选择器或路由判断，风险就立刻转移。
- 例如：
document.getElementById(userInput).click()—— 如果userInput是"x"><img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="HTML标签属性注入导致的第三方逻辑非法调用风险复盘">，实际执行的是document.getElementById("x"><img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="HTML标签属性注入导致的第三方逻辑非法调用风险复盘">").click()，语法错误？不，浏览器先解析 DOM，onerror已经执行了 -
class被用于 CSS-in-JS 框架的动态样式注入、或作为第三方组件（如图表库）的 hook 标识时，也可能成为攻击面 - 白名单机制若只放行
class却不限制其值格式（比如允许包含引号、尖括号、JS 关键字），就等于开了后门
富文本场景下 innerHTML + 白名单 ≠ 安全闭环
有人以为用 DOMPurify.sanitize(html, {ALLOWED_TAGS: ['p','strong']}) 再塞进 innerHTML 就高枕无忧，其实隐患仍在：
- DOMPurify 输出仍是字符串，赋给
innerHTML后，浏览器会重新解析——若配置漏掉svg/onload或新版事件（如onabort），照样执行 - 更常见的是：净化后的 HTML 存入数据库，前端读取时又拼进模板字符串：
`<div>${sanitized}</div>`，而模板引擎关闭了转义（如 EJS 的），等于绕过所有净化 - 真正可控的做法是：服务端净化后，前端用
textContent渲染；若需保留格式，改用createElement+setAttribute构造节点，不走字符串插入路径
最易被忽略的点是：属性注入不依赖脚本标签，也不需要服务器返回恶意内容——它靠的是浏览器对 HTML 属性的原生解析行为。只要引号能被闭合、协议没被校验、事件名在白名单里，攻击就成立。防御必须卡在属性写入前，而不是等它进了 DOM 才去扫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
