前端表单安全与输入净化（XSS/模板注入防线）最佳实践

前端表单安全与输入净化（XSS/模板注入防线）最佳实践概述表单输入是XSS与模板注入的主要入口。通过统一的验证、转义与净化封装，可在UI层形成第一道安全防线。输入验证与白名单function validateEmail(s: string): boolean { return /^\S+@\S+\.\S+$/.test(s) }

function validateName(s: string): boolean { return /^[a-zA-Z0-9_\-]{1,50}$/.test(s) }

转义与净化封装function escapeTpl(input: string): string {

return input.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''')

}

function sanitizeHtml(input: string): string { return escapeTpl(input) }

安全渲染接口declare const trustedTypes: any

function createPolicy(name: string) {

if (trustedTypes?.createPolicy) { return trustedTypes.createPolicy(name, { createHTML: (s: string) => sanitizeHtml(s) }) }

return null

}

function safeSetHTML(el: HTMLElement, html: string) {

const policy = createPolicy('app-policy')

const safe = policy ? policy.createHTML(html) : sanitizeHtml(html)

;(el as any).innerHTML = safe

}

运维要点在表单提交前进行前端校验并在后端二次验证使用统一的转义与净化封装，避免直接写入HTML配合CSP与Trusted Types形成多层防护通过统一封装与白名单验证，可在前端层面有效降低XSS与模板注入风险。