小说明

由于行文时过于随意,被评论区的盆友指出,特将部分不相关的内容移除,以免其他人受到干扰,混淆概念

先说下CSRF的定义

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。[1] 跟跨網站指令碼（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任

简单点说，CSRF 就是利用用户的登录态发起恶意请求。

通过一个故事来介绍csrf

这是最近在知乎上看到的一个例子十分形象(由于是微信内分享,我现在找不到链接了,直接把故事内容补上吧)

防盗系统启动
妈妈: 给我看着衣服呀
小孩: 好的

小偷来了

正常工作:
小孩: 你是谁?
小偷: 我是张三
小孩:妈妈,有人偷衣服
妈妈: 谁?
小孩: 张三
小偷被抓

漏洞:
小孩: 你是谁?
小偷: 我叫逗你玩
小孩: 妈妈有人偷衣服呀
妈妈: 谁?
小孩: 逗你玩
妈妈: ...

csrf是让用户住不知情的情况下,冒用其身份发起了一个请求
小偷: 你妈妈喊你去买洗衣粉

如何攻击

假设网站中有一个通过 Get 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口

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

如果接口是 Post 提交的，就相对麻烦点，需要用表单来提交接口

<html>
    <head>
        <script type="text/javascript">
            function steal()
                {
                &emsp; iframe = document.frames["steal"];
                iframe.document.Submit("transfer");
            }
        </script>
    </head>

    <body onload="steal()">
        <iframe name="steal" display="none">
            <form method="POST" name="transfer"&emsp;action="http://www.myBank.com/Transfer.php">
                <input type="hidden" name="toBankId" value="11">
                <input type="hidden" name="money" value="1000">
            </form>
        </iframe>
    </body>
</html>

如何防御

防范 CSRF 可以遵循以下几种规则：

Get 请求不对数据进行修改
不让第三方网站访问到用户 Cookie
阻止第三方网站请求接口
请求时附带验证信息，比如验证码或者 token

SameSite

可以对 Cookie 设置 SameSite 属性。该属性设置 Cookie 不随着跨域请求发送，该属性可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

验证 Referer

对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。

在后台接收到请求的时候,可以通过请求头中的Referer请求头来判断请求来源

Token

服务器下发一个随机 Token（算法不能复杂），每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

node可以使用 csurf中间件来防御csrf攻击

var cookieParser = require('cookie-parser')
var csrf = require('csurf')
var bodyParser = require('body-parser')
var express = require('express')

// setup route middlewares
var csrfProtection = csrf({ cookie: true })
var parseForm = bodyParser.urlencoded({ extended: false })

// create express app
var app = express()

// parse cookies
// we need this because "cookie" is true in csrfProtection
app.use(cookieParser())

app.get('/form', csrfProtection, function (req, res) {
  // pass the csrfToken to the view
  res.render('send', { csrfToken: req.csrfToken() })
})

app.post('/process', parseForm, csrfProtection, function (req, res) {
  res.send('data is being processed')
})

在页面模板视图中（取决于您的模板语言;在这里演示了handlebar风格），将csrfToken值设置为一个名为_csrf的隐藏输入字段的值：

<form action="/process" method="POST">
  <input type="hidden" name="_csrf" value="{{csrfToken}}">
  
  Favorite color: <input type="text" name="favoriteColor">
  <button type="submit">Submit</button>
</form>

使用ajax怎么避免csrf攻击,前端代码
当通过ajax访问受保护的路由时，csrf令牌需要在请求中传递。通常，这是使用一个请求头来完成的，因为添加一个请求头通常可以在不进行有效负载修改的情况下在中心位置完成。 CSRF令牌从服务器端的req.csrftoken（）调用中获得。这个令牌需要向客户端公开，通常是将其包含在初始页面内容中。一种可能是将它存储在一个HTML的标签中，在这个标签中，可以在请求的时候通过JavaScript检索值。

<meta name="csrf-token" content="{{csrfToken}}">

下面是一个使用Fetch API从页面上的标签中使用CSRF令牌发送到/进程路由的示例：

// Read the CSRF token from the <meta> tag
var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

// Make a request using the Fetch API
fetch('/process',{
    credentials:'same-origin', // includes cookies in the request
    headers:{
        'CSRF-Token': token // is the csrf token as a header
    },
    method:'POST',
    body:{
        data:'data'
    }
})

token生成与解析(一个示例)

生成过程: token=salt-hash, hash=哈希函数(salt+密码）

解密过程: const [salt, hash] = token.split('-'), 重新计算hash=哈希函数(salt+密码), 然后比较

防抓包

使用HTTPS(HTTPS 还是通过了 HTTP 来传输信息，但是信息通过 TLS 协议进行了加密。)替换HTTP,对传输的数据进行加密,这样,当请求的信息被抓包工具抓包后,也无法修改提交的数据.

其他需要了解的一些web安全知识

密码安全(加盐,对称加密,非对称加密等)

密码安全虽然大多是后端的事情，但是作为一名优秀的前端程序员也需要熟悉这方面的知识。

对于密码存储来说，必然是不能明文存储在数据库中的，否则一旦数据库泄露，会对用户造成很大的损失。并且不建议只对密码单纯通过加密算法加密，因为存在彩虹表的关系。

通常需要对密码加盐，然后进行几次不同加密算法的加密。

node中对密码进行加密通常使用crypto模块,可以在我之前的一篇文章里看一下相关介绍node数据加密crypto

xss攻击

在这里补充一下有关于xss的一点内容
xss本质是html注入,和sql注入差不多. SQL,HTML,人类语言都是指令和数据混在一起的,都存在注入风险(程序根据分隔符,标签识别指令和数据,人类则是根据语境,语义和日常经验判断)
比如注册用户时,用户输入"张三"并提交,服务端会生成"

<p>欢迎新用户,张三</p>

"传给浏览器.如果用户输入

<script>alert('逗你玩')</script>

服务端就会生成

<p>欢迎新用户,<script>alert('逗你玩')</script></p>

输入用户内容就会被浏览器识别为指令执行,这就是xss注入;
小偷也是根据这个原理,输入一个有特殊语义的名字,被其他客户端识别为指令,从而完成了一次漂亮的存储型xss注入式攻击.

xss详细的一些内容,童鞋们可以去查阅相关资料,这里就暂不赘述

结语

经评论区小伙伴提醒,行文逻辑考虑不周,做了点小调整
很感谢各位看到了最后,如果喜欢本片文章的话,点个赞鼓励一下

参考资料