jQuery使用中可能被XSS攻击的一些危险环节提醒


Posted in Javascript onMay 24, 2016

$
我们经常使用向 $ 内传入一个字符串的方式来选择或生成 DOM 元素,但如果这个字符串是来自用户输入的话,那么这种方式就是有风险的。

先看一个 DEMO:http://jsbin.com/duwuzonife/1/edit?html,js,output

$("<img src='' onerror='alert();'>");

当用户输入的字符串是像这样的时,虽然这个 <img> 元素不会马上被插入到网页的 DOM 中,但这个 DOM 元素已经被创建了,并且暂存在内存里。而对于 <img> 元素,只要设置了它的 src 属性,浏览器就会马上请求 src 属性所指向的资源。我们也可以利用这个特性做图片的预加载。在上面的示例代码中,创建元素的同时,也设置了它的属性,包括 src 属性和 onerror 事件监听器,所以浏览器会马上请求图片资源,显然请求不到,随机触发 onerror 的回调函数,也就执行了 JavaScript 代码。

推荐阅读 $ 的官方文档:http://api.jquery.com/jQuery/

类似的其他方法

.after()
.append()
.appendTo()
.before()
.html()
.insertAfter()
.insertBefore()
.prepend()
.prependTo()
.replaceAll()
.replaceWith()
.unwrap()
.wrap()
.wrapAll()
.wrapInner()
.prepend()

以上这些方法不仅创建 DOM 元素,并且会马上插入到页面的 DOM 树中。如果使用 <script> 标签插入了内联 JS 会立即执行。

不安全的输入来源

document.URL *
document.location.pathname *
document.location.href *
document.location.search *
document.location.hash
document.referrer *
window.name
document.cookie

document 的大多数属性都可以通过全局的 window 对象访问到。加 * 的属性返回的时编码 (urlencode) 后的字符串,需要解码才可能造成威胁。

不安全的操作
把可以被用户编辑的字符串,用在以下场景中,都是有隐患的。总体来说,任何把字符串作为可执行的代码的操作,都是不安全的。

1.通过字符串创建函数

(1)eval
(2)new Function
(3)setTimeout/setInterval
2.跳转页面

location.replace/location.assign
修改 <script> 标签的 src 属性
修改事件监听器
总结
如果发生在用 jQuery 时被 DOM-XSS 攻击的情况,大多是因为忽视了两个东西:
1. 在给$传参数时,对参数来源的把控。
2. 用户的输入途径不只有表单,还有地址栏,还可以通过开发者工具直接修改 DOM ,或者直接在控制台执行 JS 代码。

Javascript 相关文章推荐
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
详解Node.js模块间共享数据库连接的方法
May 24 #Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 #Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 #Javascript
实例解析jQuery中proxy()函数的用法
May 24 #Javascript
jQuery前端开发35个小技巧
May 24 #Javascript
JS+Canvas绘制时钟效果
Aug 20 #Javascript
基于JQuery实现图片上传预览与删除操作
May 24 #Javascript
You might like
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php学习笔记之基础知识
2014/11/08 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
python实现统计代码行数的方法
2015/05/22 Python
Python实现二分查找算法实例
2015/05/26 Python
Python函数式编程
2017/07/20 Python
利用python修改json文件的value方法
2018/12/31 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Python3中exp()函数用法分析
2019/02/19 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
德国拖鞋网站:German Slippers
2019/11/08 全球购物
自我鉴定的范文
2013/10/03 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
优秀应届生求职信
2014/06/16 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
企业法人代表证明书
2015/06/18 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS