作者：Lachlan Hunt
译者：zhaozy in 3user.com
概要
|络是不断的q化? 新的和有创意的网站每天都在出? 从各斚w都在冲击着HTML的边? HTML 4来到我们w边已经差不多有10q了, 发行者们不断的寻求提供更强大的功能的新技? 但是怼因ؓ标记语言和浏览器的约束而\途坎?
Zl作者们提供更灵z? 更具互操作? 能有更多交互性ƈ令h振奋的网站和应用E序, HTML 5 引入q加Z一pd功能, 包括表单控制, 应用E序接口(APIs), 多媒? l构化和语义?
HTML 5的工? 开始于2004q? ?W3C HTML WG ?WHATWG 的共同努力下现在正在全面贯彻落实. 很多关键角色参与了W3C的努? 最具代表性的?大浏览器厂商: Apple, Mozilla, Opera, Microsoft; q有一pd的有着不同利益和专业技术的其他机构以及个h.
~写详细规范的工作还在进行中, d成还有很长的路要? 同样? 在这文章中讨论的功能不排除在未来有所改动的可? q篇文章只是以大U的形式介绍一些在当前的草案中的主要的Ҏ?
l构
HTML 5 引入了一整套全新的元素来让构建页面变得更加简? 大多数基于HTML 4的页面的包含多种常用l构, 比如说页?header), 脚(footer)和纵?column). 现阶D|们通常会用div元素标记q些区块, 然后为它们定义一个描q性的id或是class.
图表说明一个典型的用div元素带上id和class属性标记的2栏布局. 其中包括首(header)和页?footer), 在页首下面是一个水q_航条, M内容又包含了文章(article)和它双的侧Ҏ(sidebar).
大量的用div元素是因为目前的HTML 4版本~少更明的语义描述q些区块所? HTML 5 Z表现q些不同的区块而引入了新的元素.
那些div元素可以被新的元素代替了: header, nav, section, article, aside以及footer.
<header>
</header><nav>
</nav><article>
<section>
</section>
</article>
<aside>
</aside><footer>
</footer></body>
用这些新元素会有一些优?相对于HTML 4). 当和标题元素(h1 - h6)一同用时, 可以标记出嵌套的章节标题层次, 越之前版本的HTML仅有的六个层? 规范中包含了一份生成大U的详细法. 把结构化q些内容U_考虑范围, q仍旧向后兼容先前的版本. q样可以在编辑工具以及浏览器中生成目录来帮助用户来浏览这个文?
举例说明, 下面的标记结构用了嵌套的章节和h1元素构成:
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
q里要注? Z更好的兼容现在的览? 它也能在适当的位|利用其它的标题元素(h2 - h6)来代替h1元素.
通过辨别面中的章节使用Ҏ章节元素的确切目? 辅助的技术能帮助用户更容易的览q个面. 举例, 他们能不费力的略q导航区块或者能快速的从一文章直接蟩C一而不需要作者提供蟩转链? 对于创作者来? 在文中L多余的div, 而用一些更明显的元素代替它? 会让源代码更清楚而且更容易书?
header元素表示一个区块的头部, "头部" 可能包含不只是区块的标题, 比如头部包含了副标题, 历史版本信息或是|名都是合理?
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>
footer元素表示用上它的那个区块的脚? 一个具代表性的 "脚部" 包括了这个区块的一些信? 比如谁写了它, 链接到相关的文, 版权信息{等.
nav元素表示一个导航链接的区块. 它同旉用于站点导航和目录.
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
aside元素Z存放和主要内Ҏ有太大关pȝ内容, 是典型的标记提要内容Ҏ.
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>
section元素表示了一份文或是一个应用程序一般意义上的区? 比方说章?
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
</p></section>
(引用?/span><A Tale of Two Cites>)
article元素表示一份文? 站点的页面中独立的区? 它适用于类似新? blog文章, 论坛帖子或者个人注释这L内容.
<header>
<h4>
<a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="http://example.com/">Jack O'Niell</a>
</h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p>
</header>
<p>That's another great article!</p>
</article>
视频和音?/strong>
在最q几q? |络上的视频和音频日益增? 像是youtube, Viddler, Revver, MySpace, q有其他很多可以让Q何一个h更容易的发布视频和音频的|站. 然? 因ؓ当前的HTML~少必要的方法顺利的插入q控制多媒体, 很多|站都依赖Flash来提供这L功能. 管可能可以用各U各L插g (像是QuickTime, Windows Media{等) 嵌入多媒? 但是Flash是当前唯一被广泛应用的, 提供了开发者们所渴望的跨览器兼容解x案的插g.
对于各种ZFlash的媒体播攑֙, 创作者们Ҏ供他们自q用户定制设计的界? 那一般都允许用户控制播放, 暂停, 停止, 查找或调整音? 为浏览器提供插入视频和音频ƈ提供DOM接口让Script控制播放的功能要通过安装本地E序支持.
视频和音频的新元素让q个工作变得更加? q两者之间的大部分API都是׃n? 唯一区别关pd可视和不可视媒体之间的固有区?
Opera和Webkit已经攑և了一个部分支持视频元素的版本, 你可以到 experimental build of Opera ( http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/ ) 或者最新的 nightly build of WebKit ( http://nightly.webkit.org/ ) M载ƈ试验一下这些示? Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒体格? 包括W三方的解码?
插入视频最单的Ҏ是用video元素, 它会允许览器提供一个默认的用户界面, 其中controls属性是一个boolean值属? q个属性是让创作者决定用L面是否要昄(默认是不昄).
<a href="video.ogv">Download movie</a>
</video>
可选择的poster属性可以指定在视频播放前用来显C的囑փ. 管有一些视频格式有它们Ҏ的预览图格式, 像是MPEG-4, 它提供了一个可以不依赖于视频格式的可选择Ҏ.
用audio元素在页面内插入音频文g也非常容? audio和video元素的大部分属性都是共用的, 但非常显而易见的, audio元素没有width, height以及poster属?
<a href="music.oga">Download song</a>
</audio>
HMTL 5 提供了source 元素, 让浏览器Ҏ媒体cd或编码器的支持来指定视频或音频文? media属性会Ҏ讑֤的局限性和被指定的媒体的类型和~码器来指定一个媒体选择查询. 当在使用 source 元素? 上元素( video或audio )的src属性需要省略掉, 不然 source 元素中的src属性会被忽略掉.
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
Z那些需要给用户界面更多一Ҏ制来W合面的总设计的创作者以方便, q泛的API提供了一些方法和事g让scripts来控制媒体文? 最单的Ҏ是?play(), pause(), 然后可以通过讄 currentTime 来进行@? 接下ȝ例子会解释怎么?
<script>
var video = document.getElementById("video");
</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"><< Rewind</button>
q有很多q里没有讨论到的属性以及API可以被用到视频音频元? 如果想知道更? 你可以参?current draft specification (http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video).
文l承?/strong>
不像先前版本?HTML ?XHTMLҎ它们的语法来定义, HTML 5 是根据文档对象模?DOM)来定义的 - 览器中用来描述文档的的l承型树l构. 例如, 构成一个由 名称(title), 标题(heading) 和段?paragraph) 的文? 那么, q个DOM 树可能看h是这L:
q个DOM树包? head中的title元素, body中的h1和p元素.
ҎDOM定义的HTML 5的优Ҏq种语言可以不依赖于它自q语法. 有两个主要的语法用来表现HTML文: HTML的序列和XML的序?.
HTML 序列从HTMLE早版本的SGML语法中得到灵感而引入的一U语? 但是却定义成更适合览器在真实环境下处理HTML的方?
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.
</body>
</html>
你会注意? q看h很像是前个版本的HTML, 有些标签会自动闭?
XML 序列引入了XML 1.0的语法和命名I间, 像?XHTML 1.0.
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>
除了间隔和xmls属? q两个例子几乎是相同?
览器通过使用MIMEcd来区别两? Mtext/html形式的文档必ȝ?HTML 序列, MMIMEcd是XML的文?像是 application/xhtml+xml 必须W合XML 序列.
创作者可能要Ҏ需要哪些功能来军_使用哪种序列. 没有使用它们的强制性的条g, 他们在不同情形下都可能是最优方?
用HTML的好?/strong>
* 向后兼容现有的浏览器
* 创作者已l非常熟悉语?br />
* 宽容和仁慈的语法, 不会因为无意中的一个错误而对M对用h不友好的 "Yellow Screen of Death".
* 语法相当Ҏ记忆, 举例? 创作者可以省略掉一些标{或是属性?
用XHTML的好?/strong>
* 严格的XML语法鼓励创作者书写完整的标签, 有些用户会发现这hҎl护.
* 能直接的和其它XML词表l合, 比如 SVG ?MathML.
* 允许使用XML的处理过E? 有些创作者把q个q程作ؓ他们~辑和发布过E的一部分.
如何贡献
HTML 5的工作进展很? 但是׃要出C测试用例ƈ实现互操作? 它预期还会持l数q? 目前要完成的工作可能?0?5q的旉. 在这个过E中, 从各式各L人都会有反馈, 在他们中? web设计师和开发? CMS和编辑工L厂商和浏览器的厂商是保成功的关? M人都不只是欢q? 更积极的是鼓׃ؓHTML 5提供反馈.
除了规范之外, q有更多相关的努力来帮助Z更好地理解这个工?
The Differences from HTML 4 (http://www.w3.org/html/wg/html5/diff/) 描述了和前一版本的HTML的不?
The HTML Design Principles (http://www.w3.org/TR/html-design-principles/) 讨论一些原理来帮助作出军_, q也会帮助你了解在众多的设计l果背后的原?
The Web Developer’s Guide to HTML 5 (http://dev.w3.org/html5/html-author/) q是最q才开始做? q是Z帮助web设计师和开发者理解要书写W合规范的HTML 5的文所需要知道的一? q且提供了指? 也提供了描述得相当完整的试验.
你可以在很多的方面做A? 你可以加?W3C’s HTML WG , 订阅和A?HTML WG邮g列表, 或者完善它(wiki). 你也可以订阅或A献其他的 WHATWG邮g列表, 在WHATWG 论坛发表文章, 在WHATWG 博客上留a或写文章.
]]>
原文地址 http://bolm.cn/blog/?p=86 作?nbsp;bolm
Web2.0是描q新一代网l应用的新鲜术语。Start.com,Google maps,Writely以及MySpace.com都是使用Web2.0的典型。技术水q的不断q步Q推动了Web2.0应用的发展。在|络服务斚wQ它加强了服务端的核心技术组Ӟ而在客户端方面，AJAX和丰富网l应?RIA)则改q了览器中的客L用户接口?/p>
XML语言对表C层和传输层(HTTP/HTTPS)有巨大的影响。SOAP成ؓZXML的传输机制的特别选择后，从某U程度上_XML在表C层上取代了HTML语言?/p>
Web2.0x点——重整行?/strong>
技术变革带来了新的安全x点和新的d向量。Yamanner,Samy以及Spaceflashq些典型蠕虫正在d包含保密信息的AJAX架构的客LQ它们提供攻击途径?/p>
在服务器端，ZXML的网l服务正在取代一部分的关键功能。它提供可通过|络服务接口来访问的分布式应用。用户可以从览器端q程Ȁzd?GET,POST或者SOAP的方法，q项能力l各U应用带来新的缺陗另一斚wQ用XML,XUL,Flash,Applets?JAVAScripts的RIA框架增加了更多可用的d向量。RIA,AJAX以及|络服务l网l应用安全增加了新的l度?/p>
下面列D10个攻?
1.AJAX中的跨站点脚?/p>
前几个月Qh们发C多种跨站点的脚本d。在此类d中，受害者的包含信息的浏览器上会q行来自特定|站的恶意JAVA脚本代码?Yamanner蠕虫是一个最q的范例Q它利用Yahoo邮g的AJAX调用中的跨站点脚本机会来d受害者。另一个近期的范例是Samy蠕虫Q它利用MySpace.com的跨站点脚本漏洞来攻凅RAJAX在客L上运行，它允讔R误书写的脚本被攻击者利用。攻击者能够编写恶意链接来哄骗那些没有准备的用P让他们用览器去讉K特定的网c传l应用中也存在这LqQ但AJAXl它d了更多可能的漏洞?/p>
2.XML中毒
很多Web2.0应用中，XML传输在服务器和浏览器之间往复。网l应用接收来自AJAX客户端的XML块。这XML块很可能染毒。多ơ将递归负蝲应用C出相似的XML节点,q样的技术还q不普遍。如果机器的处理能力较弱Q这导致服务器拒绝服务。很多攻击者还制作l构错误的XML文Q这些文会Cؕ服务器上所使用的依赖剖析机制的逻辑。服务器端的剖析机制有两U类型，它们是SAX和DOM。网l服务也使用相同的攻d量，q是因ؓ|络服务接收SOAP消息Q而SOAP是XML消息。在应用层大范围C用XMLs使攻击者有更多的机会利用这个新的攻d量?/p>
XML外部实体参照是能被攻击者伪造的一个XML的属性。这会d者能够利用h意的文g或者TCPq接的缺陗XML schema中毒是另一个XML中毒的攻d量，它能够改变执行的程。这个漏z能帮助d者获得机密信息?/p>
3.恶意AJAX代码的执?/p>
AJAX调用非常不易察觉Q终端用h法确定浏览器是否正在用XMLHTTPh对象发出无记载的调用。浏览器发出AJAX调用lQ意网站的时候，该网站会Ҏ个请求回应以cookies。这导致出现泄漏的潜在可能性。例如，U翰已经登陆了他的银行，q且通过了服务器认证。完成认证过E后Q他会得C个会?cookie。银行的面中包含了很多关键信息。现在，他去览器他|页Qƈ同时仍然保持银行账户的登陆状态。他可能会刚好访问一个攻击者的|页Q在q个|页上攻击者写了不易被察觉的AJAX 代码Q这个代码不用经q约的同意Q就能够发出后台调用l约的银行|页Q因而能够从银行面取得关键信息q且把这些信息发送到d者的|站。这导致机密信息的泄漏甚至引发安全H破?/p>
4.RSS/Atom 注入
q是一Ҏ的web2.0d。RSS反馈是h们在门户|站或者网l应用中׃n信息的常用手Dc网l应用接受这些反馈然后发送给客户端的览器。h们可以在该RSS反馈中插入文本的JavaScript来生对用户览器的d。访问特定网站的l端用户加蝲了带有该RSS反馈的网，q个脚本׃q行h——它能够往用户的电脑中安装软g或者窃取cookies信息。这是一个致命的客户端攻凅R更p糕的是Q它可以变异。随着RSS和ATOM 反馈成ؓ|络应用中整合的lgQ在服务器端数据发布给l端用户之前Q过滤特定字W是非常必要的?/p>
5.WSDL扫描和enumeration
WSDL(|络服务界定语言)是网l服务的一个接口。该文g提供了技术，开放方法，创新形式{等的关键信息。这是非常敏感信息，而且能够帮助Z军_利用什么弱Ҏd。如果将不必要的功能或者方法一直开着Q这会ؓ|络服务造成潜在的灾难。保护WSDL文g或者限定对其的讉K是非帔R要的。在实际情况中，很有可能扑ֈ一些用WSDL扫描的一些漏z?/p>
6.AJAX常规E序中客L的确?/p>
Zweb2.0的应用用AJAX常规E序来在客户端上q行很多操作Q比如客L数据cd的确认，内容查，数据域等{。正常情况下Q服务端也应该备份这些客L查信息。大部分开发者都没有q么?他们q样做的理由是，他们假设q样的确认是由AJAX常规E序来负责的。避开ZAJAX的确认和直接发送POST或者GEThl那些应用——这些应用是诸如SQL注入,LDAP注入{类随确认进入的d主要来源Q它们能够攻ȝl应用的关键资源——都是可以做到的。这都增加了能够为攻击者所利用的潜在攻d量的数量?/p>
7.|络服务路由问题
|络服务安全协议包括WS-Routing服务。WS-Routing允许SOAP消息在互联网上各U各样不同的节点中的特别序列中传输。通常加密的信息在q些节点来回传送。交互的节点中的L一个被d都将致d者能够访问到在两个端点之间传输的SOAP消息。这造成SOAP消息的严重的安全泄漏。随着|络应用开始被|络服务框架所采用Q攻击者们开始{而利用这些新协议和新的攻d量?/p>
8.|络服务路由问题
|络服务接收信息和来自SOAP消息的变量。修改这些变量是很可能的。例如，“10”是SOAP消息中多个节点中的一个。攻击者可以修改点Qƈ且尝试不同种的注入攻几Z—比如，SQL,LDAP,XPATH,命o行解释器——ƈ且探索能被他用来掌握及其内部信息的攻d量。网l服务代码中错误的或者不够完备的输入认使网l服务应用易于发生泄?q是一个目标指向网l服务所带的|络应用的一Ҏ的攻d量?/p>
9.SOAP消息中的XPATH注入
XPATH是一U用来查询XML文档的语aQ它跟SQL语句很类?我们提供某些信息(参数)然后从数据库中得到查询结果。很多语a都支?XPATH 解析的功能。网l应用接收大型XML文Q很多时候这些应用从l端用户和XPATH语句中取得输入量。这些代码的D落对XPATH注入没有什么防御能力。如果XPATH执行成功Q攻击者能够绕q认证机制或者造成机密信息的一些损失。现在h们只知道很少部分的能够被d者利用的XPATH的漏z。阻止这个攻d量的唯一Ҏ是在给XPATH语句传递变量值的时候提供适当的输入确认?/p>
10. RIA瘦客L二进制的伪?/p>
丰富|络应用(RIA)使用非常丰富的UI要素比如Flash,ActiveX控g或者AppletsQ它使用q些要素作ؓ|络应用的基本接口。这个框架存在几个安全问题。其中最主要的一个就是关于会话管理。它是在览器中q行的，q且׃n相同的会话。同Ӟ׃客户端将下蝲整个二进制元件到自己的主机，d者就可以颠倒工E的那个二进制文件ƈ且反~译代码。把q些二进制串打包q绕q一些包含在代码中的认证逻辑是有可能实现的。这?WEB2.0框架下的另一个有的d向量?/p>
l论
AJAX,RIA以及|络服务是WEB2.0应用I间的三w要的技术向量。这些技术很有前景，它们带给桌面新的E式Q加Z|络应用的整体效率和效用。随着q些新技术而来的是新的安全问题Q忽略这些问题将会导致整个世界发生巨大的N。本文中Q我们只讨论?0U攻凅R但是实际上q有很多其他的攻d量。对q些新的d向量的最好的防MҎ是增加WEB2.0的安全意识，提高代码操作的安全性以及配|的安全?/p>