从 AngularJS 控制器将 HTML 插入视图

IT技术 javascript angularjs escaping html-sanitizing
2021-01-13 00:30:03

是否可以在 AngularJS 控制器中创建HTML片段并在视图中显示此 HTML?

这是因为需要将不一致的 JSON blob 转换为嵌套的id: value列表因此HTML是在控制器中创建的,我现在希望显示它。

我创建了一个模型属性,但如果不打印HTML就无法在视图中呈现它


更新

问题似乎是由将创建的 HTML 角度呈现为引号内的字符串引起的。将尝试找到解决此问题的方法。

示例控制器:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

示例视图:

<div ng:bind="customHtml"></div>

给出:

<div>
    "<ul><li>render me please</li></ul>"
</div>
6个回答

对于 Angular 1.x,ng-bind-html在 HTML 中使用

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

此时你会得到一个attempting to use an unsafe value in a safe context错误,所以你需要使用ngSanitize$sce来解决这个问题。

$sce

$sce.trustAsHtml()在控制器中使用以转换 html 字符串。

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

有2个步骤:

  1. 包括 angular-sanitize.min.js 资源,即:

    <script src="lib/angular/angular-sanitize.min.js"></script>
    
  2. 在 js 文件(控制器或通常是 app.js)中,包含 ngSanitize,即:

    angular.module('myApp', ['myApp.filters', 'myApp.services', 
        'myApp.directives', 'ngSanitize'])
    
为了让人们不要灰心,这个答案的最新更新,加上答案底部的 ngSanitize 要求,实际上确实有效。
2021-03-14 00:30:03
stackoverflow.com/questions/21829275/... <-- 对我有用:) 不幸的是,这里的答案中的所有选项都不起作用
2021-03-24 00:30:03
我们需要在这里进行一些清理,这是正确的方法,似乎对我没有任何作用。
2021-04-02 00:30:03
在 Angular 1.2 中,ng-bind-html-unsafe删除了两个指令并合并了两个指令。参见:github.com/angular/angular.js/blob/master/...
2021-04-07 00:30:03
在不使用 ngSanitize 的情况下,现在可以使用$sce. 将其注入控制器并通过它传递 html。$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);否则我一直得到attempting to use an unsafe value in a safe context
2021-04-07 00:30:03

您还可以像这样创建过滤器:

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

然后在视图中

<div ng-bind-html="trusted_html_variable | trust"></div>

注意:此过滤器信任传递给它的任何和所有 html,如果将带有用户输入的变量传递给它,则可能会出现 XSS 漏洞。

为什么叫过滤器sanitize这非常具有误导性,因为它实际上并没有消毒任何东西。相反,它应该被称为trusttrustSafe或类似的东西。
2021-03-16 00:30:03
精彩的回答。rawHtml是我的过滤器名称而不是sanitize.
2021-03-18 00:30:03
仅当您完全信任 HTML 时才使用它。这不会以任何方式清理 HTML,而是只允许 Angular 将其注入页面。恶意 HTML 会引发 XSS 攻击。
2021-03-19 00:30:03
@Katie Astrauskas,谢谢你的回答!很干净的方式。顺便说一句,ngResource依赖性不是必需的。
2021-03-23 00:30:03
如果性能很重要,则应避免使用过滤器。过滤器每次将触发两个摘要。
2021-04-09 00:30:03

Angular JS 在标签中显示 HTML

上面链接中提供的解决方案对我有用,该线程上的所有选项都没有。对于任何在 AngularJS 1.2.9 版中寻找相同内容的人

这是一个副本:

好的,我找到了解决方案:

JS:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

编辑:

这是设置:

JS文件:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

HTML文件:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>
请注意,您需要绝对确定 html 是可信的。否则,XSS 攻击的大门是敞开的。
2021-03-12 00:30:03
这个使用函数来呈现 HTML 的解决方案是唯一对我有用的解决方案。
2021-03-12 00:30:03
'$http' 是干什么用的?
2021-03-13 00:30:03
同样的答案在这里更新。stackoverflow.com/questions/21829275/...
2021-03-15 00:30:03
@SoldeplataSaketos 没什么特别的,我想我当时正在本地尝试它,最终我复制了依赖项。
2021-03-24 00:30:03

幸运的是,您不需要任何花哨的过滤器或不安全的方法来避免该错误消息。这是以预期和安全的方式在视图中正确输出 HTML 标记的完整实现。

必须在 Angular 之后包含 sanitize module:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

然后,必须加载module:

angular.module('app', [
  'ngSanitize'
]);

这将允许您在来自控制器、指令等的字符串中包含标记:

scope.message = "<strong>42</strong> is the <em>answer</em>.";

最后,在模板中,它必须像这样输出:

<p ng-bind-html="message"></p>

这将产生预期的输出:42答案

此解决方案有效,是否要发布 jsfiddle 或 plunkr?
2021-03-21 00:30:03
尝试一些 html 之类的<div><label>Why My Input Element Missing</label><input /></div>......如果它让你感到惊讶,那么请更新你的答案 plz.. 因为我测试了所有 10+vote 解决方案.. 你的解决方案不适合我查看我的输入标签.. 否则很好.. 我用过$sce.trustAsHtml(html)
2021-03-26 00:30:03
如果使用最新的角度,这真的应该是答案
2021-03-28 00:30:03

我今天试过了,我发现的唯一方法是这个

<div ng-bind-html-unsafe="expression"></div>

仅当来源可信时才应使用此解决方案以避免跨站点脚本攻击。
2021-03-13 00:30:03
ng-bind-html-unsafe 已在 1.2 版中删除以供将来参考。现在您需要 ngSanitize module并绑定不安全的 html,您应该使用 $sce.trustAsHtml 方法。
2021-03-14 00:30:03
使用 Angular 1.0.8 这对我有用。不过请注意@Bertrand 的警告,请确保您信任消息来源。
2021-04-01 00:30:03
从 Angular 1.0.2 开始,这对我有用,不需要其他文件或连接。
2021-04-07 00:30:03