一.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>。
相关推荐
博文链接:https://sharpkit.iteye.com/blog/247040
Vue.js应用程序的基于白名单HTML清理程序(sanitize-html)。 笔记 我们应该始终在服务器上清理用户输入值。 仅在必要的情况下使用Vue进行消毒(例如,降价预览)。 安装 npm install --save vue-sanitize 或者 yarn...
sanitize-html sanitize-html提供了带有清晰API的简单HTML sanitizer。 sanitize-html是可以容忍的。 它非常适合清除HTML片段,例如CKEditor和其他富文本编辑器创建的片段。 从Word复制和粘贴时,删除多余CSS特别...
NULL 博文链接:https://bijian1013.iteye.com/blog/2257764
sanitize, 基于白名单的ruby HTML和 CSS 消毒Sanitize是基于白名单的HTML和CSS杀毒工具。 如果给定可以接受元素。属性和CSS属性的列表,Sanitize将从字符串中删除所有不可接受的HTML和/或者 CSS 。使用简单的配置...
Vue.js应用程序的基于白名单HTML清理程序(sanitize-html)。 笔记 我们应该始终在服务器上清理用户输入值。 仅在必要的情况下使用Vue进行消毒(例如,降价预览)。 安装 npm install --save v-sanitize 或者 yarn ...
前端项目-sanitize.css,Minimal CSS normalization library
数据销毁命令介绍
前端开源库-sanitizesanitize,输入node.js的saniting库
用户调用angularJS中的解析angularJS变量中HTML代码等方法,例如:ng-bind-html-unsafe、ng-bind-html
前端项目-10up-sanitize.css,一致地呈现元素。采用最佳实践。
html_sanitize_ex解析给定HTML字符串,并基于使用的完全将其从HTML标记中剥离,或仅允许某些HTML元素和属性对其进行清理。 注意:目前缺少的一件事是对styles的支持。 要添加此内容,我们必须实现CSS的Scrubber,...
用于angularjs自动解析html标签
此仓库用于在npm和bower上分发。 该模块的源代码位于。 请提出问题并针对该存储库提出请求。 安装 您可以使用npm或bower安装此软件包。 npm npm install angular-sanitize 然后将ngSanitize添加为您的应用程序的...
通过删除目录路径和无效字符,对字符串进行消毒以安全地用作文件名。 安装 npm install sanitize-filename 例子 var sanitize = require ( "sanitize-filename" ) ; // Some string that may be unsafe or invalid ...
同构HTML清理用于Node和浏览器HTML清理程序安装 npm install isomorphic-html-sanitize用法 const sanitize = require ( 'isomorphic-html-sanitize' ) ;sanitize ( 'A hacky HTML piece of code' )执照麻省理工学院
mongoose-sanitize-json 当文档转换为json时,此插件将删除以下字段“ _id,__ v,__ t”和已发布的虚拟“ id”。 (请注意,其他虚拟字段也将被发布)安装$ npm install mongoose-sanitize-json用法var mongoose = ...
:npm install hast-util-sanitize用import { u } from 'unist-builder'import { h } from 'hastscript'import { sanitize } from 'hast-util-sanitize'import { toHtml } from 'hast-util-to-html'var tree = h ( ...
$ bower install --save-dev sanitize.stylus npm $ npm install --save-dev sanitize.stylus 用法 触控笔 使用@import导入项目中的文件,不带以下扩展名: @import "/path/to/sanitize" CSS 使用原始指定当前...