AngularJS 正确解释带html标签的内容

一.ng-bind-html、ng-bind-html-unsafe

        AngularJS非常注重安全方面的问题，它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML，然后利用它触发跨站攻击或者注入攻击。

        考虑这样一个例子，假设我们有一个变量存在于myUnsafeHTMLContent作用域中。当HTML的内容如下时，OnMouseOver事件将会把元素中的内容修改成"PWN3D!"。

Js代码  

1. $scope.myUnsafeHTMLContent = ‘<p style="color:blue">an html‘ +   
2. ‘<em onmouseover="this.textContent = ‘PWN3D!‘">click here</em>‘ +   
3. ‘snippet</p>‘;  

        如果你在变量中存了一些HTML内容，并尝试把这个变量进行数据绑定，这时AngularJS默认的行为是：先把HTML内容进行转义，然后再显示它。所以，HTML标签最终会被当成普通的文本来处理。

        所以对于下面这行内容：

Html代码  

1. <div ng-bind=‘myUnsafeHTMLContent‘></div>  

        最终看到的结果将会是：

Html代码  

1. <p style="color:blue">an html  
2. <em onmouseover="this.textContent=‘PWN3D!‘">click here</em>  
3. snippet</p>  

        标签在web页面上被渲染成了普通字符串。

        但是，如果在你的应用中，你想把myUnsafeHTMLContents中的内容作为HTML渲染应该怎么办呢？在这种情况下，AngularJS有另外一个指令（以及一个$sanitize服务用来启动指令），它让你能够以安全或者非安全的方式渲染HTML。

        我们先来看一个以安全模式渲染的例子（一般来说你应该用这种模式），使用安全模式可以避免HTML中的绝大多数攻击手段。这种情况下需要使用ng-bind-html指令。

        ng-bind-html、ng-bind-html-unsafe以及linky过滤器都属于ngSanitize模块。为了让以上内容能够运行，需要导入angular-sanitize.js(或者.min.js)，同时还用导入一个对ngSanitize的模块依赖。

        那么，当我们在同样的myUnsafeHTMLContent作用域中使用ng-bind-html指令时会发生什么呢？例如对于下面这行HTML：

Html代码  

1. <div ng-bind-html="myUnsafeHTMLContent"></div>  

        在这种情况下，浏览器中将会输出这样的内容：

Text代码  

1. an html _click here_ snippet  

        有一个很重要的东西需要注意，style标签（蓝色）以及<em>标签上的onmouseover处理器都被AngulsrJS删除掉了，这是因为AngularJS认为它们是不安全的。

        最后，如果真的决定需要把myUnsafeHTMContent中的内容按照原样渲染出来（这可能是因为你的确信任内容的来源，或者其他一些原因），那么可以使用ng-bind-html-unsafe指令：

Html代码  

1. <div ng-bind-html-unsafe="myUnsafeHTMLContent"></div>  

        在这种情况下浏览器将会输出以下内容：

Text代码  

1. an html _click here_ snippet  

        文本的颜色是蓝色的（因为样式绑定到了p标签上），同时click here上面还注册了一个onmouseover事件。所以，当你的鼠标移动到click here这块文本附近的时候，浏览器中输出的内容将会变成：

Text代码  

1. an html PWN3D! snippet  

        如你所见，这种方式实际上很不安全，所以，如果你决定使用ng-bind-html-unsafe指令，那么你要完全确定它就是你要的东西。某些人可以利用这种方式轻松地读取用户信息然后发送到他自已的服务器上去。

二.Linky

        Linky过滤器也属于ngSanitize模块，你可以在已经渲染好的HTML内容中添加这个过滤器，然后把HTML中存在的超链接转换成anchor标签。linky过滤器使用起来非常简单，我们来看一个例子：

Js代码  

1. $scope.contents = ‘Text with links:http://angularjs.org/ & mailto:[email protected]‘;  

        如果使用以下绑定方式：

Html代码  

1. <div ng-bind-html="contents"></div>  

        HTML中的内容最终会被显示成：

Text代码  

1. Text with links:http://angularjs.org/ & mailto:[email protected]  

        现在我们来看看，当使用linky过滤器时到底会发生些什么：

Html代码  

1. <div ng-bind-html="contents | linky"></div>  

        linky过滤器将会遍历文本内容，然后在所有找到的URL和mailto链接上加<a>标签，这样就给用户提供了可交互的HTML内容：

Text代码  

1. Text with links: http://angularjs.org/ & [email protected]  

        这里的实际内容会被linky过滤器自动改成超链接的形式，即<a href="http://angularjs.org/">http://angularjs.org/</a> & <a href="[email protected]</a>。

转载自：http://bijian1013.iteye.com/blog/2108853