• frontend
  • 浏览器
  • XSS 攻击和 CSRF 攻击

XSS 攻击和 CSRF 攻击

CSRF 攻击

什么是 CSRF

CSRF(Cross Site Request Forgery)即跨站请求伪造。就是利用后台有规律的接口，诱骗用户点击或者通过特殊操作发送伪造的请求。如果用户此时登录了就会被服务器认为是合法的操作。

一句话：攻击者盗用了你的身份，以你的名义发送恶意请求

CSRF 原理

image

从上图可以看出，要完成完整的 CSRF 攻击，需要这样的条件

1.需要同时有两个页面，b 页面向 a 页面发送请求，这样浏览器会带 a 页面的 cookie

2.需要通过 cookie 骗过服务器

举个例子：

我经过测试发现有一个后台请求可以给我刷礼物，接口是这样的

html
1<img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>

然后我只要让用户能够点击这张图片，那么会发送一个请求给服务器，服务器此时查看用户发送过来的请求里面有 cookie，认为是合法的操作，那么就会给我的账户打钱，这种方式就算是跨站请求伪造。

通过例子可以看出来：CSRF 攻击是源于 WEB 的隐式身份验证机制！WEB 的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的！

常见 CSRF 的方式

  • GET 方式
html
1<img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>

用这样的方式可以骗取浏览器的 cookie 和服务器的身份识别

  • POST 方式
html
1img` 标签不能帮我们发 `post`请求,那么就可以使用 `from
2<form action="http://bank.example/withdraw" method="POST">
3  <input type="hidden" name="account" value="xiaoming" />
4  <input type="hidden" name="amount" value="10000" />
5  <input type="hidden" name="for" value="hacker" />
6</form>
7<script>
8  document.forms[0].submit()
9</script>

CSRF 的防护策略

现在的防护一般由服务端同学完成，策略很多，这里只介绍一种。对应前端面试应该差不多了，因为这是后端的范畴。

  • 同源检测

    服务端设置验证 HTTP Referer 字段

    通过请求头中的 Referer 来检查来源，如果来源不是本站就不做任何行动。这种方式有一定风险，因为 Referer 是浏览器自动发送的，有些老版的浏览器依然可以通过某种方法来修改 Referer，不过好在新版本的浏览器比较有保障。

    如果要用这种方式实现，需要注意一点，Header 上的 Referer 属性有可能会被用户取消掉，所以写逻辑时需要增加判断有没有带 Referer，如果没有带拒绝掉就行了。

    这种方式就相当于把主动权交给了浏览器，而且没有带 Referer 属性的请求会被过滤，所以这并不是最好的实现

XSS 攻击

什么是 XSS 攻击

XSS 全拼为 Cross-site scripting,中文译名跨站脚本攻击,因为缩写 CSS 与层叠样式表冲突,所以改成 XSS。

XSS 攻击通常是利用网页开发造成的漏洞,通过巧妙的方法注入恶意指令代码到网页中,让用户加载并执行的网页程序。

举个例子:

比如有一个留言板,前端代码是这样写的

html
1留言板
2<div></div>
3<input type="text" />
4<button>提交</button>
5<script>
6  var div = document.querySelector('div')
7  var input = document.querySelector('input')
8  var button = document.querySelector('button')
9  button.onclick = () => {
10    div.innerHTML = input.value
11  }
12</script>

当用户输入正确的内容时,留言板当然没问题

image

但是当用户是这样留言的

<script>alert(“我要攻击你了”)</script>

那么页面就会变成这样

image

于是等下次浏览器再次解析的时候,就会打印这段话。

如果把这个代码换成其他恶意脚本程序，就是一次 XSS 攻击

归根结底 XSS 攻击就是攻击者利用某些漏洞来让用户的浏览器去执行一些原本不存在的代码。

XSS 攻击的危害

XSS 攻击可以干的事情还有很多，这里举两个例子

1.窃取网页浏览中的 cookie 值

cookie 相当于一个令牌,有时候我们用户登录后会有这段 cookie,如果没有经过设置,那么就可以通过document.cookie来获取。

如果被人拿到了这段 cookie，那么账号就可能会被人登录，甚至用户都不知道自己的账号被窃取了。

好在可以设置 HttpOnly 属性，这样 cookie 就不会被document.cookie获取，可以缓解 XSS 攻击

2.劫持流量实现恶意跳转

如果在网页中写<script>window.location.href="http://www.baidu.com"</script>，那么就会自动打开百度的首页，这种就叫劫持流量。

早在 2011 年新浪就曾爆出过严重的 xss 漏洞，导致大量用户自动关注某个微博号并自动转发某条微博。

预防 DOM 型 XSS 攻击

XSS 攻击有很多，这里举例跟前端关系最紧密的 DOM 型攻击

DOM 型 XSS 攻击，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了。

在使用 .innerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。

在 React 中，有个 API 叫dangerouslySetInnerHTML,当使用它的时候，千万要小心，需要向其传递包含 key 为 __html 的对象，以此来警示你

function createMarkup() {
  return { __html: 'First &middot; Second' };
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}