Fetch & Headers & CSRF

Fetch & Headers & CSRF

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers

X-Custom-Header

const myHeaders = new Headers();

myHeaders.append('Content-Type', 'text/plain');
myHeaders.append('X-Custom-Header', 'ProcessThisImmediately');

const content = 'Hello World';
myHeaders.append('Content-Length', content.length.toString());

// The same can be achieved by passing an array of arrays or an object literal to the constructor:

const myHeaders = new Headers({
  'Content-Type': 'text/plain',
  'Content-Length': content.length.toString(),
  'X-Custom-Header': 'ProcessThisImmediately'
});

  headers: {
    "Content-Type": "application/json",
    "x-csrf-token": csrftoken,
    // .setRequestHeader('x-csrf-token', csrftoken);
  },

---

CSRF 攻击：伪造用户请求向网站发起恶意请求。

message: "invalid csrf token"

https://eggjs.org/zh-cn/core/security.html#安全威胁csrf的防范

https://eggjs.org/zh-cn/core/security.html#安全威胁-csrf-的防范

// CSRF

// config/config.default.js
// module.exports = {
//   security: {
//     csrf: {
//       ignoreJSON: true, // 默认为 false，当设置为 true 时，将会放过所有 content-type 为 `application/json` 的请求
//     },
//   },
// };
config.security = {
  csrf: {
    enable: false,
  },
};

demo

text

const url = `http://localhost:7001/product/create`;
const json = { id: '123', name: 'admin' };

const csrftoken = document.cookie.split(';').map(item => item.trim()).map(item => ({[item.split(`=`)[0]]: item.split(`=`)[1]})).filter(obj => obj.csrfToken)[0].csrfToken;;

fetch(url, {
  headers: {
    "Content-Type": "application/json",
    "x-csrf-token": csrftoken,
    // .setRequestHeader('x-csrf-token', csrftoken);
  },
  // credentials: "same-origin",// cookie
  method: "POST",
  // mode: "cors",
  body: JSON.stringify(json),
})
.then(res => res.text())
// .then(res => res.json())
.then(json => {
  console.log(`text =`, json);
  // console.log(`json =`, JSON.stringify(json, null, 4));
  return json;
})
.catch(err => console.error(`error =`, err));

POST

JSON

const url = `http://localhost:7001/product/create`;
const json = { id: '123', name: 'admin' };

const csrftoken = document.cookie.split(';').map(item => item.trim()).map(item => ({[item.split(`=`)[0]]: item.split(`=`)[1]})).filter(obj => obj.csrfToken)[0].csrfToken;;

fetch(url, {
  headers: {
    "Content-Type": "application/json",
    "x-csrf-token": csrftoken,
  },
  credentials: "include",// cookie
  method: "POST",
  mode: "cors",
  body: JSON.stringify(json),
})
// .then(res => res.text())
.then(res => res.json())
.then(json => {
//   console.log(`text =`, json);
  console.log(`json =`, JSON.stringify(json, null, 4));
  return json;
})
.catch(err => console.error(`error =`, err));

Promise {<pending>}
VM13893:15 json = {
    "id": "123",
    "name": "admin"
}

cURL

$ curl 'http://localhost:7001/product/create' \
  -H 'Connection: keep-alive' \
  -H 'DNT: 1' \
  -H 'x-csrf-token: Lg_TzQXsAh7Rk27ztpzl3gYs' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4137.0 Safari/537.36' \
  -H 'Content-Type: application/json' \
  -H 'Accept: */*' \
  -H 'Origin: http://localhost:7001' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: http://localhost:7001/product/create\
  -H 'Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7' \
  -H 'Cookie: csrfToken=Lg_TzQXsAh7Rk27ztpzl3gYs; sensorsdata2015jssdkcross=%7B%22distinct_id%22%3A%22171319a1aef2f3-088239ecd3d0f5-6a3f0f7b-1764000-171319a1af0b4c%22%2C%22first_id%22%3A%22%22%2C%22props%22%3A%7B%22%24latest_traffic_source_type%22%3A%22url%E7%9A%84domain%E8%A7%A3%E6%9E%90%E5%A4%B1%E8%B4%A5%22%2C%22%24latest_search_keyword%22%3A%22url%E7%9A%84domain%E8%A7%A3%E6%9E%90%E5%A4%B1%E8%B4%A5%22%2C%22%24latest_referrer%22%3A%22url%E7%9A%84domain%E8%A7%A3%E6%9E%90%E5%A4%B1%E8%B4%A5%22%7D%2C%22%24device_id%22%3A%22171319a1aef2f3-088239ecd3d0f5-6a3f0f7b-1764000-171319a1af0b4c%22%7D' \
  --data-binary '{"id":"123","name":"admin"}' \
  --compressed

---