BlogJava-时间-文章分类-Web 2.0http://www.blogjava.net/lvq810/category/31964.html世间最可贵的就是“今”，最易丧失得也是“今”。因为它最容易丧失，所以更觉得它宝贵。zh-cnThu, 02 Jul 2009 05:13:55 GMTThu, 02 Jul 2009 05:13:55 GMT60[转]HTML 5 预览http://www.blogjava.net/lvq810/articles/285044.htmllvq810lvq810Wed, 01 Jul 2009 16:07:00 GMThttp://www.blogjava.net/lvq810/articles/285044.html原文：http://www.alistapart.com/articles/previewofhtml5
作者：Lachlan Hunt
译者：zhaozy in 3user.com

概要

网络是不断的进化的. 新的和有创意的网站每天都在出现, 从各方面都在冲击着HTML的边界. HTML 4来到我们身边已经差不多有10年了, 发行者们不断的寻求提供更强大的功能的新技术, 但是常会因为标记语言和浏览器的约束而路途坎坷.

为了给作者们提供更灵活, 更具互操作性, 能有更多交互性并令人振奋的网站和应用程序, HTML 5 引入并加强了一系列功能, 包括表单控制, 应用程序接口(APIs), 多媒体, 结构化和语义化.

HTML 5的工作, 开始于2004年, 在 W3C HTML WG 和 WHATWG 的共同努力下现在正在全面贯彻落实. 很多关键角色参与了W3C的努力, 最具代表性的是4大浏览器厂商: Apple, Mozilla, Opera, Microsoft; 还有一系列的有着不同利益和专业技术的其他机构以及个人.

编写详细规范的工作还在进行中, 离完成还有很长的路要走. 同样的, 在这篇文章中讨论的功能不排除在未来有所改动的可能. 这篇文章只是以大纲的形式介绍一些在当前的草案中的主要的特性.

结构

HTML 5 引入了一整套全新的元素来让构建页面变得更加简单. 大多数基于HTML 4的页面的包含多种常用结构, 比如说页首(header), 页脚(footer)和纵列(column). 现阶段我们通常会用div元素标记这些区块, 然后为它们定义一个描述性的id或是class.

图表说明一个典型的用div元素带上id和class属性标记的2栏布局. 其中包括页首(header)和页脚(footer), 在页首下面是一个水平导航条, 主体内容又包含了文章(article)和它右边的侧边栏(sidebar).

大量的使用div元素是因为目前的HTML 4版本缺少更明确的语义描述这些区块所致. HTML 5 为了表现这些不同的区块而引入了新的元素.

那些div元素可以被新的元素代替了: header, nav, section, article, aside以及footer.

<body>
  <header></header>
  <nav></nav>
  <article>
   <section>
   
   </section>
  </article>
  <aside></aside>
  <footer></footer>
</body>

用这些新元素会有一些优势(相对于HTML 4). 当和标题元素(h1 - h6)一同使用时, 可以标记出嵌套的章节标题层次, 超越之前版本的HTML仅有的六个层次. 规范中包含了一份生成大纲的详细算法. 把结构化这些内容纳入考虑范围, 并仍旧向后兼容先前的版本. 这样可以在编辑工具以及浏览器中生成目录来帮助用户来浏览这个文档.

举例说明, 下面的标记结构使用了嵌套的章节和h1元素构成:

<section>
  <h1>Level 1</h1>
  <section>
   <h1>Level 2</h1>
   <section>
    <h1>Level 3</h1>
   </section>
  </section>
</section>

这里要注意, 为了更好的兼容现在的浏览器, 它也能在适当的位置利用其它的标题元素(h2 - h6)来代替h1元素.

通过辨别页面中的章节使用特殊章节元素的确切目的, 辅助的技术能帮助用户更容易的浏览这个页面. 举例, 他们能不费力的略过导航区块或者能快速的从一篇文章直接跳到下一篇而不需要作者提供跳转链接. 对于创作者来说, 在文档中去掉多余的div, 而用一些更明显的元素代替它们, 会让源代码更清楚而且更容易书写.

header元素表示一个区块的头部, "头部" 可能包含不只是区块的标题, 比如头部包含了副标题, 历史版本信息或是署名都是合理的.

