前端安全之XSS和CSRF攻击的原理和解决方案

1、XSS（CRoss Site Scripting, 跨站脚本攻击）

这是前端最常见的攻击方式，很多大型网站（如Facebook）都被XSS攻击过。

举个例子，我在一个博客网站正常发表一篇文章，输入汉字、英文、和图片，完全没有问题。但是如果我写的是恶意的JS脚本，例如获取到document。cookie然后传输到自己的服务器上，那我这篇文章或者评论时，之前注入的这段JS代码就执行了。JS代码一旦执行，那可就不受控制了，因为它跟网页原有的JS有同样的权限，例如可以获取server端数据、可以获取cookie等。于是，攻击就这样发生了。

XSS的危害

XSS的危害想当大，如果页面可以随意执行别人不安全的JS代码，轻则会让页面错乱、功能缺失，重则会造成用户的信息泄露。

比如早些年社交网站经常曝出XSS蠕虫，通过发布的文章内插入JS，用户访问了感染不安全JS注入的文章，会自动重新发布新的文章，这样的文章会通过推荐系统进入每个用户的文章列表面前，很快就会造成大规模的感染。

还有利用cookie的方式，将cookie传入入侵者的服务器上，入侵者就可以模拟cookie登陆网站，对用户的信息进行篡改。

预防XSS攻击

那么如何预防XSS攻击呢？最根本最有效的方法就是对用户输入的内容进行验证和替换，这样的话即便用户恶意输入一些指令，也会被替换为其他不可执行的字符，需要替换的字符有：

1. & 替换 为: &amp;
2. < 替换为 &lt；
3. > 替换为&gt ;
4. ‘’ 替换为 &quot;
5. ’ 替换为 &#x27;
6. / 替换为 &#x2f;
   替换了这些字符之后，黑客输入的攻击代码就会失效，XSS攻击将不会轻易发生。

除此之外，还可以通过对cookie进行较强的控制，比如对敏感的cookit增加http-only限制，让JS获取不到cookie内容。

2、CSRF(Cross-site request forgery, 跨域请求伪造)

CSRF攻击攻击原理及过程如下：

1. 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
2. 在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
3. 用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
4. 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
5. 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行

防范措施

1. 对于web站点，将持久化的授权方法（例如cookie或者HTTP授权）切换为瞬时的授权方法（在每个form中提供隐藏field），这将帮助网站防止这些攻击。一种类似的方式是在form中包含秘密信息、用户指定的代号作为cookie之外的验证。
2. 另一个可选的方法是“双提交”cookie。此方法只工作于Ajax请求，但它能够作为无需改变大量form的全局修正方法。如果某个授权的cookie在form post之前正被JavaScript代码读取，那么限制跨域规则将被应用。如果服务器需要在Post请求体或者URL中包含授权cookie的请求，那么这个请求必须来自于受信任的域，因为其它域是不能从信任域读取cookie的。
3. 与通常的信任想法相反，使用Post代替Get方法并不能提供卓有成效的保护。因为JavaScript能使用伪造的POST请求。尽管如此，那些导致对安全产生“副作用”的请求应该总使用Post方式发送。Post方式不会在web服务器和代理服务器日志中留下数据尾巴，然而Get方式却会留下数据尾巴。
4. 尽管CSRF是web应用的基本问题，而不是用户的问题，但用户能够在缺乏安全设计的网站上保护他们的帐户：通过在浏览其它站点前登出站点或者在浏览器会话结束后清理浏览器的cookie。