如何安全存储含 HTML 链接的富文本到数据库

陆砚码

2026-09-27 • 👁 0人浏览过

本文讲解在数据库中安全存储用户输入的含和
标签的富文本（如描述字段），重点解决 URL 中 & 符号被双重转义导致解析失败的问题，并提供编码/解码与字符串替换两种可靠方案。本文讲解在数据库中安全存储用户输入的含 ` ` 和 `` 标签的富文本（如描述字段），重点解决 url 中 `&` 符号被双重转义导致解析失败的问题，并提供编码/解码与字符串替换两种可靠方案。在 Web 应用中，常需将用户通过

输入的带格式文本（例如含换行转 <br>、链接转 <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c">）持久化至数据库。但若直接对 HTML 字符串做 Base64 编码（如 btoa()）再存储，极易因特殊字符（尤其是 URL 中的 &）引发解码失败——典型报错：Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. 这是因为 & 在 HTML 中常被自动转义为 &，而 btoa() 无法处理已转义的 Unicode 字符串（如 & 对应字节序列不合法）。
✅ 推荐方案：服务端预处理 + 客户端安全还原
最稳定、可维护性最强的方式是
避免使用 btoa/atob 处理含 HTML 的文本
，改用语义清晰的字符串替换策略：
1. 存储前：将 & 替换为占位符（或直接保留原始 &）
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">// 假设用户输入的 HTML 片段如下：
const rawHtml = 'Visit <a href="https://example.com/?q=1&p=2">Example<br>Line break';

// ✅ 正确做法：统一还原为原始 &（前提是前端生成 HTML 时未过度转义）
const safeForDb = rawHtml.replace(/&/g, '&');

// 或更保守地使用唯一占位符（防冲突）：
// const safeForDb = rawHtml.replace(/&/g, '__AMP__');</code></div>
2. 读取后：按需还原并渲染（确保 XSS 安全！）
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">// 从 DB 读取后，恢复 &（若用了占位符则反向替换）
const fromDb = 'Visit Example<br>Line break';
// const fromDb = rawHtml.replace(/__AMP__/g, '&');

// ⚠️ 关键：绝不直接 innerHTML！先做白名单过滤
function sanitizeHtml(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  // 仅保留 <a> 和 <br>，移除其他标签及危险属性
  const allowedTags = ['A', 'BR'];
  const nodes = Array.from(div.childNodes);
  nodes.forEach(node => {
    if (node.nodeType === Node.ELEMENT_NODE) {
      if (!allowedTags.includes(node.tagName)) {
        node.remove();
      } else if (node.tagName === 'A') {
        const href = node.getAttribute('href');
        // 仅允许 http(s):// 开头的 href，且无 javascript: 等危险协议
        if (!href || !/^https?:\/\//i.test(href)) {
          node.removeAttribute('href');
        }
      }
    }
  });
  return div.innerHTML;
}

// 渲染到页面
element.innerHTML = sanitizeHtml(fromDb); // 安全输出</code></div>
❌ 为什么不推荐 btoa/atob？
btoa() 仅支持 Latin-1 字节（0–255），而 & 是 UTF-8 编码的多字节序列，直接传入会抛出 InvalidCharacterError；
即使前端强制 encodeURIComponent 后再 btoa，服务端也需严格 atob → decodeURIComponent 双重解码，链路复杂且易出错；
数据库中存储 Base64 字符串增大体积，且丧失可读性与索引能力。
✅ 最佳实践总结
存储层
：使用 TEXT 类型字段（非 VARCHAR 超长限制），内容保持语义化 HTML（& 不转义）；
输入层
：前端生成链接时，确保 & 未被重复转义（检查富文本编辑器配置）；
输出层
：服务端或客户端必须执行白名单 HTML 过滤，禁用 on* 事件、javascript: 协议等；
扩展性
：未来若需支持更多标签（如 <strong>），只需更新白名单与校验逻辑，无需重构存储格式。
遵循以上方案，即可在保障安全性与兼容性的前提下，稳健实现“带链接的富文本入库与渲染”。
                            </div>

<nav class="phpwebsoft-article-nav" aria-label="文章导航">

<a href="http://www.phpwebsoft.com/news/14272.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">上一篇</div>
                                        <div class="phpwebsoft-article-nav-title">PHP三元运算符处理表单_PHP三元运算符表单数据处理</div>
                                    </div>
                                </a>

