前端如何安全的渲染HTML字符串?

最新推荐文章于 2025-06-15 09:00:00 发布

猿总早上好

最新推荐文章于 2025-06-15 09:00:00 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端安全 html

本文链接：https://blog.youkuaiyun.com/Z__7Gk/article/details/132366842

本文探讨了在前端开发中安全渲染HTML字符串的重要性，详细介绍了如何在HTML、React、Vue和Angular中进行安全渲染，强调了使用innerHTML和v-html等属性的风险。此外，文章讨论了HTML Sanitizer API和第三方库DOMPurify、js-xss、sanitize-html在防止XSS攻击中的作用，以及如何通过自定义配置来确保HTML内容的安全。最后，提到了低代码平台在开发中的辅助作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在现代的Web 应用中，动态生成和渲染 HTML 字符串是很常见的需求。然而，不正确地渲染HTML字符串可能会导致安全漏洞，例如跨站脚本攻击（XSS）。为了确保应用的安全性，我们需要采取一些措施来在安全的环境下渲染HTML字符串。本文将介绍一些安全渲染 HTML 字符串的最佳实践，以帮助你有效地避免潜在的安全风险。

一、常见渲染方式

首先来看一下如何在 HTML、React、Vue、Angular 中渲染HTML字符串。

HTML

在HTML中渲染HTML字符串，可以使用原生JavaScript的innerHTML属性或者创建元素节点并使用appendChild()方法来实现。

（1）使用innerHTML属性：可以通过获取要渲染HTML的目标元素，并将HTML字符串赋值给其innerHTML属性来渲染HTML字符串。例如：

<div id="targetElement"></div>

<script>
  const htmlString = "<h1>Hello, World!</h1>";
  document.getElementById("targetElement").innerHTML = htmlString;
</script>

这将在<div id="targetElement"></div>内部渲染出<h1>Hello, World!</h1>。

（2）创建元素节点和appendChild()方法：可以使用document.createElement()方法创建元素节点，并使用appendChild()方法将该节点添加到父元素中。例如：

<div id="targetElement"></div>

<script>
  const htmlString = "<h1>Hello, World!</h1>";
  const parentElement = document.getElementById("targetElement");
  const tempElement = document.createElement("div");
  tempElement.innerHTML = htmlString;

  while (tempElement.firstChild) {
    parentElement.appendChild(tempElement.firstChild);
  }
</script>

这将在<div id="targetElement"></div>内部渲染出<h1>Hello, World!</h1>。

React

可以通过使用dangerouslySetInnerHTML属性在 React 中渲染HTML字符串。但是，正如这个属性的名字所言，它存在安全风险，HTML 不会被转义，可能会导致XSS问题，因此请慎重使用。

import React from 'react';

const MyComponent = () => {
  const htmlString = '<p>Hello, <strong>React</strong>!</p>';

  return (
    <div dangerouslySetInnerHTML={
  
  { __html: htmlString }} />
);
}

export default MyComponent;

这里将要渲染的HTML字符串存储在htmlString变量中，并将其传递给dangerouslySetInnerHTML属性的__html属性。React会将该字符串作为HTML内容插入到被渲染的组件中。

Vue

可以使用v-html指令在Vue中渲染HTML字符串。与在React中使用dangerouslySetInnerHTML类似，使用v-html时需要格外小心。

<template>
  <div v-html="htmlString"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlString: '<p>Hello, <strong>Vue</strong>!</p>',
    };
  },
};
</script>

这里将要渲染的HTML字符串存储在htmlString中，并通过v-html指令将其绑定到需要渲染的元素上（这里是<div>）。Vue会将htmlString中的字符串解析为HTML，并将其插入到被渲染的元素中。

Angular

可以使用[innerHTML]属性在Angular中渲染 HTML 字符串。

<div [innerHTML]="htmlString"></div>

这里将要渲染的HTML字符串存储在名为htmlString的变量中，并将其绑定到[innerHTML]属性上。Angular会将htmlString中的字符串解析为HTML，并将其插入到相应的DOM节点中。

与其他框架相似，使用[innerHTML]属性绑定时要特别小心。确保渲染的HTML字符串是可靠和安全的，避免直接从用户输入或不受信任的来源获取HTML字符串，以防止XSS攻击等安全问题。

另外，Angular也提供了一些内置的安全机制来帮助保护应用免受安全威胁。例如，通过使用Angular的内置管道（如DomSanitizer）对HTML字符串进行转义和验证，可以提高应用的安全性。

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-example',
  template: `
    <div [innerHTML]="getSafeHtml()"></div>
  `,
})
export class ExampleComponent {
  htmlString: string = '<p>Hello, <strong>Angular</strong>!</p>';

  constructor(private sanitizer: DomSanitizer) {}

  getSafeHtml(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.htmlString);
  }
}

这里首先导入DomSanitizer和SafeHtml，这是Angular的内置服务和类型。然后，在组件中使用Do