新手开车——HTML5安全

1、HTML5新标签

　　html5定义了不少新标签、新事件，这有可能带来新的xss攻击。

　　一、<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>

　　二、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>

　　三、Link Type :noreferrer

　　　在HTML5中为<a>标签和<area>标签订义了一个新的Link Type :noreferrer ，指定noreferrer后，浏览器在请求该标签指定的地址时将再也不发送referer。

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

　　　这种设计是出于保护敏感信息和隐私的考虑。由于referer，可能会泄露一些敏感的信息。

　　　这个标签须要开发者手动添加到页面的标签中，对于有需求的标签能够选择使用noreferrer。

　　四、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中的每一个像素点，成功的自动化识别了验证码。

2、其余安全问题

　一、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:  *

　　从而容许客户端的跨域请求经过。在这里使用了通配符  “*” ，这是极其危险的，他将容许来自任意域的开宇请求访问成功。

　二、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 变得更加灵活。

三、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攻击彻底能够完成这一过程。