本文介绍如何在数据库中安全存储用户输入的含超链接（）和换行（）的 HTML 文本，重点解决 & 等 HTML 实体编码引发的解码失败问题，并提供前后端协同处理的可靠方案。
本文介绍如何在数据库中安全存储用户输入的含超链接（``）和换行（`
`）的 HTML 文本，重点解决 `&` 等 HTML 实体编码引发的解码失败问题，并提供前后端协同处理的可靠方案。
在 Web 应用中，常需将富文本描述（如带链接的说明文字）存入数据库并原样渲染。典型场景是：前端
⚠️ 注意：切勿直接对 HTML 字符串使用 btoa()/atob() 进行 Base64 编解码——因为 HTML 中的 &、<、" 等实体在 btoa() 前若未经标准化处理，会导致字节序列不合法，触发 DOMException: Failed to execute 'atob' 错误。根本原因在于 btoa() 仅接受 UTF-8 编码下的 ASCII 子集（U+0000–U+00FF），而未转义的 & 符号本身虽合法，但 & 是多字节字符串，在编码/解码链中极易错位。
✅ 推荐方案：语义化替换 + 存储净化，而非盲目编码
立即学习“前端免费学习笔记（深入）”；
-
入库前：统一转义关键实体（推荐）
若业务仅需支持
和 标签，建议在服务端（如 Node.js/Python/PHP）或强校验的前端环节，将原始 HTML 中的 & 替换为 &，同时确保其他危险字符（如 ）也被正确转义（除非你明确启用 HTML 渲染且已做 XSS 过滤）。例如：
// 前端提交前预处理（仅当确定后端不处理转义时）
function sanitizeForStorage(html) {
return html
.replace(/&/g, '&') // 必须最先处理：防止 & 被二次转义
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
}
// 示例
const rawInput = 'Visit https://example.com?a=1&b=2 and <a href="https://test.com?x=1&y=2">click me</a>';
const safeHtml = sanitizeForStorage(rawInput);
// → "Visit https://example.com?a=1&b=2 and <a href="https://test.com?x=1&y=2">click me</a>"-
出库后：安全渲染（服务端或客户端）
- 若在服务端模板（如 EJS、Jinja2）中输出，使用 {{ variable | safe }} 或等效机制；
- 若在前端用 innerHTML 渲染，务必确认内容已通过上述净化流程，且不含 <script>、onerror 等执行性标签（本例因仅允许 <br>/<a>，可配合白名单正则进一步过滤）：</script>
// 简单白名单校验（生产环境建议用 DOMPurify 等专业库）
function allowOnlyBrAndA(html) {
const temp = document.createElement('div');
temp.innerHTML = html;
const walker = document.createTreeWalker(
temp,
NodeFilter.SHOW_ELEMENT,
{
acceptNode: (node) =>
node.tagName === 'BR' || node.tagName === 'A' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
}
);
return temp.innerHTML;
}-
替代思路：存储 Markdown，渲染时转换
更健壮的做法是要求用户输入 Markdown（如 [click me](https://https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c)），后端存为纯文本，读取时用 marked / markdown-it 渲染为 HTML 并自动处理 URL 编码，天然规避 & 解析歧义。
? 关键总结：
- btoa()/atob() 不适用于含 HTML 实体的字符串，应避免用于此场景；
- & 必须优先转义为 &，否则 & 会被误解析为 & + amp;，破坏链接结构；
- 数据库字段类型建议使用 TEXT（MySQL/PostgreSQL）或 CLOB（Oracle），避免长度截断；
- 永远假设用户输入不可信——即使只允许
和 ，也需验证 href 是否以 http:// 或 https:// 开头，拒绝 javascript: 伪协议。
通过语义化转义与白名单控制，即可在保障安全性的同时，精准支持带参数链接的富文本存储与展示。
