阅读 173

常见前端安全问题及解决方案

1.XSS

XSS全称(Cross Site Scripting)跨站脚本攻击,是前端最常见的安全问题。XSS是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中,攻击者通过注入非法的html标签或者javascript代码,从而当用户浏览该网页时,控制用户浏览器。

类别

1. DOM型xss

利用DOM本身存在的缺陷进行攻击。
如下代码,页面中某个图片获取路径。其中,返回的{{img.src}}='/xxx' onerror='/xxx',img标签就变成了<img src="/xxx" onerror=xxx">。src肯定会加载失败,然后会执行onerror中注入的恶意代码,达到攻击效果。

<img src="{{img.src}}">
复制代码

2. 反射型xss

反射型XSS也被称为非持久性XSS,是现在最容易出现的一种XSS漏洞。XSS代码出现在URL中,通过引诱用户点击一个链接到目标网站的恶意链接来实施攻击。
如下恶意链接,其中,xxx是恶意代码。传到服务器的参数data,被服务器接收之后,响应的页面包含data这个变量的,会将恶意代码注入到页面上面,进行攻击。

http://www.abc.com?data=xxx
复制代码

3. 存储型xss

存储型XSS又被称为持久性XSS,它是最危险的一种跨站脚本,相比反射型XSS和DOM型XSS具有更高的隐蔽性,所以危害更大,它不需要用户手动触发。
当攻击者提交一段XSS代码后,被服务器端接收并存储,当所有浏览者访问某个页面时都会被XSS,其中最典型的例子就是留言板。

解决方案

1.过滤。

对用户的输入进行过滤,通过将<> '' ""等字符进行转义,移除用户输入的Style节点、Script节点、Iframe节点。

function filterXss(str){
    var s = "";
    if(str.length == 0) return "";
    s = str.replace(/&/g,"&amp;");
    s = s.replace(/</g,"&lt;");
    s = s.replace(/>/g,"&gt;");
    s = s.replace(/ /g,"&nbsp;");
    s = s.replace(/\'/g,"&#39;");
    s = s.replace(/\"/g,"&quot;");
    return s; 
}
复制代码

2.编码

根据输出数据所在的上下文来进行相应的编码。数据放置于HTML元素中,需进行HTML编码,放置于URL中,需要进行URL编码。此外,还有JavaScript编码、CSS编码、HTML属性编码、JSON编码等等。

3.httpOnly

在cookie中设置HttpOnly属性,使js脚本无法读取到cookie信息。

2.CSRF

CSRF全称(Cross-Site Request Forgeries)跨站请求伪造。指攻击者冒充用户发起请求(在用户不知情的情况下),完成一些违背用户意愿的事情。攻击过程如下图所示:

解决方案

1.使用token

服务器产生一个token存到session中,同时将token发送给客户端,客户端提交表单时带上该token,服务器验证token与session是否一致,一致就允许访问,否则拒绝访问。

2.Referer 验证

Referer 指的是页面请求来源,意思是,只接受本站的请求,服务器才做响应;如果不是,就拦截。

3.使用验证码

对于重要请求,要求用户输入验证码,强制用户必须与应用进行交互,才能完成最终请求。

3.点击劫持

点击劫持就是将一个危险网站设置透明,然后在其上方设置一个按钮,当你点击这个按钮的时候,就会触发底部恶意网站的某些事件。

解决方案

1.设置http响应头 X-Frame-Options

X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在<frame>, <iframe>或者 <object> 中展现的标记。网站可以使用此功能,来确保自己网站的内容没有被嵌到别人的网站中去。

2.使用CSP(Content Security Policy)内容安全策略

4.不安全的第三方依赖

现如今进行应用开发,无论是后端服务器应用还是前端应用开发,绝大多数时候我们都是在借助开发框架和各种类库进行快速开发。然而,一些第三方的依赖或者插件存在很多安全性问题,也会存在这样那样的漏洞,所以使用起来得谨慎。

解决方案

1.尽量减少第三方依赖,选用相对成熟的依赖包。

2.使用自动化工具检查这些第三方代码有没有安全问题,比如NSP(Node Security Platform),Snyk等等。

5.本地存储数据泄露

很多开发者为了方便,把一些个人信息不经加密直接存到本地或者cookie,这样是非常不安全的,黑客们可以很容易就拿到用户的信息。

解决方案

1.不在本地存储重要数据

敏感、机密信息不要存储在本地。

2.加密

所有在放到cookie中的信息或者localStorage里的信息要进行加密,加密可以自己定义一些加密方法或者网上寻找一些加密的插件,或者用base64进行多次加密然后再多次解码。

关注下面的标签,发现更多相似文章
评论