如何在Web页面中正确渲染HTML字符串-html教程-PHP中文网

如何在Web页面中正确渲染HTML字符串

心靈之曲

发布： 2025-10-24 10:57:18

原创

767人浏览过

如何在web页面中正确渲染html字符串

本教程旨在解决在Web应用中，HTML字符串被当作纯文本而非可渲染HTML标签显示的问题。我们将深入探讨常见原因，并提供两种主要解决方案：针对React/JSX环境的`dangerouslySetInnerHTML`属性，以及针对原生JavaScript的`innerHTML`属性。文章将详细介绍它们的使用方法、适用场景，并强调与之相关的安全风险及防范措施，确保开发者能够安全有效地在页面中插入动态HTML内容。

在构建动态Web应用时，我们经常需要从后端或变量中获取包含HTML标签的字符串，并将其呈现在页面上。然而，许多前端框架或默认的文本渲染机制会将这些HTML标签视为普通文本，导致它们原样显示，而不是被浏览器解析为实际的HTML元素（例如，<br />会被显示为字面量，而不是一个换行符）。这通常是因为为了防止跨站脚本攻击（XSS），默认的渲染方式会“转义”或“净化”掉潜在的HTML结构。

理解问题根源

当你使用类似{{ greeting }}这样的模板语法或通过innerText属性设置元素内容时，浏览器或框架通常会默认将传入的字符串视为纯文本。这意味着字符串中的任何HTML实体（如<、>）都会被转义成，从而避免了浏览器将其解析为标签。例如，如果你的变量greeting的值是hello, <br /> have a good day,，那么它将被渲染为hello, <br /> have a good day,，而不是在“hello,”之后换行。

解决方案：dangerouslySetInnerHTML (适用于React/JSX)

对于使用React或其他JSX语法的框架，如果你需要将一个包含HTML的字符串渲染为实际的HTML元素，最直接的方法是使用dangerouslySetInnerHTML属性。这个属性是React对浏览器DOM中innerHTML属性的直接替代。

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

使用示例：

假设你有一个名为greeting的变量，其内容为hello, <br /> have a good day,。你可以这样在JSX中使用它：

import React from 'react';

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

// 示例用法
// <MyComponent greeting="hello, <br /> have a good day," />

登录后复制

关键点：

dangerouslySetInnerHTML属性接受一个对象，该对象必须包含一个名为__html的键，其值就是你想要渲染的HTML字符串。
React之所以将其命名为“dangerously”（危险地），是为了提醒开发者，将任意HTML字符串直接插入DOM中存在潜在的跨站脚本攻击（XSS）风险。恶意用户可以通过注入恶意脚本来窃取用户数据或破坏页面。

解决方案：innerHTML (适用于原生JavaScript)

如果你在不使用React等框架的原生JavaScript环境中工作，可以直接使用DOM元素的innerHTML属性来设置其内容为HTML字符串。

使用示例：

假设你有一个DOM元素，其ID为break，并且你有一个JavaScript变量greeting，其内容为hello, <br /> have a good day,。

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

<script>
  const greeting = "hello, <br /> have a good day,";
  const element = document.getElementById("break");
  if (element) {
    element.innerHTML = greeting;
  }
</script>

登录后复制

这段代码会找到ID为break的<i>元素，并将其内容设置为greeting变量中的HTML字符串，从而正确解析<br />为换行符。

面试猫

AI面试助手，在线面试神器，助你轻松拿Offer

查看详情

安全注意事项与最佳实践

无论是dangerouslySetInnerHTML还是innerHTML，它们都绕过了浏览器或框架默认的HTML转义机制，直接将字符串作为HTML解析。这带来了显著的安全风险，特别是跨站脚本攻击（XSS）。

XSS攻击风险：

如果你的HTML字符串来源于用户输入或不可信的外部数据源，恶意用户可能会注入包含JavaScript代码的字符串（例如：<script>alert('You are hacked!');</script>）。当这些代码被渲染到页面上时，它们会在用户的浏览器中执行，可能导致会话劫持、数据窃取、页面篡改等严重后果。

防范措施：

数据净化 (Sanitization)： 在将任何不可信的HTML字符串插入DOM之前，务必对其进行严格的净化。这意味着你需要移除或转义所有潜在的恶意标签和属性。可以使用成熟的第三方库来完成此任务，例如：
- DOMPurify: 一个流行的JavaScript库，用于安全地净化HTML。
- Google Caja: 另一个强大的HTML净化库。
示例 (使用DOMPurify):
```
import DOMPurify from 'dompurify';

const unsafeHTML = "hello, <script>alert('XSS!');</script> have a good day,";
const safeHTML = DOMPurify.sanitize(unsafeHTML);

// 在React中：
// <i dangerouslySetInnerHTML={{ __html: safeHTML }}></i>

// 在原生JS中：
// element.innerHTML = safeHTML;
```
登录后复制
仅在必要时使用： 尽量避免直接插入HTML字符串。如果只需要插入纯文本，始终优先使用innerText（原生JS）或直接在JSX中插入变量（React会自动转义）。只有当你确定需要渲染HTML结构时，才考虑使用dangerouslySetInnerHTML或innerHTML。
来源可靠性： 确保你插入的HTML字符串来源是完全可信的，例如，它是由你的后端服务生成的静态内容，且后端也经过了严格的输入验证和输出编码。

总结

当遇到HTML字符串被当作纯文本渲染的问题时，dangerouslySetInnerHTML（React/JSX）和innerHTML（原生JavaScript）是解决此类问题的核心工具。它们允许浏览器将字符串内容解析为实际的HTML结构。然而，为了避免严重的安全漏洞（如XSS），开发者必须高度重视数据净化和来源可靠性。始终记住，直接插入未经净化的HTML字符串是一个高风险操作，务必采取适当的安全措施来保护你的应用程序和用户。

以上就是如何在Web页面中正确渲染HTML字符串的详细内容，更多请关注php中文网其它相关文章！