霞之彼端

🚀 善国峻的个人站点 🌏

0%

Node-Fetch 解决 CSRF 问题

最近在开发自己的评论系统的时候遇到了 CSRF 的问题🤔,因为没有什么前端经验,还不会处理这个问题。苦苦寻觅之后,终于在 StackOverflow 找到了类似的解决办法。

关于 CSRF:百度百科-跨站请求伪造

其实处理起来很简单,就是前端把 Cookie 中的 csrftoken 放在请求头中一起 post 给服务器。

具体解决方法如下:

环境

  • 前端:nodejs + node-fetch
  • 后端:Django + Django-REST-Framework

解决

后端是用 Nginx 反向代理实现的跨域,这里不用配置什么。

前端:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// get csrftoken
function getCookie(name) {
if (!document.cookie) {
return null;
}
const token = document.cookie.split(';')
.map(c => c.trim())
.filter(c => c.startsWith(name + '='));

if (token.length === 0) {
return null;
}
return decodeURIComponent(token[0].split('=')[1]);
}

const csrftoken = getCookie('csrftoken')

fetch(APIURL, {
method: 'post',
mode: 'same-origin',
body: requestJson,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRFToken': csrftoken
}
})
.then(res => res.json())
.then(json => console.log(json));

这样就愉快地解决啦 🥳🎉

  • 本文作者: 善国峻
  • 联系邮箱: me@ohmysites.com
  • 本文链接: https://www.ohmysites.com/archives/12/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-ND 许可协议。转载请注明出处!