HTML5的安全与防御基础介绍

web前端
0 135
馒头
馒头 2020-12-13 09:43:24
普通会员
大家都知道什么是HTML,那么HTML5呢?5是因为它是HTML第五次重大修改,所以命名为HTML5。

作为HTML的升级版,它有更大的技术集,引入了新的标签、属性、方法和功能等,允许更多样化和强大的网站和应用程序。

比如说新增了section、article、nav,header等标签,再比如说新增了现在比较流行的SVG的支持,还有比如新增了Web Storage本地存储等等,而主流的浏览器都已支持这些新出现的功能和特性。


HTML5安全问题一般都伴随着功能出现,所以HTML5的出现自然而然伴随着一些功能被利用或者扩大了原来的攻击方法的攻击面或者攻击点。由于HTML5是Web标准,所以一些问题主要是集中在前端安全,那么今天我们就大概跟大家做个介绍。


首先,新标签、属性的出现,对于前端攻击中基于标签、属性的一些攻击方法,比如XSS,等于多了一些新的黑名单绕过方式。怎么解释这个问题呢?这里其实就涉及到了WAF,也就是Web防火墙,针对XSS这类攻击,会进行拦截,那么它的原理是什么呢?最简单的方式就是特征识别,如XSS Payload∶假如WAF对这种常见的无用的HTML标签加入了黑名单,一旦触发就行拦截,那么我们就可以利用HTML的新标签,比如∶<video><source onerror="alert(1)">利用video标签,如果WAF没有及时更新对这些HTML5标签的处理,那么就可以进行绕过。当然,我们这里举例是标签或者说元素,实际攻击场景,根据具体的XSS攻击点,我们也可以使用一些HTML5里出现的新属性,比如onformchange,当表单改变时触发事件,在注入点是表单结构的情况下来触发XSS。


还有一些新功能的引入带来的新的攻击,比如CORS、Web Storage、WebSQL等带来的攻击。首先我们来说说,CORS,CORS全称是GrossOrigin Resources Sharing,中文也就是跨源资源共享。对于不同源的站点,不允许进行跨域资源访问,比如a站点想访问b站点的内容,这是不允许的,但是在真正的Web开发中,这种场景有是存在的,如JSONP,CORS 的出现就是为了让AJAX可以实现可控的跨域访问而生的。CORS主要是通过对被请求资源站点设置Access-Control-Allow-Origin的响应头来实现的,

也就是比如a站点需要通过ajax方式访问b站点的资源,比如页面HTML内容,那么就可以对b站点的HTTP响应设置Access-Control-Allow-Origin∶ a地址 这样来允许a站点的访问。


那么还是那个道理,带来便捷的同时往往伴随安全问题。对于开发者来说,通常不大喜欢通过白名单的形式去使用这些安全策略,因为意味着一旦新增一个网站又得修改策略,所以一般会采用通配符,就不如CORS,会设置为AccessControl-Allow-Origin∶*允许所有来源的请求,那么就意味着同源策略完全失效,就会导致一些攻击产生或者信息泄露等。


这类问题的防御其实也相对比较简单,比如对于跨域请求应该验证身份,验证数据有效性等,确实是正常用户的跨域请求,再进行对应处理。还有比如Web Storage,开发者可以为应用创建本地存储,存储一些有用的信息。例如LocalStorage可以长期存储,而且存放空间很大,一般是5M,极大的解决了之前只能用Cookie来存储数据的容量小、存取不便、容易被清除的问题。由于是浏览器本地存储,那么意味着一旦重要、敏感数据采用这种存储方式,而其API都是通过JavaScript提供的,这样攻击者可以通过XSS攻击窃取信息,例如用户token或者资料。这里主要应该避免存储敏感数据,还有就是把对应的数据放在不同域里,比如会话ID应该存储在sessionStorage,相对于localStorage,sessionStorage会在浏览器窗口或者标签页关

闭后删除。而WebSQL,主要Html5引入的本地数据库和查询,那么就会跟传统的SQL一样,比如存在一些注入的问题,跟localStorage一样一旦存储敏感数据可能存在敏感数据泄露的问题等;那么对应的一些防御之道也是类似,比如过滤关键词等。除了这些新特性外,同时还有一些新的API的引入,可以实现一些新的攻击方法。

回帖
回复列表