URL 与 HTML 编码：实用指南，构建更安全的 Web 应用程序

Source: Dev.to

编码是防止链接破损和跨站脚本（XSS）攻击的最简单、最有效的防御手段之一。本指南阐述了何时使用 URL 编码、何时使用 HTML 实体编码，以及如何避免常见的导致漏洞的陷阱。

为什么编码很重要

未编码的用户输入可能会破坏 URL、损坏查询参数，或在浏览器中被解释为可执行代码。正确的编码可确保数据安全传输并以文本形式呈现，而不是指令。

URL 编码基础

• 用百分号编码的字节替换不安全字符（例如，空格 → %20）。
• 对查询参数、包含空格/UTF‑8 的路径段以及文件名至关重要。
• 对每个组件单独编码；不要对整个 URL 进行双重编码。

HTML 实体编码

• 在 HTML 中渲染用户内容时，将 ```, ", ', 和 & 转换为安全实体。
• 防止浏览器解释注入的标记或脚本。
• 在渲染时进行编码，而不是在存储输入时，以避免持久化问题。

开发者常犯的错误

• 手动拼接 URL 而未对参数进行编码。
• 对完整的 URL 字符串进行编码后，又在浏览器中再次编码（双重编码）。
• 渲染用户生成的 HTML 时未进行消毒或转义。
• 混用上下文：在需要 JavaScript 字符串转义的地方使用了 HTML 编码。

上下文感知的转义

将转义方式匹配到具体的 sink：

• HTML 文本节点： HTML 实体编码。
• HTML 属性： 编码引号；推荐使用双引号加 HTML 实体。
• JavaScript 字符串： 使用 JS 字符串转义；绝不要将原始用户输入直接注入脚本。
• 属性中的 URL： 仅对参数部分进行编码；验证允许的协议（https、mailto）。

安全处理查询字符串

• 使用原生 API（URL、URLSearchParams）构建 URL，而不是字符串拼接。
• 验证参数白名单；剔除意外的键。
• 在存储或记录之前统一大小写和编码。

通过编码和验证防止 XSS

• 输出时进行编码，输入时进行验证。两者缺一不可。
• 使用内容安全策略（CSP）降低遗漏转义的影响。
• 避免对用户内容使用 innerHTML；优先使用文本设置器（如 textContent）。
• 模板系统通常会自动转义——保持其开启状态。

处理文件上传和下载

• 生成下载链接时对文件名进行 URL 编码。
• 在服务器端对文件名进行消毒；阻止路径遍历序列（../）。
• 使用带引号的文件名和 UTF‑8 支持的 Content‑Disposition。

测试和调试编码问题

• 在开发者工具中检查最终渲染的 HTML 和网络请求。
• 在控制台使用 decodeURIComponent / encodeURIComponent 验证预期结果。
• 使用 url‑html‑encoder 工具，将原始、已编码和已解码的值并排比较，以发现错误。

快速最佳实践

• 编码参数，而不是整个 URL；避免双重编码。
• 在正确的上下文中转义输出（HTML、属性、JS 字符串、URL）。
• 验证用户提供链接的协议方案。
• 依赖框架的默认转义并保持其启用。

相关工具： 使用 url-html-encoder 安全地编码参数、HTML 实体，并在发布前测试边界情况。正确的编码是防止重大安全问题的一个小步骤。

Originally published at padawanabhi.de