angularJS 显示带html的文本

时间:2022-07-02 13:52:54

1.首先定义一个angularJS的过滤器,作为处理html文本的通用过滤器。

define([ "app",], function (app) {

app().registerFilter("trusted", ["$sce", function ($sce) {
return function (html) {
if (typeof html== 'string') //判断类型为字符串
return $sce.trustAsHtml(html);
return html;
}
}])

});

    sce 即 strict contextual escaping,严格模式下的上下文隔离,也可以理解为安全绑定,类似于浏览器的同源加载策略,不能加载不同域下的文件及不鞥呢使用不和要求的协议,angularJS为了避免安全漏洞,有些ng-src或ng-include都会进行安全检查,避免了一些跨站的XSS。angularJS是默认开启sce的,所以html文本得使用授权信任加载的html文本。

    $sce是angularJS自带的安全处理模块,$sce.trustAsHtml()方法将值转换为特权所接受并能安全地使用“ng-bind-html”,就实现在数据加载时对于html标签的自动转义。

2.使用ng-bind-html将html文本绑定到页面上,同时调用过滤器。

<a mam-href="~/entity/#/browse/{{data.contentId_}}" target="_blank" ng-bind-html="data.keyWord | trusted"></a>

angularJS在进行数据绑定时默认是会以文本的形式输出,也就是数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中。而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize。