服务端生成JWT通过响应JSON返回并存储于LocalStorage是否安全？

在服务端生成JWT Token并通过注册请求的JSON响应返回给客户端是否安全？

当前我通过如下方式生成JWT：

import express from "express";
import jwt from "jsonwebtoken";

const generateToken = (id: any, res: express.Response) => {
    const token = jwt.sign({ id }, process.env.JWT_SECRET as string, {
        expiresIn: "15d",
    });

    return token;
};

export default generateToken;

该方法被如下auth.controller调用：

import express from "express";
import User from "../models/user.model";
import bcrypt from "bcrypt";
import generateToken from "../utils/generateToken";

export const signup = async (req: express.Request, res: express.Response) => {
    try {
        const { username, password, email } = req.body;

        // Check if all fields are filled in and been sent
        if (!username || !password || !email) {
            return res
                .status(400)
                .json({ message: "Please fill in all fields" });
        }

        // Check if the user already exists
        const userCheck = await User.findOne({ username });

        if (userCheck) {
            return res.status(400).json({ message: "User already exists" });
        }

        // Check if the email already exists
        const emailCheck = await User.findOne({ email });

        if (emailCheck) {
            return res.status(400).json({ message: "Email already exists" });
        }

        // Hash the password
        const salt = await bcrypt.genSalt(12);
        const hashedPassword = await bcrypt.hash(password, salt);

        // Create a new user
        const newUser = new User({
            username,
            password: hashedPassword,
            email,
        });

        // Generate and send token
        if (newUser) {
            const token = generateToken(newUser._id, res);
            await newUser.save();

            return res.status(201).json({
                user: newUser,
                token: token,
            });
        } else {
            return res.status(500).json({ message: "Something went wrong" });
        }
    } catch (error) {
        console.log(`Error in signup controller: ${error}`);
        return res.status(500).json({ message: "Something went wrong" });
    }
};

如代码所示，我在服务端生成JWT Token并通过客户端POST请求的响应JSON返回给客户端：

// Generate and send token
if (newUser) {
    const token = generateToken(newUser._id, res);
    await newUser.save();

    return res.status(201).json({
        user: newUser,
        token: token,
    });
} else {
    return res.status(500).json({ message: "Something went wrong" });
}

客户端将Token存储在Redux LocalStorage中：

auth:"{\"session\":{\"signedIn\":true,\"token\":\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2MWE1Y2U5NjAzYWRhNTMzODA2YjVkZSIsImlhdCI6MTcxMzAwMzc1MywiZXhwIjoxNzE0Mjk5NzUzfQ.v23o2WIIz6bYqxpP_wwG5Q3DZgwXtdPX1pMAnGsDKs4\"},\"user\":{\"avatar\":\"https://via.placeholder.com/150\",\"username\":\"test\",\"email\":\"test@gmail.com\",\"authority\":\"user\"}}"locale:"{\"currentLang\":\"en\"}"_persist:"{\"version\":-1,\"rehydrated\":true}"

核心疑问：将JWT存储在LocalStorage中是否足够安全，还是必须使用设置响应头的方式？

一、JSON响应返回JWT的传输安全性 #

只要服务端通过HTTPS传输数据，JSON响应里的JWT会被加密，传输过程中不会被中间人窃听，这一步是安全的。风险主要集中在客户端存储和后续使用环节。

二、LocalStorage存储JWT的隐患 #

LocalStorage是浏览器本地存储机制，存在几个关键安全问题：

• XSS攻击易受影响：如果前端代码存在XSS漏洞，攻击者注入的恶意脚本可直接读取LocalStorage中的JWT，进而冒充用户发起请求。
• 需手动处理请求携带：LocalStorage中的token不会自动随请求发送到服务端，必须手动在请求头中添加Authorization: Bearer <token>，处理不当易引发遗漏或错误。
• 无自动过期清理：除非手动编写代码处理，否则LocalStorage中的token会永久留存，即使用户关闭浏览器也不会消失，延长了被盗用的风险窗口。

三、HTTP-only Cookie存储的优势 #

相比LocalStorage，将JWT存入HTTP-only Cookie是更安全的方案：

• 防XSS攻击：HTTP-only Cookie无法被前端JS读取，从根源上避免了XSS脚本窃取token的可能。
• 自动携带请求：Cookie会自动随同域请求发送到服务端，无需手动处理请求头，减少人为失误。
• 可配置安全属性：可设置Secure（仅HTTPS传输）、SameSite（防范CSRF攻击）、max-age（控制过期时间）等属性，进一步提升安全性。

四、方案选择建议 #

• 若应用为纯前端SPA，且能严格做好XSS防护（比如依赖框架自动转义、禁用innerHTML等危险API、严格过滤用户输入），LocalStorage可作为备选，但需做好token过期管理和请求头的正确携带。
• 追求更高安全性时，优先选择HTTP-only Cookie方案。若涉及跨域请求，需配置CORS允许携带Cookie，同时服务端开启credentials: true。

代码调整示例（改用Cookie方案） #

修改generateToken函数即可实现Cookie存储：

const generateToken = (id: any, res: express.Response) => {
    const token = jwt.sign({ id }, process.env.JWT_SECRET as string, {
        expiresIn: "15d",
    });

    // 设置HTTP-only Cookie
    res.cookie('jwt', token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production', // 生产环境仅HTTPS传输
        sameSite: 'strict', // 防范CSRF
        maxAge: 15 * 24 * 60 * 60 * 1000 // 15天有效期
    });
};

调整后响应无需返回token字段，客户端也无需存储到LocalStorage，后续请求会自动携带Cookie。

内容的提问来源于stack exchange，提问作者d4ne