<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元素表示用上它的那个区块的脚部, 一个具代表性的 "脚部" 包括了这个区块的一些信息, 比如谁写了它, 链接到相关的文档, 版权信息等等.

<footer>&copy; 2007 Example Inc.</footer>

nav元素表示一个导航链接的区块. 它同时适用于站点导航和目录.

<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元素为了存放和主要内容没有太大关系的内容, 是典型的标记提要内容方法.

<aside>
  <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元素表示了一份文档或是一个应用程序一般意义上的区块, 比方说章节.

<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>
(引用自<A Tale of Two Cites>)

article元素表示一份文档, 站点的页面中独立的区块. 它适用于类似新闻, blog文章, 论坛帖子或者个人注释这样的内容.

<article id="comment-2">
  <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>

视频和音频

在最近几年, 网络上的视频和音频日益增多, 像是youtube, Viddler, Revver, MySpace, 还有其他很多可以让任何一个人更容易的发布视频和音频的网站. 然而, 因为当前的HTML缺少必要的方法顺利的插入并控制多媒体, 很多网站都依赖Flash来提供这样的功能. 尽管可能可以用各种各样的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒体, 但是Flash是当前唯一被广泛应用的, 提供了开发者们所渴望的跨浏览器兼容解决方案的插件.

对于各种基于Flash的媒体播放器, 创作者们对提供他们自己的用户定制设计的界面, 那一般都允许用户控制播放, 暂停, 停止, 查找或调整音量. 为浏览器提供插入视频和音频并提供DOM接口让Script控制播放的功能要通过安装本地程序支持.

视频和音频的新元素让这个工作变得更加简单. 这两者之间的大部分API都是共享的, 唯一区别就关系到可视和不可视媒体之间的固有区别.

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/ ) 去下载并试验一下这些示例. Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒体格式, 包括第三方的解码器.

插入视频最简单的方法是使用video元素, 它会允许浏览器提供一个默认的用户界面, 其中controls属性是一个boolean值属性, 这个属性是让创作者决定用户界面是否要显示(默认是不显示).

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
  <a href="video.ogv">Download movie</a>
</video>

可选择的poster属性可以指定在视频播放前用来显示的图像. 尽管有一些视频格式有它们特有的预览图格式, 就像是MPEG-4, 它提供了一个可以不依赖于视频格式的可选择方案.

用audio元素在页面内插入音频文件也非常容易. audio和video元素的大部分属性都是共用的, 但非常显而易见的, audio元素没有width, height以及poster属性.

<audio src="music.oga" controls>
  <a href="music.oga">Download song</a>
</audio>

HMTL 5 提供了source 元素, 让浏览器根据媒体类型或编码器的支持来指定视频或音频文件. media属性会根据设备的局限性和被指定的媒体的类型和编码器来指定一个媒体选择查询.  当在使用 source 元素时, 上级元素( video或audio )的src属性需要省略掉, 不然 source 元素中的src属性会被忽略掉.

<video poster="poster.jpg">
  <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>

为了那些需要给用户界面更多一点控制来符合页面的总设计的创作者以方便, 广泛的API提供了一些方法和事件让scripts来控制媒体文件. 最简单的方法就是用 play(), pause(), 然后可以通过设置 currentTime 来进行循环. 接下去的例子会解释怎么用.

<video src="video.ogg" id="video"></video>
<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>

还有很多这里没有讨论到的属性以及API可以被用到视频音频元素. 如果想知道更多, 你可以参考 current draft specification (http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video).

文档继承性

不像先前版本的 HTML 和 XHTML根据它们的语法来定义, HTML 5 是根据文档对象模型(DOM)来定义的 - 浏览器中用来描述文档的的继承型树结构. 例如, 构成一个由 名称(title), 标题(heading) 和段落(paragraph) 的文档, 那么, 这个DOM 树可能看起来是这样的:

这个DOM树包括: head中的title元素, body中的h1和p元素.

根据DOM定义的HTML 5的优点是这种语言可以不依赖于它自己的语法. 有两个主要的语法用来表现HTML文档: HTML的序列和XML的序列 .

