Angular 中安全渲染动态 HTML 内容的教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Angular 中安全渲染动态 HTML 内容的教程

2025-11-15

浏览次数：次

返回列表

Angular 中安全渲染动态 HTML 内容的教程

本文详细介绍了在 angular 应用中如何正确地将包含 html 标签的字符串渲染为富文本。当直接使用插值表达式时，html 标签会被当作普通文本显示，无法实现预期样式。通过利用 `[innerhtml]` 属性绑定，开发者可以安全有效地将动态生成的 html 内容呈现在 dom 中，同时强调了相关的安全注意事项，以防止跨站脚本（xss）攻击。

在 Angular 应用开发中，我们经常需要显示包含 HTML 标签的动态文本，例如将数据库中存储的富文本内容或经过特定格式化后的字符串呈现在用户界面上。然而，初学者可能会遇到一个常见问题：当尝试使用 Angular 的插值表达式（{{ }}）来绑定包含、 等 HTML 标签的字符串时，这些标签并不会被浏览器解析为实际的 HTML 元素，而是作为普通文本直接显示出来。

问题分析：插值表达式的局限性

Angular 的插值表达式（如 {{ myString }}）默认情况下会对绑定内容进行安全转义（sanitization）。这意味着所有 HTML 标签和特殊字符都会被转换为它们的 HTML 实体，例如 会被转换为 <b>。这种机制是为了防止跨站脚本（XSS）攻击，因为如果直接渲染未经转义的动态内容，恶意脚本可能会被注入并执行。

考虑以下场景，一个组件中有一个包含 HTML 标签的字符串：

export class MyComponent implements OnInit {
  wiadomosc: string;

  ngOnInit(): void {
    const number = '12345';
    const msg = `您的订单号是 ${number}。`;
    // 假设我们希望将订单号加粗显示
    this.wiadomosc = msg.replace(number, `<b>${number}</b>`);
    // 此时 wiadomosc 的值为 "您的订单号是 <b>12345</b>。"
  }
}

如果在模板中直接使用插值表达式：

<p>{{ wiadomosc }}</p>

最终在浏览器中显示的结果将是：您的订单号是 12345。，其中 标签被当作普通文本显示，而不是将订单号加粗。

解决方案：使用 [innerHTML] 属性绑定

要让 Angular 正确地解析并渲染包含 HTML 标签的字符串，我们需要使用属性绑定 [innerHTML]。[innerHTML] 属性允许我们将一个字符串绑定到元素的 innerHTML 属性上，从而使浏览器将其解析为实际的 HTML 内容。

修改模板代码如下：

<p [innerHTML]="wiadomosc"></p>

使用 [innerHTML] 后，Angular 会将 wiadomosc 变量中的 HTML 字符串直接赋值给

元素的 innerHTML 属性。此时，浏览器会解析 12345，并将其中的 12345 以粗体显示。

示例代码

组件 (my-component.ts)

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

0 查看详情传媒公司模板(RTCMS)1.0

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent implements OnInit {

  wiadomosc: string;
  urlView: string; // 假设还有其他变量

  constructor() { }

  ngOnInit(): void {
    this.loadMessage();
  }

  loadMessage(): void {
    // 模拟从服务获取数据
    const data = {
      result_info: "您的订单号是 {number}，请点击此处查看详情。",
      number: "ORD-2025-001",
      pm: "http://example.com/order/ORD-2025-001"
    };

    if (data.result_info && data.number) {
      let msg = data.result_info;
      this.urlView = data.pm;
      // 将订单号替换为加粗的 HTML 格式
      this.wiadomosc = msg.replace('{number}', `<b>${data.number}</b>`);
      // 最终 this.wiadomosc 的值为 "您的订单号是 <b>ORD-2025-001</b>，请点击此处查看详情。"
    } else {
      this.wiadomosc = '未能获取到有效信息。';
    }
  }
}

模板 (my-component.html)

  消息详情
  
  <p [innerHTML]="wiadomosc"></p>

  
  
    查看详情页面

