[web安全] HTML5安全

HTML5 中的新特性（部分）：
1用于绘画的 canvas 元素
2用于媒介回放的 video 和 audio 元素
3对本地离线存储的更好的支持
4新的特殊内容元素，比如 article、footer、header、nav、section
5新的表单控件，比如 calendar、date、time、email、url、search

一、新标签的XSS

HTML5中新增的<video>标签，这个标签可以在网页中远程加载一段视频。与<video>标签类似的还有<audio>标签，用于远程加载一段音频。

<video src="http://tinyvid.tv/file/29d6g90a204il.ogg"onloadedmetadata="alert(document.cookie);" ondurationchanged="alert(/xss2/);"ontimeupdate="alert(/xss1/);" tabindex="0"></video>

二、iframe的sandbox
在HTML5中，专门为iframe定义了一个新的属性，叫sandbox。使用sandbox这一个属性后，<iframe>标签加载的内容将被视为一个独立的“源”，其中的脚本将被禁止执行，表单被禁止提交，插件被禁止加载，指向其他浏览对象的链接也会被禁止。
sandbox属性可以通过参数来支持更精确的控制。有以下几个值可以选择：
allow-same-origin:允许同源访问
allow-top-navigation:允许访问顶层窗口
allow-forms:允许提交表单
allow-scirpts:允许执行脚本

<iframe sandbox="allow-same-origin allow-forms allow-scirpts" src="http://maps.example.com/embedded.html"></iframe>

三、Link Types:noreferer
在HTML5中为<a>标签和<area>标签定义了一个新的Link Types：noreferer。
标签指定了noreferer后，浏览器在请求该标签指定的地址时将不再发送Referer。

<a href="xxx" rel="noreferrer" >test</a>

四、Canvas
HTML5中新添加了<canvas>标签，不同于<img>标签只是远程加载一个图片，<canvas>让JavaScript可以在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域。
可以用来自动破解验证码。

五、Cross-Origin Resource Sharing

在HTML5中指定了一个新的标准来解决日益迫切的跨域访问问题。这个新的标准叙述如下：

假设从http://www.a.com/test.html发起一个跨域的XMLHttpRequest请求，请求的地址为：http://www.b.com/test.php

<script>  var client = new XMLHttpRequest();  client.open("GET","http://www.b.com/test.php");  client.onreadystatechange = function() {}  client.send(null);</script>

如果服务器www.b.com返回一个HTTP Header

Access-Control-Allow-Origin: http://www.a.com

代码如下：

<?phpheader("Access-Control-Allow-Origin: *");?>Cross Domain Request Test!

那么这个来自http://www.a.com/test.html的跨域请求就会被通过。在这个过程中，http://www.a.com/test.html发起的请求还必须带上一个Origin Header：

Origin: http://www.a.com

origin header用于标记HTTP发起的“源”，服务器端通过识别浏览器自动带上的这个Origin Header，来判断浏览器的请求是否来自一个合法的“源”。Origin Header 可以用于防范CSRF，它不像Referer那么容易被伪造或清空。在上面的例子中，服务器端返回：Access-Control-Allow-Origin:*,从而允许客户端的跨域请求通过。

六、postMessage：跨窗口传递消息
在HTML5中，为了丰富Web开发者的能力，制定了一个新的API：postMessage。postMessage允许每一个window（包括当前窗口、弹出窗口、iframes等）对象往其他的窗口发送文本消息，从而实现跨窗口的消息传递。这个功能是不受同源策略限制的。
在使用postMessage()时，有两个安全问题需要注意。
(1)在必要时，可以在接收窗口验证Domian，甚至验证URL，以防止来自非法页面的消息。这实际上是在代码中实现一次同源策略的验证过程。
(2)在本例中，接收的消息写入textContent，但在实际应用中，如果将消息写入innerHtml，甚至直接写入script中，则可能会导致DOM based XSS的产生。在接受窗口不应该信任接收到的消息，而需要对信息进行安全检查。

七、Web Storage
W3C委员会希望能在客户端有一个较为强大和方便的本地存储功能，这就是Web Storage。
Web Storage分为Session Storage和Local Storage。Session Storage关闭浏览器就会失效，而Local Storage则会一直存在。
Web Storage就像一个非关系型数据库，由Key-Value对组成，可以通过JavaScript对其进行操作。使用方法如下：
设置一个值：window.sessionStorage.setItem(key,value);
读取一个值：window.sessionStorage.getItem(key);
Web Storage为XSS Payload打开方便之门。攻击者有可能将恶意代码保存在Web Storage中，从而实现跨页面攻击。