当前位置:首页 > 开发 > Web前端 > HTML > 正文

HTML无害化和Sanitize模块

发表于: 2014-08-26   作者:bijian1013   来源:转载   浏览:
摘要: 一.ng-bind-html、ng-bind-html-unsafe         AngularJS非常注重安全方面的问题,它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML,然后利用它触发跨站攻击或者注入攻击。         考虑这样一个例子,假设我们有一个变量存

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

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

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

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

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

        所以对于下面这行内容:

<div ng-bind='myUnsafeHTMLContent'></div>

        最终看到的结果将会是:

<p style="color:blue">an html
<em onmouseover="this.textContent='PWN3D!'">click here</em>
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:

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

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

an html _click here_ snippet

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

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

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

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

an html _click here_ snippet

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

an html PWN3D! snippet

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

 

二.Linky

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

$scope.contents = 'Text with links:http://angularjs.org/ & mailto:us@there.org';

        如果使用以下绑定方式:

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

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

Text with links:http://angularjs.org/ & mailto:us@there.org

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

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

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

Text with links: http://angularjs.org/ & us@there.org

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

HTML无害化和Sanitize模块

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解
本篇主要讲解angular中的$sanitize这个服务,此服务依赖于ngSanitize模块,要学习这个服务,先要了
实现html模块拖拽功能 如下图 <%@ page contentType="text/html; charset=UTF-8" language="java
HTMLParser是python用来解析html和xhtml文件格式的模块。它可以分析出html里面的标签、数据等等,是
说明:这里是根据我以前发布的centos下安装trac项目管理系统而来 这里需要用的trac的第三方插件Accou
6 模块
模块 目录 简介及资料 自定义模块 创建一个自定义模块 调用自定义模块 exports和module.exports 区
7 html
HTML中当一个元素为块级元素时,变为行内元素的方法在它的选择器中添加:display:inline;,而行内元
8 HTML
HTML相关知识 HTML标签 一个完成的HTML标签如下图所示: 与HTML相关的几个概念: HTML,XHTML,DHTM
9 HTML
注释<!--这里是注释--> 页面内容<body>展示的页面内容</body> 段落 <p><
10 HTML
1.1 DOM节点树 1.2节点关系 <html> <head> <title>DOM 教程</title> </
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号