Question

Я создаю веб-сайт электронной коммерции с использованием React Single Page App / Creat React App, а в моем бэкэнде iam - Express.js.

, поскольку каждый запрос к серверу использует API, это очень опасно?потому что каждый может получить доступ к нашему API правильно?

так как вы справляетесь с этим?

если я буду использовать CSRF?

Я искалв течение нескольких дней с этим CSRF и результаты остаются прежними, не работает!

Я пробовал использовать CSURF Express, и я получаюмного ошибок.большинство людей общаются, отправляя их через токены CSRF клиенту.Я попробовал это, и когда первая страница открывалась иногда, я получал ошибку Invalid CSRF token

Server.js

import express from 'express';
import bodyParser from 'body-parser';
import passport from 'passport';
import connection from './config/conn';
import { 
    CategoryRoutes,
    ProductRoutes,
    CartRoutes,
    AuthRoutes,
    TrackRoutes,
    AddressRoutes,
    ShippingRoutes,
    UIRoutes,
    LookbookRoutes,
    CheckoutRoutes
} from './modules';
import session  from 'express-session';
import csrf  from 'csurf'
import cors from 'cors'
import cookieParser  from 'cookie-parser'
// import cookieSession from 'cookie-session'
import passportSetup from './config/passport-setup';
import keys from './config/keys';
import uuidv4  from 'uuid/v4';
import UAparser  from 'ua-parser-js';
import { ensureSession } from './config/sessionCheck';
// import path from 'path';
const app = express();

app.use(session({
    genid: function (req) {
        return uuidv4() // use UUIDs for session IDs
    },
    name:keys.session.name,
    secret: keys.session.secret,
    resave: false,
    saveUninitialized: true,
    rolling:true,
    cookie: { 
        secure: false,
        httpOnly: true,
        maxAge:keys.session.maxAge, // satu hari,
        sameSite:true,
     }

}));

// app.use('/public',express.static(path.join(__dirname,'public')));

app.use(passport.initialize());
app.use(passport.session());
app.use(cookieParser());
app.use(csrf({ cookie: false }));

app.disable('x-powered-by');
app.use((req,res,next)=>{
    res.header('X-XSS-Protection', '1; mode=block');
    res.header('X-Frame-Options','deny');
    res.header('X-Content-Type-Options','nosniff');
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.cookie('csrf_token', req.csrfToken(), { maxAge: 3600, sameSite: true })
    next(); 
})

app.use(cors({ origin: keys.origin.url }))

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/', function (req, res, next) {

    var ua = UAparser(req.headers['user-agent']);
    res.end(JSON.stringify(ua, null, '  '));
})
app.use('/api/', ensureSession, [
    CategoryRoutes, 
    ProductRoutes, 
    CartRoutes, 
    AuthRoutes, 
    TrackRoutes, 
    AddressRoutes, 
    ShippingRoutes, 
    UIRoutes,
    LookbookRoutes,
    CheckoutRoutes
]);

const port = process.env.PORT || 5000;
app.listen(port, (err) => {
    if(err){
        console.log(err);
    }else{
        console.log(`Server running on port ! ${port}`);
    }

});

От клиента, использующего Redux

export const fetchCartList = (value)=>disbatch=>{
    console.log(Cookies.get())
    disbatch(loadingCart());
    axios({
        method: 'POST',
        url: '/api/v1/track/cart',
        headers: { "x-csrf-token": Cookies.get("csrt_token") }
    }).then(res => {
        let dataType = typeof res.data.cart_list;
        if(typeof res.data.token_c !== "undefined"){
            localStorage.setItem("hammerstout_c", res.data.token_c);
        }
        if(dataType !== "undefined"){
        disbatch({
            type:FETCH_CART_LIST,
            payload:res.data.cart_list
        })
        }else{
            disbatch(stopLoadingCart());
            localStorage.removeItem("hammerstout_c");
        }


    }).catch(err => {
        disbatch({
            type: GET_ERRORS,
            payload: err.response.data
        });
        if (err.response.data.error) {
            disbatch(stopLoadingCart());
        }
    })
}

Результат

Иногда я получаю ошибку вроде этого:

CSRF не определено: