SSR模板渲染安全基线（输出编码与上下文转义）最佳实践

SSR模板渲染安全基线（输出编码与上下文转义）最佳实践概述服务器端渲染需要针对不同上下文进行正确的输出编码。通过统一封装与危险属性拒绝，可有效降低XSS风险。输出编码封装function htmlEscape(s: string): string {

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

}

function attrEscape(s: string): string {

return htmlEscape(s).replace(/`/g, '')

}

function urlEscape(s: string): string {

try { return encodeURI(s) } catch { return '#' }

}

上下文敏感转义示例function renderLink(text: string, href: string): string {

return `<a href="${urlEscape(href)}">${htmlEscape(text)}</a>`

}

function renderAttr(name: string, value: string): string {

return `${name}="${attrEscape(value)}"`

}

危险属性拒绝function rejectDangerousAttr(name: string, value: string): boolean {

const n = name.toLowerCase()

const v = value.toLowerCase()

if (n.startsWith('on')) return true

if (v.startsWith('javascript:')) return true

return false

}

统一渲染接口function safeRender(tag: string, attrs: Record<string, string>, content: string): string {

const pairs: string[] = []

for (const [k, v] of Object.entries(attrs)) {

if (rejectDangerousAttr(k, v)) continue

pairs.push(renderAttr(k, v))

}

return `<${tag} ${pairs.join(' ')}>${htmlEscape(content)}</${tag}>`

}

运维要点根据上下文选择对应编码策略（HTML、属性、URL）拒绝事件属性与 `javascript:` 危险协议统一渲染封装，避免模板中直接拼接未转义数据通过输出编码与上下文转义的组合，可在SSR场景形成稳健的模板安全基线。