在前端框架中安全渲染HTML字符串的教程-html教程-PHP中文网

在前端框架中安全渲染HTML字符串的教程

心靈之曲

发布： 2025-10-25 11:07:11

原创

601人浏览过

在前端框架中安全渲染HTML字符串的教程

当从后端或数据库获取包含html标签的字符串时，直接显示常导致标签被当作纯文本。本教程将深入探讨如何在前端框架中，特别是react环境下，安全有效地将这些html字符串渲染为实际的页面元素。我们将重点介绍`dangerouslysetinnerhtml`属性的使用方法、其背后的原理，并强调相关的安全风险与最佳实践，以帮助开发者避免潜在的跨站脚本（xss）攻击。

引言：HTML字符串渲染的挑战

在Web开发中，我们经常需要从数据库、API或其他数据源获取包含HTML标签的文本内容。例如，你可能从后端接收到一个字符串变量 greeting，其内容是 hello, <br /> have a good day,。当你尝试在页面上直接显示这个变量时，发现 <br /> 并没有被解析为换行符，而是原样显示在了屏幕上。这通常是因为前端框架或模板引擎为了安全考虑，默认会对所有动态插入的内容进行HTML转义，将 < 转换为，从而避免潜在的跨站脚本（XSS）攻击。

例如，以下常见的模板语法或直接文本绑定：

<i id="break" class="textTitle">{{ greeting }}</i>

登录后复制

或在JavaScript中直接设置 innerText：

document.getElementById("break").innerText = greeting;

登录后复制

都会导致 <br /> 被当作普通文本处理。

立即学习“前端免费学习笔记（深入）”；

传统JavaScript方法：innerHTML

在不使用前端框架的纯JavaScript环境中，解决这个问题最直接的方法是使用 innerHTML 属性。innerHTML 允许你设置或获取元素的HTML内容，它会将字符串中的HTML标签解析并渲染为实际的DOM元素。

<i id="break" class="textTitle"></i>
<script>
   const greeting = "hello, <br /> have a good day,";
   document.getElementById("break").innerHTML = greeting;
</script>

登录后复制

这段代码会正确地将 greeting 变量中的 <br /> 渲染为换行符。然而，innerHTML 存在严重的安全隐患。如果 greeting 变量的内容来自用户输入或不可信的来源，恶意用户可能会注入 <script> 标签或其他HTML代码，从而发起XSS攻击。

前端框架中的解决方案：dangerouslySetInnerHTML

在React等现代前端框架中，出于安全考虑，框架默认不会直接提供像 innerHTML 这样直接操作DOM的方法。相反，它们提供了专门的属性来处理需要渲染HTML字符串的场景，例如React中的 dangerouslySetInnerHTML。

dangerouslySetInnerHTML 是React对浏览器DOM中 innerHTML 的替代方案。它的命名明确地警告开发者，使用此属性存在潜在的安全风险，因为它允许你将未经净化的HTML直接注入到DOM中。

使用方法：

dangerouslySetInnerHTML 属性需要传入一个对象，该对象包含一个名为 __html 的键，其值就是你想要渲染的HTML字符串。

import React from 'react';

function MyComponent() {
  const greeting = "hello, <br /> have a good day,";

  return (
    <i id="break" className="textTitle" dangerouslySetInnerHTML={{ __html: greeting }}></i>
  );
}

export default MyComponent;

登录后复制

在这个例子中，greeting 变量中的 <br /> 将会被React正确地解析并渲染为换行符。

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

为什么原始代码中的 innerHTML 尝试会失败？

原始问题中提到尝试了以下代码：

<i id="break" class="textTitle">{{ greeting }}</i>
<script>
   document.getElementById("break").innerHTML = "<br/>";
</script>

登录后复制

这段代码的问题在于：

{{ greeting }} 这部分通常是模板引擎的语法，它会先将 greeting 变量的值（例如 hello, <br /> have a good day,）以转义后的形式（例如 hello,
have a good day,）插入到 <i> 标签中。
随后的JavaScript代码 document.getElementById("break").innerHTML = "<br/>"; 只是将 <i> 标签的内容替换成了 <br/>，而不是将原始的 greeting 变量内容进行HTML解析。它并没有解决 {{ greeting }} 默认转义的问题，也没有将完整的 greeting 字符串进行HTML渲染。

正确的做法是直接在React组件中，使用 dangerouslySetInnerHTML 属性将完整的 greeting 字符串传入。

安全考量与最佳实践

正如其名称所示，dangerouslySetInnerHTML 是一个“危险”的属性。如果不谨慎使用，它可能导致严重的XSS漏洞。

输入净化（Sanitization）： 永远不要将未经净化的用户输入直接传递给 dangerouslySetInnerHTML。在将HTML字符串渲染到页面之前，必须对其进行严格的净化处理，移除所有潜在的恶意标签和属性（如 <script> 标签、onerror 属性等）。可以使用成熟的HTML净化库，例如 DOMPurify。
```
import DOMPurify from 'dompurify';

// ...
const rawHtml = "<img src=x onerror=alert('XSS')>";
const cleanHtml = DOMPurify.sanitize(rawHtml);

return (
  <div dangerouslySetInnerHTML={{ __html: cleanHtml }}></div>
);
```
登录后复制
来源信任： 仅当HTML内容来自完全可信的来源（例如，你自己的后端生成并确认安全的静态内容）时，才考虑使用 dangerouslySetInnerHTML。
最小权限原则： 如果只需要渲染部分文本样式（如粗体、斜体），考虑使用Markdown解析器或富文本编辑器输出的更安全的格式，而不是直接渲染原始HTML。
替代方案： 如果HTML内容结构简单且可控，可以考虑手动解析HTML字符串，然后通过React组件构建DOM树，而不是直接注入HTML。但这通常更复杂。

总结

当需要在前端框架中渲染包含HTML标签的字符串时，直接绑定变量通常会导致HTML被转义为纯文本。对于React等框架，应使用 dangerouslySetInnerHTML 属性来明确指示框架将字符串内容作为HTML进行解析。然而，使用此属性务必谨慎，因为它绕过了框架的默认安全机制。始终记住对来自不可信来源的HTML内容进行严格的净化处理，以防范潜在的XSS攻击。安全地渲染HTML字符串是前端开发中的一个重要环节，需要开发者充分理解其机制和风险。

以上就是在前端框架中安全渲染HTML字符串的教程的详细内容，更多请关注php中文网其它相关文章！