一、简介

众所周知，HTML5是W3C制定的新一代HTML语言标准。HTML5的一些新功能，也带来了一些安全挑战。

接下来我们要去讲解一些标签和攻击。

二、HTML5 新标签

2.1 新标签的XSS

HTML5 定义了一些新标签，新事件，这些可能带来新的XSS攻击。

之前我们在讲述XSS攻击时，使用的是script标签

HTML5添加了音视频的标签，而这些标签又有一些有趣的属性，例如poster、autofocus、onerror、formaction、oninput，这些属性都可以用来执行javascript。这会导致XSS攻击。

例如：

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，可能会泄露一些敏感信息。

2.4 Canvas的使用

Canvas可以说是HTML5中最大的创新之一。Canvas标签让Javascript可以在页面中直接操作图片对象，也可以直接操作像素，构造出图片区域。

通过Canvas自动破解验证码，最大的好处时可以在浏览器环境中实现在线破解，大大降低了攻击的门槛。

三、其他安全问题

3.1 CORS

浏览器实现的同源策略限制了脚本的跨域请求。但互联网趋势是越来越开放的，因此跨域访问的需求也越来越迫切。

CORS主要是通过对被请求资源站点设置 Access–Control-Allow-Origin 的响应头来实现的，也就是比如：

a.com 需要通过ajax方式访问b.com 的资源，那么就可以对b.com 的HTTP 响应设置

这样来允许a.com

带来便捷的同时往往伴随着安全问题。对于开发者来说，通常不喜欢通过白名单的形式去使用这些安全策略。因为意味着一旦新增一个网站又得修改策略，所以一般采用通配符，即Access–Control-Allow-Origin：*，允许所有来源的请求。这就意味着同源策略的失效，导致一些攻击或者信息泄露。

这类问题的防御其实也相对比较简单，比如对于跨域请求应该验证身份，验证数据有效性等，确实是正常用户的跨域请求，再进行对应处理。

3.2 postMessage----跨窗口传递信息

我们之前提到，利用window.name来跨窗口、跨域传递信息。实际上，window这个对象几乎不受同源策略的限制的，很多脚本攻击都巧妙的利用了window对象这一特点。

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

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

1. 必要时，可以接收窗口验证Domain，甚至验证URL,以防止来自非法页面的消息

2. 如果将消息写入innerHTML,甚至直接写入script中，则可能会导致XSS攻击的产生。所以在接收敞口不应该信任接收到消息，而需要对消息进行安全检查

3.4 Web Storage

开发者可以为应用创建本地存储，存储一些有用的信息。例如LocalStorage可以长期存储，而且存放空间很大，一般是5M，极大的解决了之前只能用Cookie来存储数据的容量小、存取不便、容易被清除的问题。由于是浏览器本地存储，那么意味着一旦重要、敏感数据采用这种存储方式，而其API都是通过Javascript提供的，这样攻击者可以通过XSS攻击窃取信息，例如用户token或者资料。

这里主要应该避免存储敏感数据，还有就是把对应的数据放在不同域里，比如会话ID应该存储在sessionStorage，相对于localStorage，sessionStorage会在浏览器窗口或者标签页关闭后删除。

四、总结

HTML5 是互联网的大势所趋。我们要谨慎关注其中的安全隐患问题。健壮我们自己的网站。

-----------------

https://juejin.cn/post/7182369062842794042