在JavaScript和React中安全渲染HTML字符串的教程-html教程-PHP中文网

在JavaScript和React中安全渲染HTML字符串的教程

花韻仙語

发布： 2025-10-24 10:44:27

原创

762人浏览过

在JavaScript和React中安全渲染HTML字符串的教程

本教程旨在解决从数据库或变量中获取的html字符串被显示为纯文本的问题。我们将探讨在原生javascript中使用innerhtml以及在react框架中利用dangerouslysetinnerhtml属性来正确渲染html内容的方法。文章将详细解释这些机制的工作原理、提供示例代码，并重点强调使用这些功能时必须注意的跨站脚本（xss）安全风险及防范措施，确保在实现功能的同时保障应用安全。

理解HTML字符串渲染的挑战

在Web开发中，我们经常会遇到需要从后端服务、数据库或用户输入中获取包含HTML标签的字符串，并将其作为实际的HTML结构渲染到页面上。例如，一个存储在数据库中的问候语可能包含换行符<br />：

"hello, <br /> have a good day,"

登录后复制

然而，当直接将这样的字符串通过模板引擎或某些JavaScript方法插入到DOM中时，我们可能会发现<br />标签并没有被解释为换行，而是作为普通文本直接显示在屏幕上，例如：“hello,
have a good day,”。这是因为大多数现代前端框架和浏览器API默认会出于安全考虑对插入的内容进行HTML实体编码，以防止潜在的跨站脚本（XSS）攻击。

常见误区与原因分析

许多开发者在遇到这个问题时，可能会尝试以下几种方法：

直接在模板中绑定变量： 在许多模板语言或框架（如React的JSX、Vue的Mustache语法、Angular的插值表达式）中，直接使用{{ greeting }}这样的语法来显示变量内容时，默认行为通常是将变量值作为纯文本处理，并自动进行HTML转义。这意味着所有的HTML标签都会被转换为其对应的HTML实体（例如，< 变为），从而避免了标签被浏览器解析。
```

<i id="break" class="textTitle">{{ greeting }}</i>
```
登录后复制
在这种情况下，即使greeting变量包含HTML标签，它们也会被安全地编码并显示为字面文本。

立即学习“Java免费学习笔记（深入）”；
尝试使用原生JavaScript的innerHTML（但方式不当）： 开发者可能会想到使用JavaScript的innerHTML属性，因为它是原生DOM操作中用于设置元素HTML内容的标准方法。然而，如果使用方式不当，也可能无法达到预期效果。例如，以下代码尝试用一个固定的<br/>字符串替换元素内容：
```
<i id="break" class="textTitle">{{ greeting }}</i>
<script>
   // 这段代码会将id为"break"的元素内容替换为固定的"<br/>"
   // 而不是渲染变量"greeting"中的HTML
   document.getElementById("break").innerHTML = "<br/>";
</script>
```
登录后复制
这段代码的问题在于，它将id="break"的元素内容替换为了一个固定的字符串<br/>，而没有使用到我们想要渲染的greeting变量。此外，如果{{ greeting }}是框架的渲染机制，这段脚本可能在框架渲染之后执行，或者与框架的DOM管理冲突。

解决方案一：针对React应用的dangerouslySetInnerHTML

在React框架中，为了明确告知React我们需要插入未经转义的HTML字符串，并意识到这可能带来的安全风险，React提供了一个特殊的属性：dangerouslySetInnerHTML。

dangerouslySetInnerHTML 的使用

dangerouslySetInnerHTML 属性期望一个对象作为其值，该对象必须包含一个名为 __html 的键，其值就是你想要渲染的HTML字符串。

import React from 'react';

function MyComponent({ greeting }) {
  // 假设 greeting 是 "hello, <br /> have a good day,"
  return (
    <i id="break" className="textTitle" dangerouslySetInnerHTML={{ __html: greeting }}></i>
  );
}

export default MyComponent;

登录后复制

解释：

dangerouslySetInnerHTML： 这个属性名称本身就包含了“危险”二字，旨在提醒开发者在使用时要格外小心。
{{ __html: greeting }}： React要求将HTML字符串包装在一个具有__html键的对象中。这是为了防止意外地将字符串直接赋值给dangerouslySetInnerHTML，强制开发者明确其意图。

