Question

是否可以使用从绑定外角度转换的内置HTML？

功能（角度使用我希望在其他地方使用）如下所示

//in controller
$scope.blah = '<script>alert(1)</script>';

<!-- template -->
<p>{{blah}}</p>

这将使用HTML转义的文本呈现。我想使用相同的功能来逃避html，有没有办法可以曝光？

修改

我认为我的问题可能特别不清楚。我想复制绑定到模板中的范围变量时自动转义HTML的内置功能，但我没有使用角度模板。代码在控制器中运行，但我正在注入混合内容。

以下是我尝试做的更好的例子。这是在控制器中：

$http.get('/endpoint.json').success(function(data) {
  someLib.setHTML('<a href="foo">' + data.name + '</a>');
});

我需要使用HTML但是我想要转义data.name，我可以访问与角度本身相同的功能吗？

Answer 1

<强>声明

有一个很好的理由他们在0.9开始消毒，这是一个安全隐患。我不建议这样做。

你可以制作一个自定义指令，我认为这是最简单的方法，而不会搞乱Angular内部。

代码

angular.module('app', [])
.controller('Ctrl', function($scope) {
  $scope.html = '<script>alert(1)</script><script>alert(2)</script><p>Please dont do this</p>'
})
.directive('myUnsafeDirective', function() {
  return {
    restrict: 'A',
    scope: {
      'html': '=myUnsafeDirective'
    },
    link: function(scope, element, attrs) {
      var toInsert = angular.element(scope.html);
      element.append(toInsert);
      var scripts = element[0].getElementsByTagName('script');
      for (var i = 0, l = scripts.length; i < l; i++) {
        eval(scripts[i].text)
      }
    }
  }
})

HTML

<body ng-controller="Ctrl">
  <p my-unsafe-directive="html"></p>
</body>

DEMO

我强烈建议你不要这样做，我也不认为即使是消毒也会让你eval这样的代码片段随机出现。至少剥离了eval部分并且只是插入元素，但老实说，在压缩之前，sanitize模块大约是6kb，包含它真的更好。

如果此用例源自服务器上某种CMS功能的需要，那么还要确保对允许哪种标记有严格的规则。有很多方法可以欺骗浏览器执行比脚本标记更加狡猾的随机代码，如果你使用清理，你将受到大多数保护。

Answer 2

使用$ santize将是您最好的选择，因为您正在向DOM中注入html标记。

你可以使用：

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

...记得要添加清理脚本......

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

...但这并不是真正意义上的角度，因为控制器应该尽可能地忽略DOM。

如果您在控制器中进行设置，为什么不能从那里拨打警报？

Answer 3

您可以使用angularjs

提供的 ngBindHtml 功能

ngBindHtml

评估表达式并将生成的HTML插入到元素以安全的方式。默认情况下，生成的HTML内容将使用$ sanitize服务进行消毒。利用这个功能，确保$ sanitize可用，例如，通过包括ngSanitize在你的模块的依赖项中（不在核心中）角）。为了在模块的依赖项中使用ngSanitize，你需要包括＆＃34; angular-sanitize.js＆＃34;在你的申请中。

看看这个有效的演示

＆＃13;

var app = angular.module('myApp', ['ngSanitize']);
app.controller('Controller', function ($scope) {
  
    var data = {};
    data.name = "Click Me";
    $scope.html = '<a href="foo">' + data.name + '</a>';
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-sanitize.js"></script>

<div ng-app='myApp' ng-controller="Controller">
   <div ng-bind-html="html"></div>
</div>

＆＃13;

Answer 4

经过一些研究，似乎这是不可能的（或者非常尴尬）。 Angular不公开其HTML转义代码。一些谷歌搜索出现了以下简洁的方法：在javascript中转义HTML：

orig.replace(/&/g, "&amp;").replace(/</g, "&lt;").
  replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;")

AngularJS在绑定之外转义HTML

4 个答案:

ngBindHtml