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

HTML无害化和Sanitize模块

 

一.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

时间: 2024-10-10 16:30:56

AngularJS 正确解释带html标签的内容的相关文章

php把带html标签的内容变化为安全的内容显示在页面上

app.controller('MeetingbookingController',['$http', function($http){ this.list = []; this.userlist =[]; var noticelist = this; this.get = function(){ $http.get('/m/employee/get_noticelist').success(function(data){ //console.log(data.data); if(data.st

推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput

前言 今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的.不信,你试试就知道^_^... AutoComplete-- 自动完成对开发人员来说应该不会太陌生,特别是前端开发者.即用户在文本框中输入内容或者当文本框获得焦点时智能提示与用户输入有关的建议内容.最常见的 百度(baidu.com).谷歌(google.com)等的搜索框就是这样来设计的.目的是为了给用户提供一个更好的输入体验. 在

react和angualr动态插入带html标签或不带html标签的数据

let content = '';//content是后台返回的未知的一长串字符串,可能是'<p>内容<div>一个div</div></p>',也可能是'内容\r\n任何格式' let reg = new RegExp('^<([^>\s]+)[^>]*>(.*?<\/\\1>)?$'); let format = reg.test(content); //content有可能是有格式的(带html标签),也可能无格式

用xpath提取xml文档指定标签的内容

1 <?xml version="1.0" encoding="UTF-8"?> 2 <书架> 3 <书> 4 <书名 name="vvvb">何茂赟自传</书名> 5 <作者>何茂赟</作者> 6 <售价>500.00</售价> 7 <售价>1234元</售价><售价>1234元</售价>&

CSS实现pre标签中内容换行方法

CSS实现pre标签中内容换行方法技术 maybe yes 发表于2015-01-25 18:35 原文链接 : http://blog.lmlphp.com/archives/70  来自 : LMLPHP后院 HTML 中的 PRE 标签默认是不会换行的,即使声明了 word-wrap 和 word-break 属性也没有效果:DIV 标签可以很方便的换行,不会把页面撑破.因为这个原因,很多网站在显示代码的时候使用 DIV 来作为容器.使用 DIV 标签装载代码有个弊端,就是冗余内容太多,换

用Ueditor存入数据库带HTML标签的文本,从数据库取出来后,anjular用ng-bind-html处理带HTML标签的文本

ng.module('index-filters', []) .filter('trustHtml', function ($sce) { return function (input) { return $sce.trustAsHtml(input); } }); <tr ng-repeat="item in News" style="height:30px;"> <td>{{item.Title}}</td> <td&g

JQ和Js获取span标签的内容

html: 1 <span id="content">'我是span标签的内容'</span> javascript获取: 1 var content = document.getElementById("content").innerText; 2 var content = document.getElementById("content").innerHTML; jquery获取: 1 var cont=$(&quo

写的一个段落标签文字内容两端对齐的代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

SpringMVC和Freemarker整合,带自定义标签的使用方法

SpringMVC和Freemarker整合,带自定义标签的使用方法. [参考来源:http://www.360doc.com/content/14/1225/14/1007797_435663342.shtml] SpringMVC现在是比较热门的一种框架了,使用起来感觉还是很不错的,现在我分享一下集体的配置和使用,希望对学习SpringMVC的朋友有用.一.首先我们做准备工作,下载Spring包,下载Freemarker包.二.配置web.xml. 1 2 3 4 5 6 7 8 9 10