HTML 序列从HTML稍早版本的SGML语法中得到灵感而引入的一种语法, 但是却定义成更适合浏览器在真实环境下处理HTML的方式.

<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
  <h1>Example</h1>
  <p>This is an example HTML document.
</body>
</html>

你会注意到, 这看起来很像是前个版本的HTML, 有些标签会自动闭合.

XML 序列引入了XML 1.0的语法和命名空间, 就像是 XHTML 1.0.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>An HTML Document</title>
</head>
<body>  
  <h1>Example</h1> 
  <p>This is an example HTML document.</p>
</body>
</html>

除了间隔和xmls属性, 这两个例子几乎是相同的.

浏览器通过使用MIME类型来区别两者, 任何text/html形式的文档必须符合 HTML 序列, 任何MIME类型是XML的文档,像是 application/xhtml+xml 必须符合XML 序列.

创作者可能要根据需要哪些功能来决定使用哪种序列. 没有使用它们的强制性的条件, 他们在不同情形下都可能是最优方案.

用HTML的好处

    * 向后兼容现有的浏览器
    * 创作者已经非常熟悉语法
    * 宽容和仁慈的语法, 将不会因为无意中的一个错误而对任何对用户有不友好的 "Yellow Screen of Death".
    * 语法相当容易记忆, 举例说: 创作者可以省略掉一些标签或是属性值.

用XHTML的好处

    * 严格的XML语法鼓励创作者书写完整的标签, 有些用户会发现这样更容易维护.
    * 能直接的和其它XML词表结合, 比如 SVG 和 MathML.
    * 允许使用XML的处理过程, 有些创作者把这个过程作为他们编辑和发布过程的一部分.

如何贡献

HTML 5的工作进展很快, 但是由于要出示测试用例并实现互操作性, 它预期还会持续数年. 目前要完成的工作可能要10到15年的时间. 在这个过程中, 从各式各样的人都会有反馈, 在他们中间, web设计师和开发者, CMS和编辑工具的厂商和浏览器的厂商是确保成功的关键. 任何人都不只是欢迎, 更积极的是鼓励为HTML 5提供反馈.

除了规范之外, 还有更多相关的努力来帮助人们更好地理解这个工作.

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/) 讨论一些原理来帮助作出决定, 这也会帮助你了解在众多的设计结果背后的原理.
The Web Developer’s Guide to HTML 5 (http://dev.w3.org/html5/html-author/) 这是最近才开始做的, 这是为了帮助web设计师和开发者理解要书写符合规范的HTML 5的文档所需要知道的一切, 并且提供了指南, 也提供了描述得相当完整的试验.

你可以在很多的方面做出贡献. 你可以加入 W3C’s HTML WG , 订阅和贡献 HTML WG邮件列表, 或者完善它(wiki). 你也可以订阅或贡献其他的 WHATWG邮件列表, 在WHATWG 论坛发表文章, 在WHATWG 博客上留言或写文章.



lvq810 2009-07-02 00:07 发表评论
]]>细数Web 2.0下的十大安全威胁[转]http://www.blogjava.net/lvq810/articles/182703.htmllvq810lvq810Thu, 28 Feb 2008 07:55:00 GMThttp://www.blogjava.net/lvq810/articles/182703.htmlhttp://www.blogjava.net/lvq810/comments/182703.htmlhttp://www.blogjava.net/lvq810/articles/182703.html#Feedback0http://www.blogjava.net/lvq810/comments/commentRss/182703.htmlhttp://www.blogjava.net/lvq810/services/trackbacks/182703.html

原文地址 http://bolm.cn/blog/?p=86      作者 bolm
      Web2.0是描述新一代网络应用的新鲜术语。Start.com,Google maps,Writely以及MySpace.com都是使用Web2.0的典型。技术水平的不断进步，推动了Web2.0应用的发展。在网络服务方面，它加强了服务端的核心技术组件，而在客户端方面，AJAX和丰富网络应用(RIA)则改进了浏览器中的客户端用户接口。

　　XML语言对表示层和传输层(HTTP/HTTPS)有巨大的影响。SOAP成为基于XML的传输机制的特别选择后，从某种程度上说，XML在表示层上取代了HTML语言。

 

