2.5 HTML5技术

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为可识别的信息。

HTML5在HTML4.01的基础上进行了一定的改进，HTML5将Web带入一个成熟的应用平台，在这个平台上，对视频、音频、图像、动画，以及与设备的交互都进行了规范。

1.XSS攻击

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

（1）<video>

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

（2）iframe的sandbox

在HTML5中，专门为iframe定义了一个新的属性sandbox。

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

sandbox属性可以通过参数来进行更精确的控制，有以下几个值可供选择。

● allow-same-origin：允许同源访问。

● allow-top-navigation：允许访问顶层窗口。

● allow-forms：允许提交表单。

● allow-scripts：允许执行脚本。

实例：

（3）Link Type:noreferrer

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

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

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

2.其他安全问题

常见的其他安全问题包括跨域资源共享、跨窗口传递消息和Web Storage。

（1）跨域资源共享（Cross-Origin Resource Sharing，CORS）

W3C委员会决定制定一个新的标准来解决日益迫切的跨域访问问题。但是CORS如果设置有错，就会带来安全隐患。如果设置如下：

表示允许客户端的跨域请求通过。在这里使用了通配符“*”，这是极其危险的，它将允许来自任意域的开放请求成功访问。正确的做法是配置允许访问的列表白名单。

（2）跨窗口传递消息（postMessage）

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

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

● 必要时可以在接收窗口验证Domain，甚至验证URL，以防止来自非法页面的消息。这实际是在代码中实现一次同源策略的验证过程。

● 接收的消息写入textContent，但在实际应用中，如果将消息写入innerHTML，甚至直接写入Script中，则可能会导致DOM based XSS的产生。根据“secure by default”原则，在接收窗口不应该信任接收到的消息，而需要对消息进行安全检查。

（3）Web Storage

在过去的浏览器中能够存储信息的方法有以下几种。

● Cookie：主要用于保存登录信息和少量信息。

● Flash Shared Object和IE UserData：这两个是Adobe与微软自己的功能，并未成为一个通用化的标准。

● Web Storage：在客户端有一个较为强大和方便的本地存储功能。Web Storage分为Session Storage和Local Storage，前者关闭浏览器就会消失，后者则会一直存在。Web Storage就像一个非关系型数据库，由key-value对组成，可以通过JavaScript(JS)对其进行操作。

Web Storage的使用方法如下。

1）设置一个值：window.sessionStorage.setItem(key,value);。

2）读取一个值：window.sessionStorage.getItem(key);。

Web Storage也受到同源策略的约束，每个域所拥有的信息只会保存在自己的域下。

Web Storage的强大功能也为XSS Payload打开方便之门，攻击者有可能将恶意代码保存在Web Storage中，从而实现跨页面攻击。所以程序员在使用Web Storage时，一定不能在其中保存认证、用户隐私等敏感信息。