HTML5安全

HTML5安全

HTML5新标签

html5出现了很多新标签，比如<video> <audio> <ifame sandbox> <a noreferer> <canvas>，下面简单介绍一下这几个标签。

<video src='xxx' onloadedmetadata='alert(\xss1\);' condurationchanged='alert(\xss2\);' ontimeupdate='alert(\xss3\);'></video>

<!--因为有的xss filter的黑名单中可能没有这些新的属性or标签，所以可能被绕过-->

 <!--不记录referer，保护用户的隐私-->
<a href='xxx' rel='noreferer'>
<area href='xxx'  rel='noreferer'>

标签<canvas>让js可以对图像进行操控；

安全问题

浏览器的同源策略限制了脚本的跨域请求，但是互联网越来越开放，对于web开发人员，必须想办法呢进行跨域传输，由此诞生了jsonp iframe等跨域技术。ajax也是允许跨域传输；

graph LR
    www.a.com:test.html--Origin-->www.b.com:test.php
    www.b.com:test.php--Access-Contorl-Allow-Origin-->www.a.com:test.html

只要来源符合头中的规定，就允许跨域请求消息；

GET http://www.b.com/test.php HTTP/1.1
Host:www.b.com
....
Origin:http://www.a.com


HTTP/1.1 200 OK
...
Access-Control-Allow-Origin: *

postMessage跨窗口传递消息，它允许每一个window向其他的窗口发送文本消息，从而实现跨域的消息传递；有安全问题需要注意：

• 接收窗口验证Domain，甚至URL，防止来自非法页面的消息
• 消息写入innerHTML或者script中，很容易导致DOM based XSS

接受窗口应该对接收到的信息进行安全检查；

WebStorage分为Session storage和Local storage，受到同源策略的约束，每个域的信息会保存在自己的域下。它也会带来更多的安全挑战。