　　Web2.0关注点——重整行业

　　技术变革带来了新的安全关注点和新的攻击向量。Yamanner,Samy以及Spaceflash这些典型蠕虫正在攻击包含保密信息的AJAX架构的客户端，它们提供攻击途径。

　　在服务器端，基于XML的网络服务正在取代一部分的关键功能。它提供可通过网络服务接口来访问的分布式应用。用户可以从浏览器端远程激活基于 GET,POST或者SOAP的方法，这项能力给各种应用带来新的缺陷。另一方面，使用XML,XUL,Flash,Applets和 JAVAScripts的RIA框架增加了更多可用的攻击向量。RIA,AJAX以及网络服务给网络应用安全增加了新的维度。

　　下面列举10个攻击:

　　1.AJAX中的跨站点脚本

　　前几个月，人们发现了多种跨站点的脚本攻击。在此类攻击中，受害者的包含信息的浏览器上会运行来自特定网站的恶意JAVA脚本代码。 Yamanner蠕虫就是一个最近的范例，它利用Yahoo邮件的AJAX调用中的跨站点脚本机会来攻击受害者。另一个近期的范例就是Samy蠕虫，它利用MySpace.com的跨站点脚本漏洞来攻击。AJAX在客户端上运行，它允许错误书写的脚本被攻击者利用。攻击者能够编写恶意链接来哄骗那些没有准备的用户，让他们用浏览器去访问特定的网页。传统应用中也存在这样的弱点，但AJAX给它添加了更多可能的漏洞。

　　2.XML中毒

　　很多Web2.0应用中，XML传输在服务器和浏览器之间往复。网络应用接收来自AJAX客户端的XML块。这XML块很可能染毒。多次将递归负载应用到产出相似的XML节点,这样的技术还并不普遍。如果机器的处理能力较弱，这将导致服务器拒绝服务。很多攻击者还制作结构错误的XML文档，这些文档会扰乱服务器上所使用的依赖剖析机制的逻辑。服务器端的剖析机制有两种类型，它们是SAX和DOM。网络服务也使用相同的攻击向量，这是因为网络服务接收SOAP消息，而SOAP就是XML消息。在应用层大范围地使用XMLs使攻击者有更多的机会利用这个新的攻击向量。

　　XML外部实体参照是能被攻击者伪造的一个XML的属性。这会使攻击者能够利用人意的文件或者TCP连接的缺陷。XML schema中毒是另一个XML中毒的攻击向量，它能够改变执行的流程。这个漏洞能帮助攻击者获得机密信息。

　　3.恶意AJAX代码的执行

　　AJAX调用非常不易察觉，终端用户无法确定浏览器是否正在用XMLHTTP请求对象发出无记载的调用。浏览器发出AJAX调用给任意网站的时候，该网站会对每个请求回应以cookies。这将导致出现泄漏的潜在可能性。例如，约翰已经登陆了他的银行，并且通过了服务器认证。完成认证过程后，他会得到一个会话 cookie。银行的页面中包含了很多关键信息。现在，他去浏览器他网页，并同时仍然保持银行账户的登陆状态。他可能会刚好访问一个攻击者的网页，在这个网页上攻击者写了不易被察觉的AJAX 代码，这个代码不用经过约翰的同意，就能够发出后台调用给约翰的银行网页，因而能够从银行页面取得关键信息并且把这些信息发送到攻击者的网站。这将导致机密信息的泄漏甚至引发安全突破。

　　4.RSS/Atom 注入

　　这是一项新的web2.0攻击。RSS反馈是人们在门户网站或者网络应用中共享信息的常用手段。网络应用接受这些反馈然后发送给客户端的浏览器。人们可以在该RSS反馈中插入文本的JavaScript来产生对用户浏览器的攻击。访问特定网站的终端用户加载了带有该RSS反馈的网页，这个脚本就会运行起来——它能够往用户的电脑中安装软件或者窃取cookies信息。这就是一个致命的客户端攻击。更糟糕的是，它可以变异。随着RSS和ATOM 反馈成为网络应用中整合的组件，在服务器端将数据发布给终端用户之前，过滤特定字符是非常必要的。

