白帽子讲Web安全（第 6 章 HTML 5 安全 ）

第 6 章 HTML 5 安全

HTML 5 是 W3C 制定的新一代 HTML 语言的标准。

6.1 HTML 5 新标签

6.1.1 新标签的 XSS

HTML 5 定义了很多新标签、新事件，这有可能带来新的 XSS 攻击。

一些新 XSS Felter 如果建立了一个黑名单的话，则可能就不会覆盖到 HTML 5 新增的标签和功能，从而避免发生 XSS 。

HTML 5 中新增的一些标签和属性，使得 XSS 等 Web 攻击发生了新的变化，为了总结这些变化，有安全研究者建立了一个 HTML 5 Security Cheatsheet 项目：https://code.google.com/p/html5security

6.1.2 iframe 的 sandbox

标签一直以来都为人所诟病。挂马、XSS、ClickJacking 等攻击中都能看到它不光彩的身影。

在 HTML 5 中，专门为 iframe 定义了一个新的属性，叫 sandbox 。使用 sandbox 这一个属性后， 标签加载的内容将被视为一个独立的“源”，其中的脚本将被禁止执行，表单被禁止提交，插件被禁止加载，指向其他浏览器对象的链接也会被禁止。

sandbox 属性可以通过参数来支持更精确的控制。

• allow-same-origin：允许同源访问；
• allow-top-navigation：允许访问顶层窗口；
• allow-forms：允许提交表单；
• allow-scripts：允许执行脚本。

6.1.3 Link Types : noreferrer

在 HTML 5 中为 <a> 标签和 <area> 标签定义了一个新的 Link Types : noreferrer 。

顾名思义，标签指定了 noreferrer 后，浏览器在请求该标签指定的地址时将不再发送 Referer 。

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

6.1.4 Canvas 的妙用

Canvas 可以说是 HTML 5 中最大的创新之一。不同于 <img> 标签只是远程加载一个图片， <canvas> 标签让 JavaScript 可以在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域。

Canvas 提供的强大功能，甚至可以用来破解验证码。Shaun Friedle 写了一个 GreaseMonkey 的脚本，通过 JavaScript 操作 Canvas 中的每个像素点，成功的自动化识别了 Megauplod 提供的验证码。

6.2 其他安全问题

6.2.1 Cross-Origin Resource Sharing

浏览器实现的同源策略（ Same Origin Policy ）限制了脚本的跨域请求。但互联网的发展趋势是越来越开放的，因此跨域访问的需求也变得越来越迫切。同源策略给 Web 开发者带来了很多困扰，他们不得不想方设法的实现一些“合法”
的跨域技术，由此诞生了 jsonp、iframe 跨域等技巧。

W3C 委员会决定制定一个新的标准来解决日益迫切的跨域访问问题。

Origin Header 用来标记 HTTP 发起的“源”，服务器端通过识别浏览器自动带上的这个 Origin Header ，来判断浏览器的请求是否来自一个合法的“源”。Origin Header 可以用于防范 CSRF ，它不像 Referer 那么容易被伪造或清空。

Access-Control-Allow-Origin: * 

6.2.2 postMessage----跨窗口传递消息

postMessage 允许每一个 window （包括当前窗口、弹出窗口、iframe 等）对象往其他的窗口发送文本消息，从而实现跨窗口的消息传递。这个功能是不受同源策略限制的。

在使用 postMessage() 时，有两个安全问题需要注意。

1. 在必要时，可以在接收窗口验证 Domain，甚至验证 URL，以防止来自非法页面的消息。这实际上是在代码中实现一次同源策略的验证过程。
2. 接受的消息写入 textContent，但在实际应用中，如果将消息写入 innerHTML ，甚至直接写入 script 中，则可能会导致 DOM based XSS 的产生。根据“ Secure By Default ” 原则，在接受窗口不应该信任接收到的消息，而需要对消息进行安全检查。

6.2.3 Web Storage

为什么要有 Web Storage 呢？过去在浏览器里能够存储信息的方法有以下几种：

• Cookie
• Flash Shared Object
• IE UserData

其中，Cookie 主要用于保存登录凭证和少量信息，其最大长度的限制决定了不可能在 Cookie 中存储太多信息。而 Flash Shared Object 和 IE UserData 则是 Adobe 与微软自己的功能，并未成为一个通用化的标准。因此 W3C 委员会希望能在客户端有一个较为强大和方便的本地存储功能，这就是 Web Storage。

Web Storage 分为 Session Storage 和 Local Storage。Session Storage 关闭浏览器就会失效，而 Local Storage 则会一直存在。Web Storage 就像一个非关系型数据库，由 Key-Value 组成，可以通过 JavaScript 对其进行操作。

Web Storage 让 Web 开发更加的灵活多变，它的强大功能也为 XSS Payload 大开方便之门。攻击者有可能将恶意代码保存在 Web Storage 中，从而实现跨页面攻击。

当 Web Storage 中保存有敏感信息时，也可能会成为攻击的目标，而 XSS 攻击可以完成这一过程。