新手开车——HTML5安全
一、HTML5新标签
html5定义了很多新标签、新事件，这有可能带来新的xss攻击。
1、<video>
比如HTML5中新增的<video>标签，这个标签可以在网页中远程加载一段视频。与之类似的还有<audio>标签。
<video src="http://tinyvid.tv/file/232332.ogg" onloadedtadata="alert(document.cookie);" ondurationchanged="alert("/xss2/");" ontimedate="alert(/xss1/);" tabindex="0">
</video>
2、iframe的sandbox
在HTML5中，专门为iframe定义了一个新的属性，叫做sandbox。
使用sandbox这个属性后，<iframe>标签加载后的内容将被视为一个独立的“源”，其中的脚本将被禁止执行，表单将被禁止提交，插件被禁止加载，指向其他浏览器对象的连接也会被禁止。
sandbox属性可以通过参数来支持更精确的控制。有以下几个值可以选择：
（1）allow-same-origin:允许同源访问
（2）allow-top-navigation:允许访问顶层窗口
（3）allow-forms:允许提交表单
（4）allow-scripts:允许执行脚本
实例：
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://maps.example.com/embeded.html">
</iframe>
3、Link Type :noreferrer
在HTML5中为<a>标签和<area>标签定义了一个新的Link Type :noreferrer ，指定noreferrer后，浏览器在请求该标签指定的地址时将不再发送referer。
<a href="xxx" rel="noreferrer"> teat </a>
这种设计是出于保护敏感信息和隐私的考虑。因为referer，可能会泄露一些敏感的信息。
这个标签需要开发者手动添加到页面的标签中，对于有需求的标签可以选择使用noreferrer。
4、Canvas的妙用
这个标签可以说是HTML5中最大的创新之一。<img>标签只能是远程加载一张图片，而<canvas> 标签让Javascript可以在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域。
canvas的出现极大的挑战了传统富客户端插件的地位，开发者甚至可以用canvas在浏览器上写一个小游戏。
<canvas id="mycanvas" width="200" heigth="100" style="border:1px solid #c3c3c3">
you browser does not support the canvas element;
</canvas>
<script>
var c= document.getElementById("mycanvas");
var cxt=c.getContext("2d");
cxt.fileStyle="#FF0000";
cxt.filleRect(0,0,175,75);
</script>
canvas提供的强大的功能，甚至可以用来破解验证码。Shaun Friedle写了一个脚本，通过JS操作Canvas中的每个像素点，成功的自动化识别了验证码。
二、其他安全问题
1、Cross-Origin Resource Sharing
W3C委员会决定制定一个新的标准来解决日益迫切的跨域访问问题。这个新的标准叙述如下：
假设从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.onreadystatechang=function() { }
client.send(null);
</script>
如果是在IE8中，则需要使用XDomainRequest来跨域请求。
var request = new XDomainRequest();
request.open("GET",xdomainurl);
request.send();
如果服务器www.b.com返回一个HTTP Header:
Access-Control-Allow-Origin:http://www.a.com
代码如下：
<?php
header("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
在火狐浏览器中抓包分析(重点部分)：
请求头：
GET http://www.b.com/test.php HTTP/1.1
host: www.b.com
referer: http://www.a.com/test.html
origin: http://www.a.com
响应头：
http/1.1 200 ok
Access-Control-Allow-Origin: *
Origin Header 用于标记HTTP发起的 “源”，服务器端通过识别浏览器自动带上的这个Origin Header,来判断浏览器的请求是否来自一个合法的 “源”。Origin Header可以用于防范CSRF,
它不像Referer那么容易被伪造或清空。
上面的例子中，服务器返回：
Access-Control-Allow-Origin: *
从而允许客户端的跨域请求通过。在这里使用了通配符 “*” ，这是极其危险的，他将允许来自任意域的开宇请求访问成功。
2、postMessage——跨窗口传递消息
postMessage允许没一个window(包括当前窗口、弹出窗口、iframe等)对象网向其他的窗口发送文本消息，从而实心跨窗口的消息传递。这个功能是不受同源策略限制的。
演示一个postMessage的用法：
发送窗口：
<iframe src="http://www.dev.jquery.com/message" id="iframe"> </iframe>
<form id="form">
<input type="text" id="msg" value="message to send" />
<input type="submit" />
</form>
<script>
window.onload=function() {
var win =document.getElementById("iframe").contentWindow;
document.getElementById("form").onsubmit=function(e) {
win.postMessge(document.getElementById("msg").value);
e.preventDefault();
};
};
</script>
接受窗口：
<b>This iframe is located on dev.jquery.com </b>
<div id= "test" >send me a message ! </div>
<script>
document.addEventListener ("message",function(e) {document.getElementById("test").textContent=e.domain + " said: " +e.data;} ,false);
</script>
在这个例子中，发送窗口负责发送消息；而在接受窗口中，需要绑定一个message事件，监听其他窗口发送来的消息。这是两个窗口之间的一个 "约定" ,如果没有监听这个事件，则无法接受到消息。
在使用postMessage（）时，有两个安全问题需要注意。
（1）、在必要时，可以在接收窗口验证Domain,甚至验证URL，以防止来自非法页面的消息。这实际是在代码中实现一次同源策略的验证过程。
（2）、在本例中，接受的消息写入textContent,但在实际应用中，如果将消息写入innerHTML,甚至直接写入script中，则可能会导致DOM based XSS的产生。根据 “ secure by default”原则，
在接收窗口不应该信任接收到的消息，而需要对消息进行安全检查。
在使用postMessage，也会使XSS payload 变得更加灵活。
3、Web Storage
在过去的浏览器中能够存储信息的方法有以下几种：
cookie 主要用于保存登录信息和少量信息。
Flash Shared Object 后面这两个则是Adobe与微软自己的功能，并未成为一个通用化的标准。
IE UserData
因此出现 Web Storage 能在客户端有一个较为强大和方便的本地存储功能.
Web Storage分为Session Storage 和 Local Storage。前者关闭浏览器就会消失，后者则会一直存在。Web Storage就像一个非关系型数据库，由key-value对组成，可以通过JS对其进行操作。
使用方法如下：
（1）设置一个值：window.sessionStorage.setItem(key,value);
（2）读取一个值：window.sessionStorage.getItem(key);
Web Storage也受到同源策略的约束，每个域所拥有的信息只会保存在自己的域下，如下例子：
<script>
if( document.domain == "www.a.com")
{
window.localStorage.setItem("test",123);
}
alert(window.localStorage.getItem("test"));
</script>
当访问 http://www.a.com/test.html 就会弹出 123
当访问 http://www.b.com/test.html 弹出null 。
Web Storage 的强大功能也为XSS Payload打开方便之门。攻击者有可能将恶意代码保存在 Web Storage 中，从而实现跨页面攻击。
当Web Storage中保存有敏感信息时，也可能会成为攻击的目标，xss攻击完全可以完成这一过程。
