HTML5安全研究（精选7篇）
HTML5安全研究 第1篇
Web应用在过去20年发生了举世瞩目的变化,越来越多的新技术应用到富互联网应用中,一些新的技术正在重新塑造Web应用的格局。回顾以往,从Tim-Berners-Lee于1990创建万维网(WWW)和超文本标记语言(HTML)以来,Web应用技术伴随着互联网的蓬勃兴起而发展迅猛,历数近20年来Web应用技术的发展(如表1所示),不难发现,每一次新技术的应用,不仅给Web应用带来了新的变革,同时也伴随着相应的安全问题。
近年来HTML5技术悄然兴起,特别是互联网主要浏览器厂商Google、苹果、Mozilla、Opera等都大力支持HTML5协议的制订与推广工作,HTML5良好的交互性能,简洁易懂的代码以及强大的特性,使得HTML5已经成为事实上下一代Web应用技术标准。如今无论是电脑上的浏览器,还是平板电脑、手机等等智能终端,都在开始支持HTML5新特性。利用这些新特性,可以方便地进行地理信息查找和定位、离线处理文档、通过Web聊天等等,同时界面更加友好和绚丽多彩,很多厂商还把3D游戏移植到浏览器中,用户甚至可以只通过浏览器就进行娱乐。
诚然HTML5的一些新特性[2]:Canvas、Geolocation、Web Socket和Web Workers等令无数开发人员兴奋不已,但与此同时,新技术引入的安全问题也不能被忽视。例如新标签、属性的引入,带来了新的跨站问题;跨域资源共享本来为了网站之间更好地共享资源,然而一旦设置不当,很可能给攻击者带来极大的便利;Web Socket的误用可能为攻击者进行内网扫描提供强大能力,从而增大了内部网络的风险,这些都值得引起安全研究者的关注。
中国互联网上目前支持HTML5的网站越来越多,我们手工测试了中国Alexa Top 50中的支持HTML5的大型互联网网站,其中38%的网站部分使用了HTML5技术,但是大部分网站存在跨站脚本漏洞、跨域请求配置不安全以及脚本篡改等安全问题,容易造成新型HTML5攻击,这说明了国内主流Web网站在防护HTML5安全方面还存在诸多问题。同时我们也调查分析了目前国内外主要的Web应用扫描器对HTML5的支持情况,发现国内外主流Web应用扫描器对HTML5安全检测支持不足,从而造成网站安全评估过程中的HTML5安全死角。
1 HTML5安全研究现状
2009年之后,HTML5的安全问题逐渐引起了国内外教育机构、安全厂商和工程师的注意。2010年加州大学伯克利分校Dawn Song教授用逆向分析方法,发现了新型浏览器在部署postM essage和HTML5客户存储技术出现的安全问题[3],是安全界对HTML5安全技术的首次深入研究,但是文中仅针对部分HTML5安全特性进行了分析。国际著名Web安全组织OWASP针对HTML5安全,成立工作组并维护了HTML5安全手册,该手册由Web安全专家进行维护,具有非常高的参考价值,然而该手册仅给出了当前已发现的HTML5漏洞,并没有对HTML5安全问题进行归纳并提出防护建议。Michael Schmidt于2010年发布了关于HTML5的安全报告[4],详细阐述了HTM L5的安全问题,安全公司趋势科技(TrendM icro)在2011发布了HTML5的安全研究报告[5],对几种攻击场景进行了描述。与此同时,LavaK umar Kuppan[6]和Shreeraj Shah[7]分别在2010年和2012年Black Hat EURO大会上公布了通过HTML5技术进行攻击的10种攻击向量,同时给出了概念验证(POC)程序;Ming Chow在2011年DEF CON 19大会上,介绍了如何滥用HTML5特性[8]。Kraków Malopolskie在2011年陆续公布了他在HTML5上发现的文件上传、点击劫持等漏洞,上述学者主要是公布了针对HT-ML5发现的最新漏洞或攻击方法。在国内,HTML5的安全研究也逐渐引起安全人员的重视,国内著名白帽吴翰清在新书《白帽子讲Web安全》[9]对HTML5部分安全问题进行了探讨,天融信于2011年底发布了HTML5的安全报告,引起了国内安全界的关注,但是目前国内对HTML5安全研究还非常匮乏,对HT-ML5安全问题存在的原因与防范技术没有进行总结,也尚未对国内支持HTML5互联网网站的安全风险进行实际评估分析。
2 HTML5安全问题分析
通过对国内外HTML5安全问题研究工作的总结分析,我们将HTML5安全问题分为以下主要的三类:HTML5安全漏洞、HTML5新型攻击机制、HTML5新特性滥用。如表2所示。根据实际测试发现,通过HTML5进行一次成功的攻击,一般都需要两种以上攻击手段进行配合才能成功,而且绝大多数攻击都是基于跨站漏洞基础之上。接下来我们将会从上面三个分类对HTML5的安全问题进行说明。
2.1 HTML5安全漏洞
HTML5中引入了新标签audio、video以及新属性onerror、autofocus等,这些新标签与新属性能够触发JavaS cript脚本执行,如果对标签、属性的参数没有进行严格过滤,那么就有可能引起跨站洞。例如新的多媒体类标签所引起的跨站漏洞:
HTML5新引入了一些增强用户体验与交互的特性,如“拖拽”等,这些功能仅需鼠标就能完成相关操作,浏览器通过后台捕捉到相关事件进行处理,在这个过程中,也可能引发跨站脚本漏洞。
文件对象模型(DOM)是浏览器重要的一部分,用来渲染Web内容。在HTML5中,升级的DOM level 3在支持HTML5和XHR的同时,也增加了很多新的特性:XPATH处理、DOMUserData等等,这使得基于DOM的跨站漏洞明显增加。在使用DOM函数document.*、eval()的过程中,如果Web应用在调用这些函数时没有经过仔细处理,那么很容易造成基于DOM的跨站漏洞。与此同时,浏览器允许在URL中使用#号分割并将参数直接传递给DOM,这个过程中不需要与服务器进行交互,例如:
浏览器直接到达Characteristics一节所在的位置,如果攻击者诱使受害者点击了如下链接:
那么DOM会直接处理http://evilsite.com/*这个链接上的恶意代码,从而发起一次攻击。
无论是新出现的Web应用XSS漏洞,还是基于DOM的XSS与重定向漏洞,都需要对传入的数据进行严格的审查和过滤,才能有效防范与避免。
2.2 HTML5新型攻击机制
2.2.1 跨域请求伪造攻击(CSRF)
跨域请求伪造攻击是当前一种非常流行的攻击方式,攻击者通过各种手段窃取受害者身份(cookie、token等),进而伪装受害者身份进行各种破坏活动。由于引入了跨域共享机制(COR),HTML5中出现了新的跨域请求伪造方式。
HTML5中存在几种不同方法实现跨域资源共享,HTTP头中的“origin”控制着跨域资源共享是否使用,在针对HTML5的跨域伪造请求攻击过程中,攻击者可以使用POST方法,通过XHR建立一个隐蔽的连接,同时将“withC redential”属性设置为真,就能够实现CSRF中最重要的Cookie窃取与重放攻击。
攻击者可以通过图2所示方式来实施一次CSRF攻击:
以下是一个CSRF的攻击载荷脚本:
该脚本仅在头部添加了“Content-Type”,这样XHR就不会通过预检测过程来查看服务器是否支持相关规则,同时将http.withC redentials设置为真,就能够对cookie进行重放,从而进行一次成功的跨域请求伪造攻击。
在HTML5中解决跨域请求伪造攻击的一个重点防御措施是严格定义跨域请求的范围。
2.2.2 点击劫持
点击劫持[10](Clickjacking)又称界面伪装劫持,是一个近年来比较流行的攻击方式,特别是在社交网络流行的情况下,这种攻击的效果更加明显。
点击劫持是攻击者使用透明网页覆盖在一个正常网页上,诱使用户点击正常网页上的按钮,在用户不知情的情况下,同时点击了透明页面上的按钮,从而触发攻击者预先设置的恶意代码。
在HTML5中,由于引入了新标签和新层叠样式表(CSS-level3),使得点击劫持变得更加容易。由于HTML5在iframe中引入了沙箱属性,允许在iframe中载入非同源域名,如果设置不严格,在使用iframe的同时又允许脚本执行,就会出现跨站脚本攻击的可能性,如下:
很多网站为了解决点击劫持问题,使用了frame-busting技术:用一段Javascript脚本来检查form中是否存在覆盖页面,然而沙箱属性禁止JavaS cript运行,从而导致使用沙箱就能绕过frame-busting检查:
2.2.3 跨域共享劫持
在HTML5中,还出现了新的劫持方式:称作跨域共享劫持(CORjacking),在Web应用运行的过程中,可能需要调用各种不同服务器上的资源(Flash、音频、视频)来丰富用户的体验,这些都是通过文件对象模型(DOM)来解析执行的,跨域请求的这些资源也可以通过DOM进行控制,从而能够造成跨域资源共享劫持,例如:某网站加载一个flash的程序:
当Flash文件加载完成后,浏览器通过DOM来控制里面的参数,其中document.getE lementB yN ame(login’).item(0).src不仅具有只读的属性,而且是可写的,攻击者可以通过跨域共享机制替换一个恶意链接:
这样就完全劫持了原有网页的login插件,用户很容易泄露自己重要信息。
2.2.4 离线缓存攻击
HTML5支持缓存Web应用,方便用户线下使用,代码中只需通过:
同时列出想要缓存的页面,就可以将当前列出的Web应用进行缓存,这样很容易造成离线缓存攻击。
假设场景一:在一个公共AP访问a.com网站,HTTP请求通过这个不安全的AP提交给a.com服务器,服务器进行应答,此时攻击者通过AP控制了服务器的应答数据包,可以将一个隐藏的包含有src=http://b.com的iframe加入到应答数据包中,这样受害者便不知不觉就访问b.com(b.com是一个需要输入用户名和密码的网站),b.com在发送请求后,攻击者应答数据包中包含了cache.manifest,要求客户端缓存B网站的数据。场景二:受害者在一个安全网络中登陆b.com准备输入自己的信息时,浏览器直接加载缓存好的b.com程序(包括里面的恶意JavaS cript),当用户输入在登陆位置输入用户名和密码时,里面的Javascript脚本将该信息上传到攻击者控制的服务器上。这样就成功执行了一次应用缓存攻击。
解决离线缓存攻击的问题主要集中在客户端,用户需要在每次上网前对本地缓存进行清除,特别对一些应用,可能会提示用户是否进行本地缓存,如果涉及个人隐私:如电子邮件、网上商城等,不应当允许缓存,这对用户的安全意识与知识提出了更高要求。
2.2.5 本地存储攻击
HTML5引入了本地存储技术(Web Storage),用来取代cookie的功能,同时解决客户端应用数据存储问题。本地存储技术的引入,在方便Web应用的同时,也容易引起会话劫持、信息泄露等问题:
会话劫持在Web应用建立会话的过程中,经常需要使用cookie,由于cookie内包含一个随机数(令牌),可以使建立的会话不被第三方窃取。在HTML5中,cookie被sessionI D取代,如果一个网站存在XSS漏洞,那么当受害者浏览该网站并触发XSS漏洞,用户的会话ID将会被窃取:
如上所示,XSS攻击依然是窃取会话cookie的手段,HTML5并没有改变这一点,然而攻击者需要修改攻击的JavaS cript代码以获取sessionI D(取代cookie)。需要说明的是,在HTML5之前,HTTPonly标签用来阻止通过JavaS cript窃取cookie,但HT-ML5本地存储中不再支持HTTPonly标签,使得本地存储的防护能力反而削弱了。
信息泄露 通过XSS漏洞不仅可以获得当前的会话cookie,也可以获得本地存储的其它信息,特别是当一些隐私数据存储到本地时,这种情况便更加危险。另外,当一个Web网站由多个程序员编写各自的应用,而仅通过不同路径进行区分时,本地存储的信息往往是跨域名共享的,那么攻击者在www.test.cn/app1上存在XSS漏洞情况下,能够读取www.test.cn/app2应用的存储数据。
注入攻击 由于HTML5支持在浏览器中部署一个轻量级的数据库,那么SQL语句的查询和读取也成为一种必然,从而引起SQL注入等威胁。
解决本地存储攻击的方法应注意一下几点:首先客户端尽量不要存储敏感信息,敏感信息应该保存在服务器端;其次使用cookie存储会话信息取代本地存储,这样可以使用HTTPonly标签对会话信息进行保护,考虑到本地存储的信息直到浏览器关闭才会清除,使用cookie能够更好的保护会话信息;最后,在一个域名下运行多个Web应用,同时仅通过路径区别不同应用的情况下,尽量不要使用本地存储。
2.3 HTML5新特性的滥用
2.3.1 滥用网络API和SOCKET
HTML5支持WebS ocket和XMLHttpR equest level 2。这些功能为攻击者提供了构造各种恶意代码的可能性。WebS ocket定义了独特的事件模型,可以使用相关的状态信息进行有效地TCP跨域扫描和通信。滥用WebS ocket和XHR level 2是HTML5面临的最大威胁之一:
攻击者可以通过浏览器对目标内网进行主机扫描,而且这些扫描由于通过浏览器进行而往往不会被防火墙过滤。
在2010年Black hat大会上,Kuppan详细讲解了使用WebSocket扫描的技术细节,并发布了一个概念验证工具“JS-Recon”,该工具可以通过受害主机对内网进行扫描。使用COR通过HTTP协议建立一个隐蔽管道,从而获取内网主机浏览器的行为。2010年Black Hat大会上,Kuppan也发布了“shell of the future”,详细介绍了通过持续劫持受害者的会话session,进而使用客户端浏览器来劫持受害者的浏览器。
目前,仅在服务器端部署安全措施已经不可能完全解决潜在的安全问题,但是服务器的一些安全配置可以解决绕过访问控制的问题:严格定义Access-Control-Allow-Origin的参数从而限制跨域请求的URL,而不是把该参数设置为通配符“*”。
2.3.2 滥用地理位置信息
HTML5支持用户通过本地浏览器获取地理位置信息。这些信息泄露后,在社会工程攻击领域应用非常广泛,例如:
攻击者可以谎称自己是某个权利部门,谎称受害者还没有交税,并且知道受害者的地理位置,如果一天之内不缴纳罚款,将会受到处罚等等。
攻击者可以建立关于受害者的地理位置信息数据库,一些不法分子会专门购买一些富人的信息,想知道他们哪些时间不在家,以便进行入室行窃等犯罪行为。
地理位置信息泄露的潜在风险不容小觑,从防护的角度考虑:一方面,在服务器端,必须要求Web应用在获取用户地理信息位置时给用户提示信息。另一方面,客户端用户必须谨慎操作,只给信任的网站或者应用授予获取地理位置的权限。
2.3.3 使用Web Workers特性构造僵尸网络
使用Web Workers允许后台运行多个Javascript线程是HT-ML5引入的新特性之一,攻击者可以利用这个特性构建僵尸网络。攻击者仅需要在浏览器执行一段相同的Javascript代码,就能够在PC机、苹果、iP hone、Android手机等等设备多处运行,而且基于Javascript的僵尸程序仅运行在内存中,不会驻留在硬盘上,使得发现这种僵尸网络变得异常困难。
基于Web Workers的僵尸网络用途很多,但是首先存在如下两点不同特征:
通过跨站脚本攻击执行Javascript僵尸程序基于浏览器的僵尸程序不会像传统僵尸程序持久运行,当受害用户关闭浏览器标签时,僵尸程序同时也被关闭。攻击者可以使用其它方法,比如点击劫持或者tabnabbing攻击以获取程序更持久的运行时间。
基于浏览器的僵尸网络攻击手段也非常丰富,主要可以分为以下几类
分布式拒绝服务攻击 通过GET方法(含COR)对目标网页服务器发送请求,即便目标网页服务器不支持跨域共享(COR)协议,它依然要处理这个请求,从而达到DDoS的效果。
生成Bitcoin货币 Bitcoin货币在国外网站非常流行并且已经成为地下产业链交易货币之一。通过浏览器的僵尸程序生成Bitcoin货币已经存在。
暴力破解密码 在WebW orkers出现之前,通过浏览器的JavaS cript程序暴力破解密码的速度远不如那些专门的破解程序。在HTML5允许浏览器后台多线程以及目前客户端CPU性能显著提升的背景下,允许通过多线程对密码进行暴力破解。研究员Kuppan测试,Javascript在暴力猜解数据的速度是1 000 000MD5/秒,比专用的暴力破解程序速度少100~120倍,但是如果使用基于浏览器的僵尸网络,100个僵尸程序共同进行破解,效率就能够达到专业级的破解程序。他也发布了一款概念验证程序Ravan,提供在线破解MD5和SHA1哈希值的功能。
防御Web僵尸网络攻击没有一劳永逸的办法,但是我们可以通过配置Web应用防火墙(WAF)来阻止频繁使用CORS请求的IP。
3 国内网站HTML5安全情况分析
当前国内越来越多的网站开始采用HTML5技术。这些网站的安全状况引起了我们的关注。我们手工检查了目前Alexa50:中国网民访问最多的前50个网站,发现除谷歌和雅虎外,48个中国网站中有19个网站部分使用了HTML5新特性如:媒体标签、跨域策略等。通过手工测试(配合burp suite等Web应用扫描器),我们发现了这些网站存在的部分安全漏洞,如表3所示。
注:1.部分漏洞已提交至乌云漏洞平台并得到厂商确认2.H:高M:中L:低
表3中XSS1指该网站存在跨站脚本漏洞,并能够成功执行Javascript代码进行攻击,通过这类漏洞,第二节所述的HTML5新型攻击与滥用技术都有可能实现,故我们判定风险等级为高。XSS2指该网站存在HTTP注入漏洞,当攻击者通过HTTP请求的数据包注入数据后,服务器将注入的数据不经过任何修改直接返回给浏览器,这种情况可能造成浏览器执行恶意代码,但是情况并不严重,故我们判定风险等级为中。COR1指网站在定义跨域请求范围时,直接定义为*,允许调用任意第三方脚本,为攻击者提供了便利,故风险等级定义为中。COR2指网站将跨域请求的范围定义为*.domain.com尽管已经能够将跨域请求的范围定义在特定的域名之内,但是如果网站存在XSS1漏洞的情况下,依然不能避免通过子域名的攻击,故风险等级定义为低。脚本篡改指在HTTP请求中,存在referer参数调用第三方的数据或程序,在第三方程序不被信任,或者referer参数被篡改的情况下,容易受到攻击,故风险等级定为中。
从表3可以看出,国内网站都存在不同程度的安全问题,需要指出的是由于测试的这些国内网站中仅有优酷实际应用了HTML5的新标签与属性,因此所发现的XSS1类漏洞不是基于HTML5特性而引入的,但却是触发其它HTML5攻击或滥用机制的基础。通过进一步深入渗透测试,我们利用优酷网站的跨站漏洞部署shell of the future,一旦受害者点击了带有这个脚本的优酷跨站链接,shell of the future就会给攻击者一个反弹的web shell,攻击可以通过自己的浏览器浏览受害者的Web页面,这等于劫持了攻击者的HTTP/HTTPS会话,这里使用了在http协议上面建立一个新的HTTP管道,并且使用了HTML5跨域请求实现整个会话劫持;利用上述的淘宝网站跨站漏洞,我们部署了一个DDoS脚本程序,该程序使用了WebW orkers在受害者浏览器的后台开启一个线程,通过跨域请求访问(XHR)某一台指定的服务器,在受害者触发淘宝漏洞的情况下,通过邮件向20个受害者(测试用户)发送带有这个脚本的淘宝链接,在受害者点击后,后台的WebW orkers在启动一个线程的情况下访问了我们测试的服务器(Cent OS5.0),CPU的占用率就高达26%,可以想象如果受害用户数量增加一定的数量,完全可以造成目标服务器拒绝服务;再次利用淘宝的跨站漏洞,配合HTML5新标签Canvas滥用,这里我们使用了HTML2CANVAS这个开源的函数库,在跨站脚本中调用这个库中的函数,就能够对DOM对象进行劫持,对目标当前的页面做“快照”,从而造成一定程度的用户隐私泄露。综上所述,通过简单的跨站漏洞配合新型HT-ML5攻击与滥用技术,就能够实现一次效果明显的攻击,足见目前国内HTML5网站的脆弱性。同时我们看到这些存在漏洞的网站在调查的21个HTML5网站中占到了42%,而这仅仅限于我们在两周的手工渗透测试中所发现的安全问题。另一方面,从跨域请求的安全设置情况也可以看出,国内网站技术与运维人员的HTML 5安全意识还有待提高。
4 Web扫描器HTML5安全情况
目前国内外网站的安全评估主要是通过定期对Web应用进行渗透测试进行的,Web应用扫描工具对自动化检查网站安全起到了重要作用。因此我们调研了部分当前流行的Web应用扫描工具,查看这些工具是否能够检测出HTML5相关安全问题。们调研了部分当前流行的Web应用扫描工具,查看这些工具是否能够检测出HTML5相关安全问题。
近年来,在商用和开源领域都涌现了很多杰出的Web应用扫描器,著名黑客、nmap作者Fyodor对安全工具进行排名[11],Web应用安全联盟(WASC)也在2011年对各种Web应用扫描器的性能进行评估[12],综合以上信息,我们选取了排名较高且得到广泛好评的扫描器,查看这些工具的HTML5安全检测支持情况。
表4中全自动指在扫描过程中只需要简单的配置和输入目标网站的URL就能够进行自动化的扫描。半自动扫描工具不仅能够自动化的扫描,还提供渗透测试员在手工测试中对各种请求的分析和攻击环境。前五个商业软件都是业界知名的Web应用扫描器且价格不菲;W3af目前在开源Web应用扫描器中排名最高,BeE F是著名的开放Web攻击平台,攻击者需要使用一个XSS漏洞,就能进一步验证其它攻击向量;WebR avor和MatriX ay分别是国内安全厂商安域科技和安恒科技的旗舰产品,在国内很多安全团队都使用这款工具进行安全评估。
针对第2节总结的HTML5安全问题,我们通过实际测试以及查看相关的使用文档,对上述Web应用扫描软件进行了检测(如表5所示),从表5可以看出,目前只有4款商业工具部分支持检测HTML5的安全问题,开源工具几乎都不能检测出HT-ML5的安全问题,国内的Web应用扫描工具也同样缺乏相关检测功能,这使得安全评估或者渗透测试过程中,HTML5的安全问题将成为盲点而得不到应有的关注。
注:√能够检测此类型漏洞或者不安全的配置 不能检测此类型漏洞或者不安全的配置-此检测功能正处于开发状态
5 总结和展望
HTML5自2009年以来得到了迅猛发展,通过我们的调研发现,国内对HTML5安全研究的关注度与该技术迅猛发展不相匹配,国内外著名的Web应用扫描工具也都不支持HTML5安全特性;尽管国内访问量前50的网站中有38%的网站部分使用了HTML5技术,但是其中63.15%的网站存在比较严重的跨站脚本漏洞(XSS1),84.21%的网站对跨域共COR1+COR2)配置存在问题。可以预见在不久的将来,HTML5中越来越多的新特性将会被网站所采用,这些网站暴露出的风险也将越来越多。
本文通过介绍和分析目前HTML5存在的漏洞、攻击向量、特性滥用等问题,展示了HTML5在应用过程中潜在威胁,从本文的分析中可以看到,安全威胁从以往的服务器端已经扩展到客户端,如何控制客户端威胁是一个比较棘手的问题。值得指出的是目前HTML5协议还在进一步修订当中,还可能出现更多的问题值得我们去分析研究。鉴于目前Web应用扫描器中,还没有一款工具能够完全支持HTML5的弱点扫描(特别是开源扫描器),那么进一步分析HTML5协议脆弱点以及开发一款支持HTML5各种特性的弱点扫描工具将是下一阶段的研究方向。
参考文献
[1]Stuttard D,Pinto M.The Web Application Hacker's Handbook:Find-ing and Exploiting Security Flaws[M].2nd ed.Wiley,2012.
[2]Lubbers P,Smith R,Sali F.HTML5高级程序设计[M].北京:人民邮电出版社,2011.
[3]Hannax S,Shinz E C R,Akhawe D,et al.The Emperor’s New API:On the(In)Secure Usage of New Client Side Primitives[M].IEEEWeb 2.0 Security and Privacy Workshop,2010.
[4]Schmidt M,Rthlisberger T.HTML5 web,security[EB].Compass Se-curity AG,December 6th,2011.
[5]McArdle R.HTML5 OVERVIEW:A LOOK AT HTML5 ATTACKSCENARIOS[EB].Trend Micro Research Paper,2011.
[6]Kuppan L.Attacking with HTML5[EB].Blackhat-AD-2010.
[7]Shah S.HTML5 Top 10 Threats Stealth Attacks and Silent Exploits[R/OL]Blackhat,2012.https://media.blackhat.com/bh-eu-12/shah/bh-eu-12-Shah_HTML5_Top_10-WP.pdf.
[8]Chow Ming.Abusing HTML5[R/OL],2011.https://media.de fcon.org/dc-19/presentations/Chow/DEFCON-19-Chow-Abusing-HTML5.pdf.
[9]吴翰清.白帽子讲Web安全[M].北京:电子工业出版社,2012.
[10]Balduzzi M,Egele M,Kirda E,et al.A solution for the automated detec-tion of click jacking attacks[C]//Proceedings of the5th ACM Sympo-sium on Infor mation,Computer and Communications Security,ASI-ACCS2010,Beijing,China,2010:135-144.
[11]Lyon G.Top125Network Security Tools[EB/OL].[2011].http://sectools.org/.
HTML5安全研究 第2篇
HTML是一种利用标记 (tag) 来描述字体、大小、颜色及页面布局的语言, 它是Internet上用于编写网页的主要语言。HTML的历史可以追溯到20 世纪90 年代初, 1993年HTML第一个非标准版本以因特网草案的形式发布, 到1999年推出4.01版, 这期间HTML得到了快速发展。但这之后HTML似乎并无发展, 对Web标准的焦点也转移到了XML和XHTML上。为了适应互联网的发展, 并支持新的Web应用, 同时克服现有的缺点, 最新的HTML5标准应运而生, 它不仅强化了Web网页的表现性能, 还带来了强大的用于交互、多媒体和本地化等方面的标签以及应用编程接口。
相对HTML4而言, HTML5 的语法发生了变化, 同时取消了一些过时的标记, 提供了一些新的元素和属性。其中很重要的一个特点是, 追加了本地数据库等Web应用功能, 该功能将内嵌一个本地的SQL数据库, 以加速交互式搜索、缓存以及索引操作。新增的Canvas元素以及伴随该元素而来的Canvas API编程接口, 实现了在网页上绘制任何需要的、非常漂亮的图形与图像, 从而制作出更加丰富多彩、赏心悦目的Web页面。
1 Canvas
如果在页面上放置一个Canvas元素, 就相当于放置了一块“画布”, 可以在其中进行图形绘制。实际上, 单独的一个Canvas标记只是在页面中创建了一块矩形区域, 默认情况下该矩形区域宽为300px, 高为150px, 用户也可以自定义大小。然后必须配合使用JavaScript脚本控制, 才能够完成各种图形、线条、文字以及复杂的图形变换操作, 甚至还可以加入高级动画。
HTML5Canvas绘图与传统的基于SVG的矢量绘图技术不同, 它是一种像素级别的位图绘图技术, 也就是说Canvas区域中的每个像素都可控。还有一个很重要的特点, Canvas元素可以直接使用JavaScript脚本在Web页面进行绘图, 不需要任何第三方插件, 具有跨平台的先天优势, 这与Flash、SVG和VML等也不相同。
2 基本图形绘制
无论绘制什么图形, 首先要在页面中放置Canvas元素, 即创建画布, 代码如下:
这样页面上就定义了一块200px*200px的隐形区域, 在浏览器中运行时其不可见, 如果需要它显示出来, 可以通过属性设置为这块区域添加边框, 代码为:
Canvas的id设为new, 在后面的绘制过程中可以通过id来找到该元素。接着要获取Canvas对象的访问权, 并定义一个context变量, 传入Canvas类型, 这里是"2d" , 具体代码如下:
var canvas=document.getElementById ('new') ;
var context=canvas.getContext ('2d') ;
上述准备工作完毕后, 就可以进行基本图形的绘制, 下面举两个简单实例。
2.1 矩形绘制
在画图之前, 首先要设定绘图样式, 主要是针对图形的颜色, 但不限于图形颜色, 如使用fillStyle设置填充的颜色值, strokeStyle设置边框的颜色值, lineWidth指定图形边框的线宽;然后分别使用fillRect方法和strokeRect方法来填充矩形和绘制矩形边框。具体代码如下:
其中, fillRect和strokeRect方法中的第1 个" 10" 表示矩形起点的横坐标, 第2个" 10" 表示起点的纵坐标", 180" 表示矩形的长度", 150" 表示矩形的高度。通过这4个参数, 矩形即可绘制出来。运行结果如图1所示。
2.2 圆形绘制
要想绘制圆形, 需要使用路径来勾勒图形轮廓。可以通过调用context对象的beginPath () 方法开始创建路径, 然后通过arc () 方法来实现圆形或圆弧的绘制。该方法定义如下:
context.arc (x, y, radius, startAngle, endAngle, anticlock-wise)
其中, (x, y) 是圆心坐标, radius是圆形半径, startAn-gle和endAngle是初始角度和结束角度, 其值使用弧度单位, 常用Math.PI的写法, Math.PI表示180°, 所以Math.PI*2表示360°, 即完整的一个圆形;anticlockwise表示是否为顺时针方向显示, 是一个布尔型的参数值, 参数值为true时, 按顺时针绘制;参数值为false时, 按逆时针方向绘制。图形绘制完成后, 应关闭路径。如果这个圆形需要填充颜色, 可以通过fillStyle属性来设置。具体代码如下:
运行结果如图2所示。
3 五星红旗绘制
Canvas元素主要通过运用JavaScript脚本来动态渲染图像, 该方法使用简单但功能强大。大部分的浏览器都支持2DCanvas上下文 (即context) , Firefox还可以通过插件形式支持3DCanvas, 在IE中也可以使用
下面通过一个网页实例来看看如何使用Canvas画布来绘制五星红旗, 全部代码如下:
运行结果如图3所示。
4 结语
HTML5中新增的Canvas画布元素及其API编程接口, 能够实现各种基本图形的绘制, 不仅如此, 在Canvas中还可以绘制渐变图形、绘制阴影, 以及应用图像及文字, 使Web页面更加丰富多彩。现在HTML5已获得绝大部分浏览器支持, 它必将成为HTML、XHTML等的新一代标准。
参考文献
[1]明日科技.HTML5从入门到精通[M].北京:清华大学出版社, 2012.
[2]李伙钦.HTML5网页电子画板的设计与实现[J].科技视界, 2012 (2) .
HTML5安全研究 第3篇
1.1 HTML5概念
HTML5是HTML4、XHTML1、HTML DOM 2的一个新版本,它主要增强了(X)HTML的功能[1],同时也解决了已有规范中存在的一些问题。简而言之,HTML5是HTML的升级版。
HTML5规范的第一版是由WHATWG在2008年发布的,然而,现在有两个不同版本规范:WHATWG规范[2]和W3C规范[3]。WHATWG HTML5和W3C规范的版本虽然都来自同一个源出处(两者都是由Ian希克森编辑)但是他们在某些方面存在分歧[4]。本文将主要集中在W3C版本规范,其中第一个公共草案是在2008年1月22日获释。
1.2 构成HTML5规范的规范元素
1.2.1 语义级别的标记语言
HTML5与时俱进增加了一些反映web应用的新元素及属性。这些元素、属性被定义为具有某种特定的含义(语义)。
另外,这些元素、属性可以由两个不同的语法来表示:HTML和XML。HTML类似SGML,但是SGML从未在浏览器中实际应用过,于是HTML5定义了一个新的语法,称为HTML[5]。新的HTML要求一个定义的DOCTYPE去确保浏览器在标准模式中呈现页面。DOCTYPE声明语句是<!DOCTYPE HTML>,该语句在HTML中不区分大小写。下图演示了两种语法构成(见图1(a))。
1.2.2 语义级别的API函数
这些API函数用于访问其他应用程序的功能或数据。这些函数表明了他们在Web应用架构中的关键作用,如图1(b)所示。
1.3 由浏览器支持的HTML5(Windows平台)
各浏览器支持HTML5的程度存在一定差异,如表1所示。
2 HTML5的新功能
2.1 新元素
在HTML5中新增了27个新元素,这些新元素被分为如表2所示的6类。并且这些元素在HTML5规范中全部是小写。
在这里,我们把audio元素[6]被作为一个代表性的例子来演示在HTML5中是如何工作的。
audio元素是HTML 5中一个最令人兴奋和期待已久的功能,因为它可以使音频在浏览器上直接播放,而需要专用音频插件。首先,让我们用下面的例子来说明音频元素,如图2所示。
音频编码有多种格式,但是还没有一个浏览器可以支持所有的音频编码,于是Ian Hickson说:“我极不情愿地得出的结论:根据最新情况,这还没有合适的可以支持所有版本的音频编码的浏览器,所以我个人认为,该浏览器的出现应该是一个小概率事件”[7]。
第二,为什么一个浏览器可以不用插件就可以播放音频?
下面的例子是通过Chrome浏览器来演示说明。
当用Chrome浏览器打开网页时,它会自动加载ffmpeg[8]的avcodec-52.dll(参见图3(a))。图中的三个动态链接库是ffmpeg的编码库,包含了编码和解码(见图3(b)项)。这就是为什么Chrome浏览器可以在本浏览器上播放音频的关键原因。
2.2 Web应用多种API函数
HTML5介绍的了一系列API函数,来帮助创建Web应用程序,例如:
API函数用新的video[9]和audio元素来播放视频和音频。
以下通过WEB应用API函数中的audio相关的函数来演示,如图4所示。audio元素揭示了一个Java Script API,因此网站设计人员可以使用CSS和HTML创建用户按钮,并使用HTML5的audio API给予用户一些适当的功能。
3 HTML4元素在HTML5中的变化
3.1 废弃的元素
HTML5废除了一些陈旧过时的元素。废除这些元素的原因包括以下几种:(1)CSS这些元素只是单纯的呈现内容,所以它们的功能可以更好地通过CSS来处理。(2)Experience这些元素在使用中影响了用户的体验并以一种负面的方式让用户接受。(3)Uselessness这些元素由于不经常使用,而容易造成混淆,或着这些元素可以由其它元素来代替。
3.2 新的属性
HTML5除了废弃一些元素外还给一些元素上增加了新的属性。在这里,我们以script元素被作为一个代表性的例子来说明。在HTML5中script元素新增加了一个属性:"async",该属性只有在src出现的情况下才能使用。当"async"属性没出现之前,浏览器遇到一个外部脚本,就必须加载并运行该脚本,这会影响浏览器的性能,如果当一个页面有多个脚本块要运行时,这个网页就会加载的很慢。于是HTML5规范增加了一个属性来更有效地帮助脚本运行(见图5)。
参考文献
[1]http://wiki.whatwg.org/wiki/FAQ#What_is_HTML5.3F.
[2]http://www.whatwg.org/.
[3]http://www.w3.org/html/wg/.
[4]http://www.w3.org/TR/html5/introduction.html#history-1.
[5]http://wiki.whatwg.org/wiki/FAQ#What_is_an_HTML_Serialization.3F.
[6]B ruce Lawson,Remy Sharp,刘红伟译.HTML 5用户指南.机械工业出版社,2011,1.
[7]http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2009-June/020620.html.
[8]http://ffmpeg.org/general.html.
HTML5安全研究 第4篇
Web GIS是在Internet或Intranet网络环境下一种显示和分析处理地理信息的计算机信息系统,它的基本思想就是在互联网上提供地理信息,让用户通过浏览器浏览并获得一个地理信息系统中的数据和功能服务[1]。经过多年发展,Web GIS的系统架构已趋于成熟,通常采用B/S结构,即由浏览器、GIS服务器、数据库等三部分构成。
客户端是联系用户和GIS服务的桥梁,现在比较流行的Web GIS客户端技术有Java Applet,Flash,SVG,VML等。由于Flash Player插件在浏览器上得到广泛安装,文件传输小,交互性能良好等特性,使得Flash得到广泛的应用。但Flash是一个相对封闭的技术,与其他开放标准之间没有一个完全融合的方案。而Java Applet在客户端的使用需要安装Java虚拟机,限制了它的广泛使用。SVG的交互性能取决于运行环境的厂家支持程度,最终也没有流行起来。而VML除了IE,其它浏览器都不支持[2,3]。
随着网络的快速发展,越来越多的桌面应用转向Web平台,人们也希望日益丰富的Web服务能做到简单、高效并具有良好的可交互性。为了适应这种需求,WHATWG(Web超文本应用技术工作组)于2004年发起了HTML5,通过引进了一些新的标签和API,大大降低了Web对浏览器插件的依赖程度。本文主要是通过对HTML5和Web GIS的研究,构建基于Canvas新技术的网页GSM基站信息系统,由于基站信息的绘制及部分用户操作的响应都是在客户端由Javascript直接完成,无须通过刷新浏览器或者向服务器再发出请求,因此大大缩短了响应时间,改进了用户体验。
1 HTML5 canvas简介
<canvas>标签是HTML5引入的新的API之一,这个元素可以被Javascript语言用来进行图形图像的渲染和绘图操作。
<canvas>最先在苹果公司的Mac OS X Dashboard上被引入,而后被应用于Safari。如今大部分浏览器都已经支持,包括Firefox,Safari,Chrome,Opera,Iphone,Android等[4,5],IE7和IE8暂且还不支持canvas标签。
<canvas>标签在被浏览器解析时与其它标签没有什么不同,可以通过width和height属性改变画布大小,style设置画布风格,例如,在HTML正文中加入如下标签,可绘制一个长宽分别为512和256的画布。
实际的绘图工作由Javascript完成,通过调用canvas.get Context(context Id)方法可以在画布上进行绘图及图形图像渲染等操作,例如,下面的函数介绍如何在画布上绘制一个矩形。
2 Web GIS系统架构
本文构建的Web GIS系统主要由三个模块构成:客户端,Web服务器以及数据库。服务器采用SQL Server 2008作为数据源,以C#为程序设计语言来实现服务器端对客户端的各种操作的反应;由于IE不支持<canvas>标签,所以客户端采用谷歌Chrome浏览器作为图形浏览实现的平台,无需专门开发其他的可视化界面,如图1所示。
具体的服务器端/客户端软件配置如下:
服务器端:
C#:获取数据库数据并与客户端通信。
IIS6.0:Web服务器。
SQL Server 2008:数据存储。
客户端:
Chrome浏览器:提供Web GIS浏览服务。
JS程序:绘图,响应用户操作并与服务器通信。
3 基于canvas的Web GIS实现过程分析
本文通过Web GIS实现GSM(全球移动通讯系统)基站信息的显示和查询等功能。对于传统的地理信息系统,图形的显示,用户操作的响应等任务大都由服务器端完成,然后将生成的数据或是图片通过网络发送到浏览器,由于地理信息系统往往涵盖的数据量很大,所以经常造成白屏,等待时间过长等现象,用户体验较差。
3.1 基站的绘制
实验通过canvas画布,在浏览器端使用Javascript绘制矢量类型的基站,基站大小,形状等都可定制。不像SVG,canvas只支持一种基本形状矩形。所以其他形状都是由一个或多个路径组合而成,但是通过一组路径绘制函数,可以绘制相当复杂的形状。如,fill Rect()可绘制矩形,arc()可用于绘制弧形等。
基站的位置,名称,频点等数据存储在SQL Server 2008数据库中。javascript发送XMLHttp Request请求,与服务器端建立通信,由服务器提取数据库中的数据,最后封装成XML的格式返回给客户端。
表1显示了浏览器刷新时间随基站数目的变化情况。当页面上只显示1万个基站时,传输的数据量约为1.31MB,刷新时间约为1.865s;当页面显示5万个基站时,传输的数据量约为6.52MB,刷新时间约为4.211s。由表1可以推断,随着传输数据量的均匀增大,浏览器刷新时间是等差递增的。
3.2 基站标签及小区包络的显示
在网络多媒体时代,用户的需求已经不单单是浏览一些静态的网页,而是希望可以更多的参与互动。目前比较流行的Web地图google map,只提供了一些简单的操作,如平移,放大,缩小等。由于google map是直接将一组预先准备好的大小固定的栅格图从地图服务器端下载到浏览器端,所以对地图上的具体位置无法提供更多的信息,满足不了用户日益增长的RIA需求。
用canvas画布,结合Javascript脚本语言绘制的矢量地图可以对地图上的具体位置提供更多的描述信息,具有高度的互动性,丰富用户体验。
小区包络用来描述一个GSM基站的信号覆盖范围及服务区域,采用著名的Fortune’s Voronoi算法,可以得到描述基站包络的多边形数据。直接在浏览器端使用Javascript实现该算法,并运用得出的数据在canvas中绘制多边形包络,可以缩短响应时间。图2显示了当用户点击地图上某基站时显示的描述基站信息的标签,为了清晰起见,暂时没有增加google map底图。
3.3 增加google map底图
Canvas标签既可以用于绘制自己的图形,也可以直接载入外部图像,用作图片合成或者制作背景等。图片来源不是简单的URL路径,而是一个Javascript的Image对象引用;然后用draw Image方法将图像插入到canvas中。
Google公司于2005年发布了用于二次开发的开放式地图服务应用程序接口Google Maps API,至今已经发展到第3版。基于Google Maps API,通过Javascript语言将功能强大的Google地图服务潜入到自己的Web GIS中。Google Maps API是基于AJAX的地图应用,所以更新数据无需刷新页面,用户可以获得与桌面软件相似的使用体验[6]。
图3是增加了google map底图的Web地理信息系统,结合了基站信息矢量图层和Google map栅格图层,提供了大量基站相关信息,具有高度的互动性,大大缩短了用户操作响应时间,收到了很好的用户体验效果。
4 结束语
本文运用HTML5 canvas新技术构建了GSM基站地理信息系统,在Web GIS客户端进行地理信息的展示和交互。将矢量图层和栅格图层有效地结合起来,通过与用户交互,提供大量地理信息,同时有效地缩短了浏览器响应时间,改进了用户体验。
摘要：Canvas是HTML5引入的新技术之一,它可以被Javascript用来进行图形图像的渲染和矢量绘图操作。从提供静态页面到能动态地处理多媒体信息是Web应用的发展趋势,运用HTML5canvas新技术构建了GSM基站地理信息系统,在WebGIS客户端进行地理信息的展示和交互,有效地缩短了浏览器响应时间,改进了用户体验。
关键词：HTML5,canvas,WebGIS,基站
参考文献
[1]房体盈.基于JavaScript技术的WebGIS设计与实现[D].大连理工大学,2008.
[2]吴磊,张福庆.基于HTML canvas的WebGIS客户端技术研究[J].地理信息世界,2009,7(3):78-82.
[3]栾绍鹏,朱长青.Ajax在WebGIS中的应用研究[J].测绘科学,2007,32(5):158-160.
[4]Tobias Sauerwein.Evaluation of HTML5 for its Use in the WebMapping Client OpenLayers[D].Kaiserslautern University of Ap-plied Sciences,2010.
[5]Maged N Kamel Boulos,Jeffrey Warren,Jianya Gong,Peng Yue.Web GIS in practice VIII:HTML5 and the canvas element for inter-active online mapping[J].International Journal of Health Geograph-ics,2010,9:Art.No.14.
HTML5在数字电视中的应用研究 第5篇
HTML (Hyper Text Markup Language) 即超文本标记语言, 是一套能够说明文字、图形、动画链接等的标签, 是用来描述网页的一种语言。HTML5是HTML的下一个主要修订版本, HTML5添加了一些新的标签, 这些元素的添加使得网页添加和处理多媒体内容更加容易, 从而把浏览器从一些专用插件的需求中解放出来。虽然HTML5一直在不断的发展, 但是一些标准还存在这较大的争议, 如何利用现有的成果开发一些用于数字电视系统上的应用是我们要解决的问题。
随着机顶盒硬件性能的提升及浏览器对HTML5的支持, 使得在数字电视系统上应用HTML5成为可能, 这不但简化了软件的开发, 而且由于HTML5的一些特性使在数字电视中增加一些新的应用更加容易。数字电视的发展需要HTML5的支持, 这不但体现在HTML5拥有多样表现形式, 还体现在其对多媒体内容天然的支持, 极大的简化了开发流程。
1 HTML5的新特性与数字电视
1.1 HTML5发展状况
2010年9月, W3C组织正式向公众推荐的HTML5是网页开发的最新版HTML语言。目前, 最新的标准是2014年4月发布的29号推荐标准, 至2022年将会推出HTML5的计划推荐版。HTML5的新版本中包含了大量的新特性, 总体来说是关于图像、存储、位置和速度的改进和优化。这些特性对多媒体应用、游戏开发、离线缓存及移动应用等带来了极大的便利。由于本文是关于HTML5在数字电视中的应用, 所以只关注一些与多媒体应用有关的特性。
随着IE+Flash方式的衰落, HTML5在跨平台开发方面的优势被凸显出来, HTML5可以不依托插件直接呈现多种形式的内容。谷歌、You Tube等互联网公司已经把HTML5设置为默认支持的格式。HTML5可以支持广告内容直接嵌入网页, 使得广告的推送在互联网电视上和互联网上一样的简单。因此, 更多的、更容易被用户接受的广告形式营运而生。
1.2 HTML5对多媒体的支持
直到现在, 仍然不存在一项旨在网页上显示视频的标准, 大多数视频是通过插件 (比如Flash) 来显示的。然而, 并非所有浏览器都拥有同样的插件, 尤其在数字电视机顶盒中, 受限于机顶盒硬件配置和操作系统, 几乎都不支持安装第三方插件。HTML5的一大特点就是不借助任何插件就可以播放音视频文件, 而是通过增加<audio>、<video>标签来在网页中嵌入音视频播放功能。HTML5把本地和网络多媒体引入到浏览器中, 所有主流浏览器都可以支持网络和本地音视频了, video可以跟CSS一起排样式了:可以用半透明的视频相互覆盖, 设置边界与背景图片, 旋转盘旋等变换, 以及其他各种精彩的变形应用目前音频支持MP3、AAC、Ogg Vorbis和Web M这四种格式, 音频则支持Ogg Theora、MPEG4、H.264和Web M四种格式。
随着OTT的蓬勃发展, 互联网上已经有越来越多的资源可以被广电使用, 尤其是支持HTML5的流媒体资源异常丰富, 这就为在数字电视系统中使用HTML5媒体元素提供了足够的活力。以直播、点播方式展现互联网视频。在视频页中, 视频源不再局限于从HFC网络中的直播和点播源, 将互联网视频流植入<video>标签中, 再通过传统的遥控器操控方式实现视频的切换, 这种方式将使用户能够享受直播、点播、OTT点播的方便进入, 而不必再像之前需要切换页面, 甚至切换机顶盒。通过<video>引入多种视频源, 将突破传统广电的运营模式, 也能够非常快捷的引入第三方视频内容和服务, 而不必再费力进行平台、网络、设备的重新规划、对接和整合, 从而能够将更多的精力放在运营层面。HTML5为音频的播放提供了一套新的标准, 在这之前, 要想在页面中播放一段音频, 比较通用的做法是写一个fl ash音频播放器, 并提供一套接口, 以便在各个浏览器中都兼容;或者直接写<embed>标签, 但这就需要相关插件的支持。受限于数字电视机顶盒中间件和硬件配置, 通常无法灵活实现, 只能依赖于中间件自带的播放器。而现在, 我们只需要在HTML页面中嵌入一段<audio>标签, 就能在大多数数字电视机顶盒浏览器下播放音频了。
到目前为止, 想要在网页上画图不是一件简单的事情, 即使是简单的几何图形也很难实现。在浏览器中用户与图片的交互操作也很少基本上只有保存和点击, 如果希望跟图片有更多的操作或在浏览器中画图就需要安装fl ash或sliverlight之类的插件。在HTML5中增加了<canvas>标签来在网页上绘制图像、图表及动画, HTML5还可以通过<canvas>标签获得与用户的交互性。通过HTML5对图形图像的这一新特性, 开发人员就可以在用户毫不知情的情况下生成用户鼠标移动及点击的轨迹, 生成热点图帮助开发人员改进网页的布局。
1.3 Web Socket技术
Web应用的信息交互一般是用户通过浏览器发出请求, 服务器端收到请求后对其进行处理并响应请求, 客户端收到响应后在浏览器上进行呈现。这种方式在信息变化不是很频繁的时候尚且可以接受, 但是对一些实时性要求比较高的应用就难以应对。因此, 我们需要一种高效的双向通信机制来保证数据的实效性, 在Web Socket之前一般采取的方式是简单轮询、长轮询或采用一些第三方插件, 这些这些方式都这种传统的模式带来很明显的缺点, 即浏览器需要不断的向服务器发出请求, 然而HTTP request的header是非常长的, 里面包含的数据可能只是一个很小的值, 这样会占用很多的带宽和服务器资源。
2 HTML5在数字电视中的应用
2.1 系统架构
系统又前端系统、终端系统及网络设备组成。其中前端系统包括:WEB应用子系统、直播系统、互动平台子系统、第三方应用子系统以及互联网应用子系统;终端系统为用户数字电视机顶盒;网络设备包含:HFC网络设备和IP网络设备。系统架构图如图1所示。
前端系统包括5大子系统:直播系统提供传统直播业务;互动子系统提供互动数字电视业务;第三方应用子系统提供增值业务和内容;互联网应用子系统提供互联网内容的聚合与缓存;WEB应用子系统为各业务和服务提供导航、呈现, 是整个系统的入口和门面。
WEB子系统模型如图2所示。
WEB应用子系统采用Master-Worker并行模型, 系统结构如图2所示, 其中Worker用于实际处理一个任务, Master用于任务的分配和最终结合的生成, 产生多个Worker来处理连接, 适应多核系统的扩展。一个核心对应一个Worker可以充分利用多核架构, 并且阻止了线程竞争和锁死。在单线程的Worker进程下不会产生资源匮乏, 并且资源控制机制是独立的。该模型还允许在物理存储设备上有更多的扩展性, 得到更多的磁盘利用率, 避免的磁盘I/O阻塞。其结果是, 服务器的资源能够被在共享工作平台上的多个Worker更有效的利用。
2.2 动态EPG
电子节目菜单 (EPG, Electronic Program Guide) 是数字电视的基本业务之一, 也是在线视听新媒体业务的重要标志, 是观众进入媒体内容消费的门户。用户可以通过EPG搜索到自己喜欢的节目, 服务提供商通过EPG引导用户观看节目、投放广告。在传统的数字电视中EPG的获取是通过解析TS流中的NIT (网络信息表) 、BAT (业务群关联表) 、SDT (业务描述表) 等节目提供商下发的节目列表和播出参数, 这种方式效率低, 无法给用户带来交互式的体验。OTT的蓬勃发展, 给基于HTML的EPG开发带来了可能, 而HTML5对矢量图及多媒体的支持给用户带来的全新的体验。而且为了服务多屏, EPG系统的架构和技术组成需采用能够兼容各种设备的方式, 更够适应各种终端, HTML5为这种方式提供了可能。
HTML5对数字电视最直接影响在于其对EPG带来了全新的体验在各级展示EPG中, 大量采用HTML5技术中的Canva (画布) 和可缩放矢量图形 (SVG, Scalable Vector Graphics) 、CSS3技术, 将为数字电视用户带来完全不一样的震撼视觉体验。只需要少量的代码就可以实现动态、立体的效果, 甚至交互式的绘图功能, 为网页游戏提供了更好的通用性和可维护性。甚至可以在用户不知情的情况下获取用户的点播数据, 为向用户推荐内容提供支持。
2.3 语音遥控
利用Web Socket技术, 后台服务器、用户机顶盒及手机建立了一条双向通信的通道, 用户通过在手机端语音输入指令 (如“上”、“下”等) 通过语音识别软件翻译成文字并发送到服务器, 服务器将语音指令映射成机顶盒遥控器对应的按键值, 然后服务器通过Web Socket通道把遥控指令推送到用户机顶盒从而实现对机顶盒的音量及频道等的实时控制。
2.4 地理信息
地理定位是HTML5提供的最令人激动的特性之一, 通过地理信息的应用接口Geolocation API网页以IP或GPS等方式获取用户的地理位置信息, 包括经纬度及海拔等。在数字电视系统中, 运营商可以利用这些位置信息实现用户机顶盒移机管理, 并实现广告的本地投放及提供天气预报等应用服务, 用户可以像使用手机一样方便的获得周边的生活和娱乐设施信息。
2.5 离线存储影响新业务
目前制约Web应用的一个问题在于网络连接断开后原来的内容将会丢失, HTML5的离线存储可以很好的解决这个问题。HTML5在离线时会生产一个清单文件, 这个清单文件实质就是一系列的URL列表文件, 这些URL分别指向页面中的图片、文件、链接等相关内容。当使用离线应用时会导入这些列表文件, 浏览器会把相应的文件下载到本地, 使得这些web应用能够在脱离网络时使用, 用户离线时对文件的更改在重新链接网络后会映射到原文件, 其工作方式类似于我们使用的网盘。
3 结束语
HTML5及相关技术在电视终端上的应用, 简化了交互应用的开发和部署过程, 减少不同操作系统和终端设备开发程序带来的成本, 为用户带来更好的跨越不同终端的使用体验。HTML5平台因为是基于HTML5且与中间件剥离, 新的UI甚至于新的功能可以动态地在云端更新, 使得运营商能够快速地推出新的UI和服务。随着互联网技术在广电领域的不断渗透, 提高了系统部署的灵活性, 降低了运营成本, 给用户带来了更好的体验。
综上所述, 随着OTT的蓬勃发展, 互联网的许多技术已被广电领域使用, HTML5技术在其对流媒体等方面的支持给数字电视系统带来了新的活力, 其在国内数字电视行业的应用必将带来对于整个行业的巨大且有益的推动。
参考文献
[1]W3C.HTML5.A vocabulary and associated APIs for HTML and XHTML[EB/OL].2014-5-4.http//www.w3.org/TR/html5.
[2]维基百科[EB/OL].[2014-4-29].http://zh.wikipedia.org/wiki/Web Socket.
HTML5安全研究 第6篇
关键词：HTML5,移动互联网,Web应用
1 HTML5技术概述
1.1 HTML简介
H T M L 5技术的出现是为了取代H T M L 4.0 1和XHTML1.1网络标准, 确保其能够符合现代网络的发展需要, 在2008年1月22日第一份HTML5正式草案发布。广义上的HTML5是由很多技术组成的, HTML在互联网中的使用能够提供更多能够增强网络应用的标准机。
同以往的HTML4.01相比HTML5增加了更多的语法特征并且能够集成了SVG内容。这些内容主要是为在网页中能够以更加简便的方式添加和处理多媒体和图片内容。除此之外, HTML5中还增添了一些其他新的元素, 包括<section><article>等, 并对一些原有的元素进行删除和修改, 重新进行了定义和标准化工作。在2012年的第四季度, HTML5被作为W3C的“候选推荐规范”正式发布, 这表明其在技术上已经是稳定版本, 并在2014年的第四季度定稿。
1.2 HTML5的新特性
(1) 本地存储。一是Web storage。采用的是离线缓存, 并且能够在缓存完成之后提供一个清单文件, 这个清单文件的本是URL列表文件。二是Indexed DB。Indexed DB是HTML5进行数据存储的一种方式, 能够存储比较复杂的数据。
(2) 一是Geolocation API, 这样移动的Web应用能够更加灵活的使用移动智能终端上的GPS, Wi-Fi定位方式, 准确地获取位置;二是Device Orientation API, 这一API能够使Web访问终端上的陀螺仪, 准确地获取方向和一定数据, 在Geolocation API的配合下, 能够丰富地图和导航等应用;Media Capture API, HTML通过这一API能够提供对移动终端摄像头可编程访问。
(3) 图像绘制与渲染。Canvas, Canvas应用程序的变口有数十个实现Web绘图功能的方法。Web开发者可以利用Web GL提供的技术方案在网页上显示3D物体形象, 其图像性能可以直接使用终端设备的图形处理器能力。这两项技术能够使Web应用可以在不借助其他插件的前提下, 实现出色的绘图以及渲染能力。
(4) 多媒体播放。多媒体播放主要是在HTML5当中, 通过增加的<audio><video>标签, 这样就在Web当中嵌入了音视频播放功能。
(5) Web通信能力。Web Socket基于浏览器生成原生的Sochet, 这样在确保进行全双工通信的基础上, 实现了Web的实时通信。Web Notification提供了一种能够跨越沙盒的API, 即使在浏览器后台运行, 也能够确保用户接收Web应用通知。
(6) 脚本运行效率。HTML5提出了线程概念, 使用Web Worker能够对Web进行多线程支持。使用Web Worker可以确保能够完成长时间的运行, 并且其内耗以及启动性能都比较理想。Web Worker能够运行开发者在后台进行长时间运算, 并且页面也能够对用户进行及时的相应。
2 移动互联网概述
2.1 移动互联网概述
移动互联网指的是以移动智能终端作为载体, 通过无线电通信货物资源和服务的网络模式。通过对移动互联网的概念进行分析, 可以发现其是由软件、应用和终端3部分组成的。其中软件指的是智能操作系统、中间件和数据库等组成部分;应用包括了工具、交友等内容, 智能终端包括现代智能手机等可以携带的移动设备。移动互联网的生态系统是由消费者的消费能力、市场成熟度、市场规模以及市场的有序度组成的。因此, 在移动互联网发展中, 网络速度、存储以及网络中的设备是推动移动互联网发展的关键性力量。
2.2 移动互联网的特点
(1) 用户基数大。在2015全球范围之内手机用户高达71亿之多, 根据工信部发布的数据, 截止到2015年12月, 中国手机用户已经达到了13.05亿, 每100人拥有手机95.5部。并且随着智能手机生产的增长, 以及伴随着移动网速加快和云存储技术发展的不断成熟, 这一数量还在不断增加。
(2) 应用的并发度高。移动互联网因为其越来越快捷的网速而受到人们的普遍关注, 因此在进行移动互联网络开发时, 要充分考虑到并发高和响应快的特点, 在移动互联网面对很多用户的访问时, 这对移动互联网络提出了更高的要求。
(3) 软件更新时间比较短。移动互联网的用户分布在世界不同的角落中, 因此, 一旦对移动互联网有了新的想法之后, 就必须尽快地进行更新, 以占领更加广阔的市场。传统的软件在进行开发的过程中开发周期基本上是以年或者以月为单位, 但是移动互联网的更新却是以天或者是周作为开发周期的。
2.3 移动互联网的兼容性比较好
由于移动互联网软件采用的是免费开源的代码, 这使其具有操作类型多、版本多等特点, 因此, 这也使移动互联网具有很强的通用性和兼容性。
2.4 安全性高
安全和信用体系是移动互联网的基石。在传统的网络当中, 网络操作人员与私人空间之间还存在一定的距离, 因此, 在传统网络中安全问题并不是很突出。而移动互联网络则能够利用GPS等技术对用户的生活进行关联, 因此, 在移动互联网络发展的过程中, 如果缺乏安全的信用体系, 则所有的内容都是不可靠的。对于一个免费的系统, 一旦安全以及信用体系被污染, 那么结果是很危险的。
3 HTML5在移动互联网中的应用模式分析
3.1 Web App
Web App技术是以Web技术为基础的, 虽然其在使用的过程中依然需要浏览器进行解析, 但是其网页的界面以及直接操作方式是与手机屏幕相适应的, 并且Web App通过利用HTML5的Application Cache的诸多特点, 能够确保用户获得和本地应用一致的使用体验。随着技术发展的不断成熟, 目前在一些浏览器中已经能够实现对其地址栏、状态栏等带有明显的浏览器特点的界面元素进行隐藏, 如此就能够使Web App和本地应用相比并没有明显的区别。Web App一方面能够给应用的开发工作者提供一种新的应用模式, 同时还能够改变智能移动终端和浏览器的设计。
3.2 Hybrid App
(1) 分布渠道。Web App和Native App的分布渠道存在着十分明显的不同。当前, 各个大平台中的供应商可以通过App Store以及App Market控制Native App的分发;而HTML则是能够利用Web的规则—连接分发, 一般情况下是社交平台或者是搜索引擎。
(2) 盈利模式。在盈利方面, Native和Web App的方式存在很大的差异。Native App主要是通过平台付费的方式使其应用货币化, 从其客户的角度上进行分析, 采用这种方式是十分便捷的, 即使Native App需要将其中一部分费用分配给下载平台。Web App与其有着很大的不同, Web App主要是通过广告获取利益。
(3) 功能。通过上文的分析, 虽然Web在一定程度上已经有了一些本地应用的特点, 但是, 从实际应用来看, 其还无法像Native一样具备如此之多的功能。
(4) 发布自由。对Web App和App Store进行对比可以发现, App Store是一个相对“有限制”的环境, 没有完全展现出Web的自由性。针对存在差异, 一些开发工作者在具体选择Web App还是选择本地应用时往往举棋不定, 由此, 出现了一种混合的应用, 也就是Hybrid App。Hybrid App在具体应用时会以一种本地应用形态呈现, 但是其内部都是依靠Web技术实现的, 并且Web技术所无法实现的一些功能能够通过本地的App进行完成。这种应用在使用的过程中, 具备一定的跨平台的能力, 同时也能够通过Native App的发布渠道盈利。当前, 这种方案在很多开发框架当中都得到了应用。混合的App能够综合利用两种技术的优点, 这也表明越来越多的资源正在朝着HTML5进行转变。随着HTML技术的快速发展, 将来这种经过封装的App将不再需要套上Native的外壳。
3.3 Web应用商店
在互联网产业链当中, 应用商店是其重要的构成。而Web App在应用发布、收费模式以及版本更新等方面和本地应用都是不同的, 这也促使未来商店必然在形态上发生变化。随着HTML5技术的不断发展成熟, 这将会极大地促使Web App的商店的出现。并且这种商店也是一种新的Web网页的使用形式, 并且其主要优势体现在以下几个方面:
首先, 其能够对更多的平台进行覆盖, 并且企发部群体也更加广泛;其次, 在不需要安装的前提下就能保持最新的版本;再次, 在不需要对使用版本开发的同时, 就能够进行试用;最后, 更容易植入广告。
4 结语
当前, HTML5在互联网中应用的日益广泛, 能够是Web应用本土化, 这对传统的网络中以App为主的格局造成影响, 并且HTML5在互联网中的应用使原本界面明显的操作系统和浏览器之间的差别变得模糊。随着现代科学技术的不断发展, HTML5技术应用的不断成熟, HTML5新的使用方式也在不断出现, 这也促使了新的商业快速形成和发展。
参考文献
[1]任金波.HTML5在移动互联网中的应用[J].电脑与电信, 2012 (12) :38-39.
[2]刘国红.HTML5在移动互联网开发中的应用[J].科技广场, 2014 (4) :59-62.
[3]李正, 张欣宇, 冯一帆.HTML5技术在移动互联网中的应用[J].信息通信技术, 2014 (5) :71-75.
HTML5安全研究 第7篇
首先来看一下HTML5和HTML4在网站前台制作中的区别。在HTML5中，书写代码时，不需要像HTML4那样进行声明<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，而是直接声明<!DOCTYPE html>即可。
HTML5和HTML4在网站前台制作中的第二个区别是，在HTML4中，大多数视频都是通过插件（比如Flash）来显示的，但并不是所有的浏览器都有相同的插件，这就会导致视频有可能不能正确播放。而HTML5则规定了一种通过video元素来包含视频的标准方法。目前，video元素支持以下三种视频格式：Ogg,MPEG4,WebM。如果要在HTML5中显示视频，需要加入的代码如下：<video src="movie.ogg"controls="controls"></video>。所以在HTML5中，只要加入上面的代码，不需要插件即可。
在HTML5中，<canvas>标签的使用，大大提高了网页的性能，比如，使用该标签，可以进行绘制图形、合成图像、字体设计、制作简单或者复杂的动画效果。<canvas>是一个新的标签，在HTML4是没有的。
除了<canvas>标签之外，HTML5还新增了许多标签，比如<header>和<footer>标签。由于HTML5的一个设计原则是更好的体现网站的语义性，所以增加了<header>和<footer>标签，用来明确表示网页的结构。在制作和开发网站的时候，不需要像在HTML4中那样使用<div>标记了。与<header>和<footer>相类似，以下两个标签也是在HTML5中新增加的——<section>和<article>，这两个标签也有利于体现网站的语义性和结构性，更利于SEO。
下面通过两个图示来看一下HTML4和HTML5在网站前台制作方面的结构性代码差别。图1指的是在HTML4中的两列布局结构，是通过<div>将相应内容进行添加，在此基础上设置各种样式表来实现相应的效果。而图2中，HTML5则通过新增加的标签，直接来实现页面内容。
通过图2可以看到，使用HTML5已经摈弃了<div>标签，而是使用语义性更强的相关标签来代替。这样对程序编写者来说，书写代码会更加方便。
对于图2所示的页面而言，其对应的程序代码如下：
综上所述，HTML4和HTML5在网站前台的制作过程中存在着很大区别，包括结构性代码上的区别，以及新旧标签的区别，总体说来，HTML5比HTML4更加人性化，功能也更强大，但是HMTL5最终占领统治地位还需要一定的时间，我们期待着HTML5在网站前台中的应用越来越广泛。
参考文献
[1]龚丽.HTML5中的Canvas绘图研究[J].软件导刊,2014(4):152.
[2]明日科技.HTML5从入门到精通[M].北京:清华大学出版社,2012.
[3]唐俊开.HTML5技术与移动出版[M].北京:电子工业出版社,2013.
