本教程旨在解决从数据库或变量中获取的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的字符串。
<!DOCTYPE html> <html> <head> <title>原生JS渲染HTML</title> </head> <body> <i id="greetingElement" class="tuc-97a49982-b2eb87-0 textTitle tuc-97a49982-b2eb87-0"></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):
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等成熟的库来完成消毒工作。
始终将安全性放在首位，确保你的应用程序在提供丰富内容的同时，也能够保护用户免受恶意攻击。