如何设计一个防XSS攻击的模板渲染引擎？

答案：构建抗XSS的模板引擎需实现自动上下文感知转义，区分可信与不可信内容，集成CSP，并沙箱化模板逻辑。1. 引擎应根据变量插入位置（HTML文本、属性、JavaScript、URL）自动应用对应转义规则；2. 默认对所有输出转义，仅通过显式语法输出可信任内容；3. 支持生成CSP头部以限制脚本执行；4. 模板语言应禁用动态代码执行与危险对象访问。核心是“默认安全”，确保即使开发者疏忽也能防止XSS攻击。

防止XSS攻击的核心在于正确处理用户输入的输出。设计一个安全的模板渲染引擎，关键是在数据插入HTML上下文时自动进行上下文相关的转义，而不是依赖开发者手动调用转义函数。

1. 自动上下文感知转义

模板引擎必须能识别变量插入的位置（如HTML文本、属性、JavaScript、URL等），并应用对应的转义规则：

• HTML文本内容：将 <, >, &, “, ‘ 转为实体，如 & → &
• HTML属性值：在双引号属性中，需额外处理 ” 为 “
• URL参数：使用 encodeURIComponent 对查询参数编码
• 内联JavaScript：避免直接插入，若必须则使用 JSON.stringify 并配合 CSP

例如，当模板中写 <div title=”{{userInput}}”>{{content}}</div>，引擎应自动判断 {{userInput}} 在属性上下文中，{{content}} 在文本节点中，并分别转义。

2. 明确区分可信任与不可信内容

提供安全机制允许开发者标记某些内容为“已清理”或“可信任”，但必须显式声明，不能默认信任。

• 默认所有变量输出都转义
• 若需输出原始HTML，使用特殊语法如 {{{safeHtml}}} 或 {{safe(safeHtml)}}
• 此类操作应记录日志或要求注入白名单校验

这样既保证默认安全，又保留灵活性。

3. 支持内容安全策略（CSP）集成

模板引擎可生成或注入 CSP 头部，限制脚本执行来源。

• 自动在响应头添加 Content-Security-Policy: default-src ‘self’
• 避免内联脚本和 javascript: 协议
• 鼓励通过外部脚本绑定事件

CSP 是纵深防御的重要一环，即使有少量转义遗漏，也能阻止恶意脚本执行。

4. 沙箱化模板逻辑

模板语言本身应限制能力，避免执行任意代码。

• 不支持动态代码求值（如 eval）
• 过滤危险关键字（__proto__, constructor, __defineGetter__ 等）
• 沙箱运行期环境，限制访问全局对象

防止模板注入导致远程代码执行。

基本上就这些。核心是“默认安全”——所有变量输出自动转义，开发者必须显式选择不安全行为。结合上下文转义、信任标记控制和CSP，就能构建一个抗XSS的模板引擎。不复杂但容易忽略细节。