angularjs – $sce.trustAsHtml与ng-bind-html

发布时间：2020-12-17 07:40:47 所属栏目：安全来源：网络整理

导读：为什么我不能这样做： div{{data | htmlfilterexample}}/div 什么时候,在过滤器内,我回来了： return $sce.trustAsHtml(input); 使用 divng-bind-html =“data | htmlfilterexample” / div无论过滤器返回输入还是$sce.trustAsHtml(input),都可以工作. 我的

为什么我不能这样做：

<div>{{data | htmlfilterexample}}</div>

什么时候,在过滤器内,我回来了：

return $sce.trustAsHtml(input);

使用< divng-bind-html =“data | htmlfilterexample”>< / div>无论过滤器返回输入还是$sce.trustAsHtml(input),都可以工作.

我的印象是,$sce使HTML信任,并且ng-bind-html不需要该方法返回的输出.

谢谢.

$sce.trustAsHtml()生成一个可以安全地使用ng-bind-html的字符串.你不要在字符串上使用该函数,那么ng-bind-html将会产生错误：[$sce：unsafe]尝试在安全上下文中使用不安全的值.所以$sce并没有摆脱对ng-bind-html的需求,而是使得它处理安全的字符串与它一起使用.

您遇到的具体问题在于ng-bind和ng-bind-html之间的区别

使用{{}}相当于ng-bind.所以,看看ng-bind源代码(ng-bind-* source code),我们看到它使用这个：

element.text(value == undefined ? '' : value);

而ng-bind-html除其他外,还执行以下操作：

var parsed = $parse(attr.ngBindHtml);
element.html($sce.getTrustedHtml(parsed(scope)) || '');

关键的是,.text(http://api.jquery.com/text/)的ng-bind使用会导致正在显示的字符串的文本表示(忽略它是否可信赖).

虽然ng-bind-html使用.html(http://api.jquery.com/html/)导致html解释版本(如果通过getTrustedHtml()声明安全)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!