URL参数白名单与DOM-Based XSS防护（URLSearchParams/校验）最佳实践

背景与价值DOM-Based XSS多源于未校验的URL参数。白名单与转义可大幅降低风险。统一规范白名单：仅允许指定参数；类型校验：对值执行长度与字符集限制；输出转义：统一HTML转义再写入DOM。核心实现白名单与校验const allowParams = new Map<string, { maxLen: number; re: RegExp }>([

['q', { maxLen: 64, re: /^[A-Za-z0-9_\- ]+$/ }],

['lang', { maxLen: 5, re: /^[a-z]{2,5}$/ }]

])

function getParam(name: string): string | null {

const u = new URL(document.location.href)

const v = u.searchParams.get(name)

if (v == null) return null

const rule = allowParams.get(name)

if (!rule) return null

if (v.length > rule.maxLen) return null

if (!rule.re.test(v)) return null

return v

}

function escapeHtml(s: string): string { return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''') }

受控写入function setText(el: Element, s: string) { el.textContent = s }

function setHtml(el: Element, s: string) { el.innerHTML = escapeHtml(s) }

落地建议仅对白名单参数进行读取与校验，写入DOM前统一转义或使用 `textContent`。对搜索与语言等参数设置合理长度与字符集规则，拒绝异常值。验证清单参数是否命中白名单并通过校验；DOM写入是否经转义或文本写入。