通过这种方式，React会跳过其默认的HTML转义机制，直接将greeting变量中的HTML字符串作为DOM元素的内容插入到<i>标签中，从而使<br />等标签被正确解析。

解决方案二：针对原生JavaScript的innerHTML

对于不使用React等前端框架，或者在纯原生JavaScript环境中操作DOM的场景，innerHTML属性是渲染HTML字符串的标准方法。

innerHTML 的使用

你可以通过获取DOM元素的引用，然后将其innerHTML属性设置为包含HTML的字符串。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

<!DOCTYPE html>
<html>
<head>
<title>原生JS渲染HTML</title>
</head>
<body>

<i id="greetingElement" class="textTitle"></i>

<script>
  const greeting = "hello, <br /> have a good day,"; // 假设这是从数据库获取的HTML字符串
  const element = document.getElementById("greetingElement");

  // 将HTML字符串赋值给元素的innerHTML属性
  if (element) {
    element.innerHTML = greeting;
  }
</script>

</body>
</html>

登录后复制

解释：

document.getElementById("greetingElement")：获取到需要操作的DOM元素。
element.innerHTML = greeting;：将greeting变量中的HTML字符串直接赋值给元素的innerHTML属性。浏览器会解析这个字符串并将其中的HTML标签渲染为实际的DOM结构。

安全警示：跨站脚本攻击 (XSS)

无论是使用React的dangerouslySetInnerHTML还是原生JavaScript的innerHTML，都存在严重的跨站脚本（XSS）安全风险。

什么是XSS？ XSS攻击是指攻击者将恶意脚本注入到网页中，当其他用户访问该网页时，这些脚本就会在用户的浏览器上执行。如果你的HTML字符串来源于用户输入或不可信的第三方数据，攻击者可能会注入如下所示的恶意代码：

"Hello, <script>alert('You are hacked!');</script>"

登录后复制

如果直接渲染这段字符串，用户的浏览器就会执行alert('You are hacked!')，这只是一个简单的示例。更复杂的攻击可以窃取用户Cookie、会话令牌，甚至重定向用户到恶意网站。

防范措施：

输入消毒 (Sanitization)： 在将任何来自用户或不可信源的HTML字符串渲染到页面之前，必须对其进行严格的消毒（Sanitization）。消毒是指移除或转义字符串中所有潜在的恶意标签和属性。
- 使用成熟的库： 不要尝试自己编写HTML消毒函数，这非常复杂且容易出错。应使用经过广泛测试和验证的第三方库，例如：
  - DOMPurify (JavaScript): 一个高效且安全的HTML消毒库，可以在浏览器和Node.js环境中使用。
  - sanitize-html (Node.js): 另一个流行的服务器端HTML消毒库。
- 示例 (使用DOMPurify):
```
import DOMPurify from 'dompurify';

const untrustedHTML = "<img src='x' onerror='alert(\"XSS!\")'><p>Hello</p>";
const cleanHTML = DOMPurify.sanitize(untrustedHTML);
// cleanHTML 现在是 "<p>Hello</p>"，恶意脚本已被移除

// 在React中
<div dangerouslySetInnerHTML={{ __html: cleanHTML }}></div>
```
  登录后复制
最小化使用： 尽量避免使用dangerouslySetInnerHTML或innerHTML。如果只需要简单的文本格式（如加粗、斜体、列表），可以考虑使用Markdown解析器将Markdown转换为HTML，或者通过CSS样式来控制文本呈现。
信任数据源： 只有当HTML字符串完全来自你信任的、且已经过严格验证和处理的后端系统时，才考虑直接渲染。

总结

渲染包含HTML标签的字符串是一个常见的需求，但必须谨慎处理。

在React应用中，使用dangerouslySetInnerHTML={{ __html: yourHtmlString }}是实现此目的的官方方式，但其名称中的“dangerously”强调了潜在的安全风险。
在原生JavaScript中，element.innerHTML = yourHtmlString;是标准方法。
无论何种情况，最关键的是要对所有来自不可信源的HTML字符串进行严格的消毒（Sanitization），以防止跨站脚本（XSS）攻击。推荐使用如DOMPurify等成熟的库来完成消毒工作。

始终将安全性放在首位，确保你的应用程序在提供丰富内容的同时，也能够保护用户免受恶意攻击。

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