<a href="http://www.phpwebsoft.com/news/14286.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-next">
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">下一篇</div>
                                        <div class="phpwebsoft-article-nav-title">c++中如何操作二进制文件_c++二进制读写基本步骤【实战】</div>
                                    </div>
                                    <span>›</span>
                                </a>

</nav>
                        </div>
                    </article>

<section class="phpwebsoft-content-section" style="margin-top: 20px;">
                        <h2 class="phpwebsoft-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="phpwebsoft-article-list">

<li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14272.html" class="phpwebsoft-article-link">PHP三元运算符处理表单_PHP三元运算符表单数据处理</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14269.html" class="phpwebsoft-article-link">python变量如何在作用域使用</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14267.html" class="phpwebsoft-article-link">什么是“Lockdrop”？一种锁定资产换取早期代币的方式</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14262.html" class="phpwebsoft-article-link">python解包赋值_利用星号表达式实现多变量赋值与元素交换技巧</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14215.html" class="phpwebsoft-article-link">Net内存管理五大基础</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14286.html" class="phpwebsoft-article-link">c++中如何操作二进制文件_c++二进制读写基本步骤【实战】</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14287.html" class="phpwebsoft-article-link">正则表达式匹配两个字符串,该怎么处理</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14288.html" class="phpwebsoft-article-link">php怎么使用Flight错误处理_php如何自定义404/500页面响应</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14292.html" class="phpwebsoft-article-link">golang redis怎么实现</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/14294.html" class="phpwebsoft-article-link">Python 容器内 PID 1 的正确处理</a>
                                <div class="phpwebsoft-article-meta">2026-09-27</div>
                            </li>

</ul>
                    </section>
                </div>

<aside class="phpwebsoft-sidebar phpwebsoft-sidebar-right" aria-label="侧边栏">
    
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">推荐阅读</h3>
        <div class="phpwebsoft-recommend-grid">

<a href="http://www.phpwebsoft.com/news/20974.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="详解链抽象四小龙：Omni Network、Cycle Network、Initia、Polymer">
                </div>
                <div class="phpwebsoft-recommend-title">详解链抽象四小龙：Omni Network、Cycle Network、Initia、Polymer</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20960.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="一千万数据非实时搜索，但要求快速开发，有什么建议啊">
                </div>
                <div class="phpwebsoft-recommend-title">一千万数据非实时搜索，但要求快速开发，有什么建议啊</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20959.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="Go GAE 数据存储：解决对象成员为空的问题">
                </div>
                <div class="phpwebsoft-recommend-title">Go GAE 数据存储：解决对象成员为空的问题</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20957.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="PHP简单的伪静态URL机制实现">
                </div>
                <div class="phpwebsoft-recommend-title">PHP简单的伪静态URL机制实现</div>
            </a>

</div>
    </div>

<div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">最新文章</h3>
        <ul class="phpwebsoft-article-list">

<li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20974.html" class="phpwebsoft-article-link">详解链抽象四小龙：Omni Network、Cycle Network、Initia、Polymer</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20960.html" class="phpwebsoft-article-link">一千万数据非实时搜索，但要求快速开发，有什么建议啊</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20959.html" class="phpwebsoft-article-link">Go GAE 数据存储：解决对象成员为空的问题</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20957.html" class="phpwebsoft-article-link">PHP简单的伪静态URL机制实现</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20947.html" class="phpwebsoft-article-link">Python中正则表达式怎么用 Python中正则表达式指南</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20945.html" class="phpwebsoft-article-link">php函数日志记录第三方模块问题解答</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>

</ul>
    </div>

<div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">热门标签</h3>
        <div class="phpwebsoft-article-tag-list">

</div>
    </div>
</aside>
            </div>
        </div>
    </main>

<footer class="phpwebsoft-footer">
        <div class="phpwebsoft-container">
            <div class="phpwebsoft-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.phpwebsoft.com/22.html" class="phpwebsoft-footer-link">免责声明</a>
                
                <a href="http://www.phpwebsoft.com/23.html" class="phpwebsoft-footer-link">关于我们</a>
                
                <a href="http://www.phpwebsoft.com/24.html" class="phpwebsoft-footer-link">联系我们</a>
                
                <a href="http://www.phpwebsoft.com/25.html" class="phpwebsoft-footer-link">投诉删除</a>
                
                <a href="http://www.phpwebsoft.com/26.html" class="phpwebsoft-footer-link">投稿须知</a>
                
                
            </div>
            <div class="phpwebsoft-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 websoft网络软件专家
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025061481号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

<button class="phpwebsoft-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

<script src="http://www.phpwebsoft.com/static/v10/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>