HTML 5 安全

HTML 5 中定义了新标签、新事件，这些改变可能超越了当前的防御方式。

HTML 5 与安全相关的新特性

iframe 的 sandbox 属性

使用 sandbox 属性后，<iframe> 标签加载的内容将被视作一个独立的“源”，其中的脚本将被禁止执行，表单被禁止提交，插件被禁止加载，指向其他浏览对象的链接也将被禁止访问。该属性有多个参数可以定制：allow-same-origin（允许同源访问）、allow-top-navigation（允许访问顶层窗口）、allow-forms（允许提交表单）、allow-scripts（允许执行脚本）。iframe 的 sandbox 属性极大地增强了使用 iframe 的安全性。

Link Types：noreferer

在 HTML 5 中为<a>和<area>标签定义了新的 Link type：noreferer，用法：<a href="xxx" rel="noreferer" > test </a>，该特性可以在访问新链接的时候阻止传递 referer，从而避免 URL 可能携带的敏感信息泄露。

Canvas 标签

有别于<img>标签只是加载一个图片，<canvas>标签让 JavaScript 可以在页面中直接操作图片对象。该特性可被利用于浏览器环境中在线破解图形验证码，大大降低了攻击的门槛（图形验证码的保护作用被攻破）。

Cross-Origin Resource Sharing

跨域访问问题，在 HTML 5 的标准中，假设从 http://www.a.com/test.html 发起一个跨域的 XMLHttpRequest，请求的地址为 http://www.b.com/test.php ：

<scritp>

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

那么来自 http://www.a.com/test.html 的跨域请求将被通过。

其中 http://www.b.com/test.php 的内容如下：

<?php

header("Access-Control-Allow-Origin: http://www.a.com");

?>

Cross Domain Request Test!

而 http://www.a.com/test.html 发起的请求必须带上 Origin: http://www.a.com

Origin Header 可以用于防御 CSRF。

postMessage —— 跨窗口传递消息

postMessage 是 HTML 5定义的一个新的 API，它允许每一个 window 对象往其他窗口发送文本消息，从而实现跨窗口的消息传递。这个功能不受同源策略的限制。

使用时应注意在接收窗口做好验证（消息来源是否为可信任的域、URL），并且在使用消息内容的时候做好安全过滤（写入 HTML：HTMLEncode；写入 script：JavaScriptEncode）。

Web Storage —— 浏览器本地存储

HTML 5 之前，浏览器在本地存储信息的方式有 Cookie，（Adobe 的）Flash Shared Object，（Microsoft 的）IE UserData。

Web Storage 是 HTML 5 定义的本地存储功能，分为 Session Storage 和 Local Storage。其中 Session Storage 在关闭浏览器的时候即失效。