开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情
一、简介
众所周知，HTML5是W3C制定的新一代HTML语言标准。HTML5的一些新功能，也带来了一些安全挑战。
接下来我们要去讲解一些标签和攻击。
二、HTML5 新标签
2.1 新标签的XSS
HTML5 定义了一些新标签，新事件，这些可能带来新的XSS攻击。
之前我们在讲述XSS攻击时，使用的是script标签
<script>alert(0)</script>
HTML5添加了音视频的标签，而这些标签又有一些有趣的属性，例如poster、autofocus、onerror、formaction、oninput，这些属性都可以用来执行javascript。这会导致XSS攻击。
例如：
<video src="https:xxxxxx" onloadedmetadata="alert(document.cookie)" ontimeupdate="alert('XSS攻击')"></video>
2.2 iframe的sandbox
iframe标签一直以来为人诟病。一些XSS、clickJacking等攻击中都能看到它的身影。
HTML5为iframe元素增加了sandbox属性，防止不信任的Web页面执行某些操作，例如访问父页面的DOM、执行脚本、访问本地存储或者本地数据库等等。
sandbox可以通过参数来支持更精准的控制。有下面的几个值可以选择
- ""：应用以下所有的限制。
- allow-same-origin：允许 iframe 内容被视为与包含文档有相同的来源。
- allow-top-navigation ： 允许 iframe 内容从包含文档导航（加载）内容。
- allow-forms：允许表单提交。
- allow-scripts：允许脚本执行。
sandbox是专门为iframe而定制的一个属性，现在对浏览器兼容来说不能完美兼容。但只是一个简单的代码在写的时候建议加入’sandbox’。还是起到一定的安全作用的。
但是这个安全策略又会带来另外的风险，例如ClickJacking攻击里阻止JavaScript脚本的运行来绕过JavaScript的防御方式。
2.3 Link Types:noreferrer
在HTML5中为<a>标签和<area>标签定义了一个新的Link Types:noreferrer。即标签指定noreferrer后，浏览器在请求该标签指定地址时不添加Referer。通过Referer，可能会泄露一些敏感信息。
<a href="xxx" ref="noreferrer">test</a>
2.4 Canvas的使用
Canvas可以说是HTML5中最大的创新之一。Canvas标签让Javascript可以在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域。
通过Canvas自动破解验证码，最大的好处时可以在浏览器环境中实现在线破解，大大降低了攻击的门槛。
三、其他安全问题
3.1 CORS
浏览器实现的同源策略限制了脚本的跨域请求。但互联网趋势是越来越开放的，因此跨域访问的需求也越来越迫切。
CORS主要是通过对被请求资源站点设置 Access–Control-Allow-Origin 的响应头来实现的，也就是比如：
a.com 需要通过ajax方式访问b.com 的资源，那么就可以对b.com 的HTTP 响应设置
Access–Control-Allow-Origin：http://a.com
这样来允许a.com
带来便捷的同时往往伴随着安全问题。对于开发者来说，通常不喜欢通过白名单的形式去使用这些安全策略。因为意味着一旦新增一个网站又得修改策略，所以一般采用通配符，即Access–Control-Allow-Origin：*，允许所有来源的请求。这就意味着同源策略的失效，导致一些攻击或者信息泄露。
这类问题的防御其实也相对比较简单，比如对于跨域请求应该验证身份，验证数据有效性等，确实是正常用户的跨域请求，再进行对应处理。
3.2 postMessage----跨窗口传递信息
我们之前提到，利用window.name来跨窗口、跨域传递信息。实际上，window这个对象几乎不受同源策略的限制的，很多脚本攻击都巧妙的利用了window对象这一特点。
postMessage允许每一个window（包括当前窗口、弹出窗口、iframe等）对象往其他的窗口发送文本信息，从而实现跨窗口的消息传递。这个功能是不受同源策略限制的。
在使用postMessage时，有两个安全问题需要注意
- 必要时，可以接收窗口验证Domain，甚至验证URL,以防止来自非法页面的消息
- 如果将消息写入innerHTML,甚至直接写入script中，则可能会导致XSS攻击的产生。所以在接收敞口不应该信任接收到消息，而需要对消息进行安全检查
3.4 Web Storage
开发者可以为应用创建本地存储，存储一些有用的信息。例如LocalStorage可以长期存储，而且存放空间很大，一般是5M，极大的解决了之前只能用Cookie来存储数据的容量小、存取不便、容易被清除的问题。由于是浏览器本地存储，那么意味着一旦重要、敏感数据采用这种存储方式，而其API都是通过JavaScript提供的，这样攻击者可以通过XSS攻击窃取信息，例如用户token或者资料。
这里主要应该避免存储敏感数据，还有就是把对应的数据放在不同域里，比如会话ID应该存储在sessionStorage，相对于localStorage，sessionStorage会在浏览器窗口或者标签页关闭后删除。
四、总结
HTML5 是互联网的大势所趋。我们要谨慎关注其中的安全隐患问题。健壮我们自己的网站。
