Angular 1.4 变量内HTML渲染问题 ng-bind-html无效如何解决

问题原因 #

你代码使用的是AngularJS 1.x版本，框架默认开启了内容安全转义机制，会自动过滤插值表达式和ng-bind-html传入的HTML标签，避免XSS攻击，所以直接使用ng-bind-html未做额外配置的情况下无法正常渲染HTML内容。

可行解决方案 #

方案1：搭配ngSanitize模块使用ng-bind-html #

这是AngularJS官方推荐的安全渲染HTML方案，适合大多数场景：

• 第一步：引入与你AngularJS版本完全一致的angular-sanitize.js依赖文件
• 第二步：在你的应用模块中注入ngSanitize依赖，示例如下（注意保留你原有依赖比如分页插件dirPagination）：

angular.module('yourApp', ['ngSanitize', 'angularUtils.directives.dirPagination'])

• 第三步：修改模板代码，将原来的插值表达式替换为ng-bind-html：

<td ng-bind-html="item.message"></td>

方案2：通过$sce服务手动标记信任内容 #

如果返回的HTML内容比较复杂，用ngSanitize仍被过滤，可以手动将内容标记为受信任，无需引入ngSanitize：

方法A：在Controller中预处理数据

请求到Laravel返回的数据后，遍历列表标记每个message为受信任HTML：

// 控制器中先注入$sce服务
app.controller('yourController', ['$sce', function($sce) {
  // 接口请求拿到file数据后执行
  $scope.file.messages.forEach(item => {
    item.message = $sce.trustAsHtml(item.message)
  })
}])

模板直接使用<td ng-bind-html="item.message"></td>即可。

方法B：封装全局过滤器复用（更推荐）

封装通用的信任HTML过滤器，所有需要渲染HTML的场景都可以直接用：

// 全局注册过滤器
app.filter('trustHtml', ['$sce', function($sce) {
  return function (input) {
    return $sce.trustAsHtml(input)
  }
}])

模板中直接使用过滤器即可，无需提前处理数据：

<td ng-bind-html="item.message | trustHtml"></td>

注意事项 #

• 渲染后端返回的HTML存在XSS攻击风险，请确保Laravel返回的HTML内容已经做好安全过滤，移除了script标签、on*事件属性等恶意内容。
• 以上方案仅适用于AngularJS 1.x版本，如果你使用的是Angular 2+版本，可通过DomSanitizer服务实现同类需求。

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