非法字符会直接导致querySelector语法错误中断JS执行，并可能被利用实施DOM劫持、XSS或绕过CSP。应使用CSS.escape()转义、优先属性选择器、封装safeQuery及ESLint检测。
因为这会直接触发语法错误导致 JS 中断，还可能被利用构造恶意选择器实施 DOM 劫持或 XSS 链路延伸。
非法字符引发脚本崩溃querySelector 对 CSS 选择器语法极其严格。用户输入若含空格、冒号、点号、方括号、尖括号等（如 user:login、test.class、<script>），拼接后变成 #user:login 或 .test.class，浏览器立刻抛出 SyntaxError，后续所有 JS 逻辑停止执行——这不是警告，是硬性中断。
- 空格 → 选择器被截断为多个无效片段
- 冒号 → 被识别为伪类（
:hover），但后面无合法内容 - 点号 → 触发类名解析失败
- 尖括号或引号 → 破坏字符串边界，甚至造成 HTML 注入前置条件
成为攻击链的入口跳板
即使不崩溃，未经处理的输入也可能被诱导生成危险选择器：
-
*[onerror="alert(1)"]可配合<img>标签触发执行（若页面存在未闭合标签或可注入上下文） -
[id^="user_"][data-token$="abc"]可用于精准定位并窃取敏感属性值 -
iframe[src*="evil.com"]配合contentDocument访问实现跨 iframe 劫持
绕过 CSP 的隐蔽通道
CSP 控制的是脚本加载与执行，不校验选择器合法性。攻击者可先通过其他漏洞（如反射型 XSS）注入一段“合法”脚本，再用该脚本调用 querySelector 动态查找并篡改关键节点（如隐藏支付按钮、替换表单 action 地址）。此时所有操作都在 CSP 允许的脚本内完成，完全规避策略拦截。
正确做法不是“别用”，而是“安全地用”
- 动态值一律经
CSS.escape()处理，如document.querySelector([data-id="${CSS.escape(userId)}"]) - 优先使用属性选择器替代 ID/class，天然支持任意值且语义清晰
- 封装
safeQuery()函数，内部 try/catch 捕获语法错误，返回 null 而非中断 - 开发期用 ESLint 插件扫描
querySelector(字面量，拦截未转义变量
本质上，querySelector 是一把刀，输入是刀柄——握得不稳，伤的是自己。
