Express-React-JWT：如何使用静态文件请求发送 Bearer 令牌

Question

我正在创建一个可以设置全局密码的快速服务器/React 应用程序。如果设置了全局密码，我不希望未经身份验证的用户能够访问服务器上的任何内容，包括静态文件。我正在使用 JWT 进行身份验证。

为了保护 React 中的路由，我使用了一个名为 AuthService 的类来获取和发布，它允许我在所有请求中发送一个 Bearer 令牌。但是，我无法使用我的任何静态文件发送 Bearer 令牌，因为它们是通过组件的 src 标记加载的。我不确定如何或是否可以与他们一起发送不记名令牌。因此，即使用户通过身份验证，他们仍然无法访问任何静态文件。

如何允许经过身份验证的用户访问静态文件？

快速后端：

// index.js
import express from 'express';
import globalMiddleware from 'global.middleware.js';

const app = express();

app.all('*', globalMiddleware);

app.use('/api/auth', ...);
app.use('/api/users', ...);
...
app.use('/static', express.static(process.env.STATIC_FOLDER));



// global.middleware.js
import jwt from 'jsonwebtoken';

export default async (req, res, next) => {
    if (req.path == '/api/auth/global/' || process.env.GLOBAL_PASSWORD === '') return next();

    const authHeader = req.headers['authorization'];
    const token = !!authHeader && authHeader.split(' ')[1];

    if (!token) return res.sendStatus(401);

    let decoded;
    try {
        decoded = await jwt.verify(token, process.env.JWT_TOKEN_SECRET);
    } catch (err) {
        return res.sendStatus(401);
    }
    if (!decoded.hasOwnProperty('globalPassword')
        || decoded.globalPassword !== process.env.GLOBAL_PASSWORD
    ) return res.sendStatus(401);

    next();
}

反应前端：

// auth.service.js
class AuthService {
    get(page) {
        return axios.get(API_URL + page, this.getTokenHeader());
    }

    getTokenHeader() {
        const token = localStorage.getItem('token');
        if (token) {
            return {
                headers: {
                    Authorization: 'Bearer ' + token
                }
            }
        } else {
            return {}
        }
    }
}

Answer 1

一种可能的替代方法是在 cookie 中返回 jwt 令牌，理想情况下是 HttpOnly（无法从 js 读取，因此防止对其进行 XSS 攻击）、安全（仅通过 https 请求发送）和 SameSite=Strict 属性（以防止 CSRF） .

登录后，来自同一站点的所有后续 https 请求（包括静态文件）都将嵌入该 cookie。您需要更新中间件以检查 cookie 而不是标头。而且您将不再需要 AuthService。