通过上述修改，wiadomosc 变量中的 标签将正确地渲染为粗体文本。

安全注意事项：跨站脚本 (XSS) 风险

虽然 [innerHTML] 解决了 HTML 渲染问题，但它引入了潜在的跨站脚本（XSS）安全风险。如果绑定到 [innerHTML] 的字符串内容来源于不可信的外部输入（例如用户评论、第三方API响应），恶意用户可能会注入包含 J*aScript 代码的 HTML 标签。当这些标签被渲染时，恶意脚本就会在用户的浏览器中执行，可能导致数据窃取、会话劫持等问题。

Angular 的内置安全机制： 值得庆幸的是，Angular 框架在处理 [innerHTML] 时，默认会执行安全净化（sanitization）。这意味着 Angular 会自动检测并移除绑定内容中的潜在危险代码（如 <script> 标签或带有 J*aScript 的事件属性）。然而，这种自动净化并非万无一失，并且可能会移除一些你希望保留的合法 HTML 元素或属性。</script>

最佳实践：

只绑定可信内容： 确保绑定到 [innerHTML] 的字符串内容始终来自你完全信任的来源，并且你已经对其内容进行了严格的控制和验证。
后端净化： 最安全的做法是在服务器端对所有用户提交的富文本内容进行严格的净化处理，只允许安全的 HTML 标签和属性通过。

使用 DomSanitizer (谨慎使用)： 如果你确实需要渲染 Angular 默认会认为不安全的 HTML 内容（例如某些或特定样式），并且你确信其来源是安全的，可以使用 Angular 的 DomSanitizer 服务来标记内容为安全。

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

@Component({
  selector: 'app-safe-html-example',
  template: `<div [innerHTML]="trustedHtml"></div>`
})
export class SafeHtmlExampleComponent implements OnInit {
  trustedHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    const potentiallyUnsafeHtml = '<p>这是一个<b>安全</b>的段落。</p><script>alert("XSS!");</script>';
    // 警告：只有当你100%确定内容安全时才使用 bypassSecurityTrustHtml
    this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(potentiallyUnsafeHtml);
    // Angular 默认会净化 <script> 标签，但如果使用 bypassSecurityTrustHtml 则不会
    // 正确的做法是：
    // this.trustedHtml = this.sanitizer.sanitize(SecurityContext.HTML, potentiallyUnsafeHtml); // 这样会进行净化
    // 或者更安全地，只净化来自不可信源的部分
  }
}

强烈建议： 除非你非常清楚自己在做什么，并且已经充分评估了风险，否则应避免使用 bypassSecurityTrustHtml 等方法。优先考虑通过后端净化或只允许有限的、安全的 HTML 子集。

总结

在 Angular 中显示包含 HTML 标签的动态文本，正确的方法是使用 [innerHTML] 属性绑定，而不是插值表达式。[innerHTML] 允许浏览器将字符串解析为实际的 HTML 结构，从而实现富文本的显示效果。同时，开发者必须时刻警惕与之相关的 XSS 安全风险，并采取适当的预防措施，如确保内容来源可信、进行后端净化，或在极少数情况下谨慎使用 DomSanitizer 服务。遵循这些最佳实践，可以确保应用既功能强大又安全可靠。

以上就是Angular 中安全渲染动态 HTML 内容的教程的详细内容，更多请关注其它相关文章！

# 正确地 # 中国把日本打到seo # 企业网站seo工作内容 # 营销推广的报告怎么写 # seo的营销技巧霸屏 # 石家庄免费seo软件 # 种子磁力seo # 营销推广张晨简历 # 湖南哪个网站推广好点啊 # seo内容策划 # 邵阳网络营销推广平台有哪些 # 转换为 # 加粗 # 弹出 # 请点击 # css # 查看详情 # 插值 # 您的 # 绑定 # 字符串解析 # 常见问题 # 应用开发 # 后端 # app # 浏览器 # go # html # java # javascript