　　5.WSDL扫描和enumeration

　　WSDL(网络服务界定语言)是网络服务的一个接口。该文件提供了技术，开放方法，创新形式等等的关键信息。这是非常敏感信息，而且能够帮助人们决定利用什么弱点来攻击。如果将不必要的功能或者方法一直开着，这会为网络服务造成潜在的灾难。保护WSDL文件或者限定对其的访问是非常重要的。在实际情况中，很有可能找到一些使用WSDL扫描的一些漏洞。

　　6.AJAX常规程序中客户端的确认

　　基于web2.0的应用使用AJAX常规程序来在客户端上进行很多操作，比如客户端数据类型的确认，内容检查，数据域等等。正常情况下，服务端也应该备份这些客户端检查信息。大部分开发者都没有这么做;他们这样做的理由是，他们假设这样的确认是由AJAX常规程序来负责的。避开基于AJAX的确认和直接发送POST或者GET请求给那些应用——这些应用是诸如SQL注入,LDAP注入等类随确认进入的攻击主要来源，它们能够攻击网络应用的关键资源——都是可以做到的。这都增加了能够为攻击者所利用的潜在攻击向量的数量。

　　7.网络服务路由问题

　　网络服务安全协议包括WS-Routing服务。WS-Routing允许SOAP消息在互联网上各种各样不同的节点中的特别序列中传输。通常加密的信息在这些节点来回传送。交互的节点中的任意一个被攻击都将致使攻击者能够访问到在两个端点之间传输的SOAP消息。这将造成SOAP消息的严重的安全泄漏。随着网络应用开始被网络服务框架所采用，攻击者们开始转而利用这些新协议和新的攻击向量。

　　8.网络服务路由问题

　　网络服务接收信息和来自SOAP消息的变量。修改这些变量是很可能的。例如，“10”是SOAP消息中多个节点中的一个。攻击者可以修改点，并且尝试不同种的注入攻击——比如，SQL,LDAP,XPATH,命令行解释器——并且探索能被他用来掌握及其内部信息的攻击向量。网络服务代码中错误的或者不够完备的输入确认使网络服务应用易于发生泄漏.这是一个目标指向网络服务所带的网络应用的一项新的攻击向量。

　　9.SOAP消息中的XPATH注入

　　XPATH是一种用来查询XML文档的语言，它跟SQL语句很类似:我们提供某些信息(参数)然后从数据库中得到查询结果。很多语言都支持 XPATH 解析的功能。网络应用接收大型XML文档，很多时候这些应用从终端用户和XPATH语句中取得输入量。这些代码的段落对XPATH注入没有什么防御能力。如果XPATH执行成功，攻击者能够绕过认证机制或者造成机密信息的一些损失。现在人们只知道很少部分的能够被攻击者利用的XPATH的漏洞。阻止这个攻击向量的唯一方法就是在给XPATH语句传递变量值的时候提供适当的输入确认。

　　10. RIA瘦客户端二进制的伪造

　　丰富网络应用(RIA)使用非常丰富的UI要素比如Flash,ActiveX控件或者Applets，它使用这些要素作为网络应用的基本接口。这个框架存在几个安全问题。其中最主要的一个就是关于会话管理。它是在浏览器中运行的，并且共享相同的会话。同时，由于客户端将下载整个二进制元件到自己的主机，攻击者就可以颠倒工程的那个二进制文件并且反编译代码。把这些二进制串打包并绕过一些包含在代码中的认证逻辑是有可能实现的。这是 WEB2.0框架下的另一个有趣的攻击向量。

　　结论

　　AJAX,RIA以及网络服务是WEB2.0应用空间的三项重要的技术向量。这些技术很有前景，它们带给桌面新的程式，加强了网络应用的整体效率和效用。随着这些新技术而来的是新的安全问题，忽略这些问题将会导致整个世界发生巨大的灾难。本文中，我们只讨论了10种攻击。但是实际上还有很多其他的攻击向量。对这些新的攻击向量的最好的防御方法是增加WEB2.0的安全意识，提高代码操作的安全性以及配置的安全性

相关文章：



lvq810 2008-02-28 15:55 发表评论
]]>