如何安全将Model中的HTML绑定至View？API存储HTML样式后如何渲染

不管是Angular（2+）还是AngularJS，核心问题都是框架默认会转义HTML内容来防止XSS攻击，所以我们需要明确告诉框架哪些HTML是安全可信任的，才能正确渲染样式。

一、Angular（2+）的实现方式 #

1. 导入必要的依赖 #

在你的组件文件顶部，导入DomSanitizer和SafeHtml类型：

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

2. 注入DomSanitizer服务 #

在组件的构造函数中注入DomSanitizer，方便后续处理HTML内容：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  sanitizedHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }
}

3. 处理API返回的HTML内容 #

结合你提供的请求逻辑，在获取到API响应后，把HTML内容标记为安全的：

info() {
  this.http.get('/theApi').subscribe(response => {
    // 假设API返回的HTML内容在response.data.content字段
    this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(response.data.content);
  });
}

4. 在视图中绑定渲染 #

在组件的HTML模板里，使用[innerHTML]指令来绑定处理后的安全HTML：

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

这样，像<h1><u>Hello there!</u></h1>这样的内容就会被正确渲染成带下划线的一级标题。

二、AngularJS的实现方式 #

看你提供的代码片段用的是$http，应该是AngularJS项目，那处理方式如下：

1. 在控制器中注入$sce服务 #

$sce是AngularJS的严格上下文转义服务，用来标记内容为安全：

angular.module('yourApp').controller('YourController', function($scope, $http, $sce) {
  $scope.info = function() {
    $http.get('/theApi')
      .then(function(response) {
        // 把API返回的HTML标记为可信HTML
        $scope.sanitizedHtml = $sce.trustAsHtml(response.data.content);
      });
  };
});

2. 在视图中使用ng-bind-html指令 #

在HTML模板里用ng-bind-html来绑定处理后的内容：

<div ng-bind-html="sanitizedHtml"></div>

重要安全提醒 #

• 只有当你完全信任HTML内容的来源（比如自己的后端API、经过严格过滤的内部内容）时，才能使用这种方式。如果是用户提交的内容，一定要先做XSS过滤（比如使用DOMPurify这类库），避免注入恶意脚本。
• 不要直接用innerHTML或ng-bind-html绑定未经过处理的用户输入，否则会有严重的安全风险。

内容的提问来源于stack exchange，提问作者Chuck Villavicencio