前端安全

搭建DVWA作为测试环境

DVWA可以理解成一个充满了各种web漏洞的网站，我们可以在上面进行攻击测试，从而更深刻的理解XSS以及CSRF漏洞。

DVWA

在mac环境下安装DVWA，可以参考这篇文章：Dvwa的安装，小网站的漏洞资源库
安装完成后注意修改DVWA安全性：

DVWA Security

DVWA具体使用规则，可参考文章：揭秘——黑客是如何使用xss的

XSS(cross-site scripting)

跨站脚本攻击-脚本中的不速之客

为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。
XSS的攻击有很多种方式，通常情况下，我们会对XSS攻击做如下分类

1. 反射型XSS

发请求时，XSS代码出现在URL中，提交给服务端。服务端返回的内容，也带上了这段XSS代码。最后浏览器执行XSS代码。

通常情况是攻击者找到有XSS漏洞的网站，然后构造一个连接，就像这种

http://www.hasxss.com?x=

带有攻击效果的链接
然后诱导你点击
通常他们会把链接短链一下迷惑你，就好比

http://dwz.cn/woshiduanwangzhi

PS:通常还会加上一句类似 你们看看王宝强儿子长得像谁 这种标题。

然后你点击进去就中招了。

2. 存储型XSS

存储型和反射型的区别就是，提交的XSS代码会存储在服务器端。这种XSS也是最危险的。

举个例子，我们的网站允许用户设置一段个性签名，会显示在个人主页。

然后用户签名设置为

// 而这个时候，如果用户在网址后面加上恶意代码
http://www.xss.com#alert(document.cookie)

这样就完成了攻击了。

这也是我们常说eval不安全的原因，传入eval的字符串，天知道会是什么东西，但无论是什么，它都会去执行。
1、过滤转义输入输出

用户输入的情况，通常来讲也是HTTP请求。GET请求的url参数。POST请求的body数据。

比如我们接收的数据是用户年龄，那么在后端，需要判断一下数据是否是Number，这样才能让恶意攻击者没有可乘之机。

对于一些特殊符号，我们需要对其进行转义

& --> &

< --> <

> --> >

" --> "

' --> '

/ --> /

这个一方面是后端接收这些代码时候的转义存储，一方面是前端在显示的时候，需要把它们转成html实体。

2、避免使用eval，new Function等执行字符串的方法，除非确定字符串和用户输入无关。

3、使用innerHTML，document.write的时候，如果数据是用户输入的，那么需要对关键字符都进行过滤与转义。

4、对于非客户端cookie，比如保存用户凭证的session，务必标识为http only，这样js就获取不到这个cookie值了，安全性得到提高。

对于XSS的防御，提高编码的安全意识是一方面。

还有一种方式是主动防御。也就是当发现页面有XSS攻击时候，主动上报。

至于如何检测到，目前的方式大多是对事件和脚本拦截。判断是否有恶意代码。

CSRF(cross-site request forgery)

跨站请求伪造-冒充用户之手

CSRF全称是跨站请求伪造。这么说挺模糊的，我们来具体看下例子就能明白

假设 新浪微博关注某个人的请求是

GET www.weibo.com/attention?userid=123

所以，当用户处于登录状态下，并且访问如上链接，便会关注userid为123的用户。

那么我们可以做出如下攻击。

编写一个恶意页面 www.csrf.com。然后在页面上加上一句

这时，用户只要访问了这个页面，便发起了关注的请求。并且该请求还是带上了登录cookie的，因为cookie是跟随着请求域名一起的。

上面这个例子是一个太理想的情况，又例如实际关注的请求，是一个POST请求，那应该怎么办呢？

其实这也很简单，虽然发送post请求会有跨域限制，但是我们可以使用js动态生成一个form表单。然后把地址指向上述url,最后再加上自动提交即可。

function createForm() {

  var form = document.createElement('form');

  document.body.appendChild(form);

  form.method = 'post';

  return form;

}

function createInput() {

  // 省略一些代码，创建一些input，让form使用appendChild放进去

}

var f = createForm();

// 插入一些数据

f.action = 'http://www.csrf.com';

f.submit();

CSRF的防御方式

1. 检测http referer是否是同域名，通常来讲，用户提交的请求，referer应该是来来自站内地址，所以如果发现referer中地址异常，那么很可能是遭到了CSRF攻击。

2. 避免登录的session长时间存储在客户端中。

3. 关键请求使用验证码或者token机制。在一些十分关键的操作，比如交易付款环节。这种请求中，加入验证码，可以防止被恶意用户攻击。token机制也有一定的防御作用。具体来说就是服务器每次返回客户端页面的时候，在页面中埋上一个token字段，例如

之后，客户端请求的时候带上这个token，使用这个机制后，攻击者也就很难发起CSRF攻击了。

参考文章：前端安全知多少

FE交流群群二维码.png