im目前正在进行一个项目，我试图使用Json Web Token实现一个登录系统。我的知识基本上是通过一些教程和文档整合在一起的。它基本上是一个MERN应用程序。到目前为止，后端的身份验证工作正常。我的问题是，我如何在前端判断用户是否登录，基于此，我想显示配置文件按钮而不是登录/注册按钮。我知道令牌必须存储在cookie或本地存储中。但我被告知这是非常不安全的，因为这两个存储可以通过跨站点脚本访问。现在我很纠结。我希望你们的一些专家能帮助我。我的前端是一个带有"/登录"；或"/寄存器"；action和im使用React.js。这就是我的后端的样子：
app.post("/register", async (req,res) => {
//Validation
const {error} = registerValidation(req.body)
if(error) return res.status(400).send(error.details[0].message)
//Check if user is already in Database
const emailExist = await User.findOne({email: req.body.email})
if(emailExist) return res.status(400).send("User already registered")
// Create User
try{
const saltRounds = 10;
var hashedPassword = await bcrypt.hash(req.body.password, saltRounds)
const user = new User({
firstname: req.body.firstname,
lastname:req.body.lastname,
gender:req.body.gender,
birth:req.body.birth,
street:req.body.street,
streetnumber:req.body.streetnumber,
location: req.body.location,
email:req.body.email,
password: hashedPassword,
})
user.save().then(result => {
console.log(result)
res.redirect("/registered")
})
}
catch{
res.status(400).send(err)
}
})
//Login
app.post("/login", async (req, res) => {
// Validation
const {error} = loginValidation(req.body)
if(error) return res.status(400).send(error.details[0].message)
// Check if email exist in DB
const user = await User.findOne({email: req.body.email})
if(!user) return res.status(400).send("No user found")
console.log(user)
// Password is correct
const validPass = await bcrypt.compare(req.body.password, user.password)
if(!validPass) return res.status(400).send("Wrong password")
// Create and assign token
const token = jwt.sign({_id: user._id}, process.env.TOKEN_SECRET)
res.header("auth-token", token).redirect("/main")
})我知道令牌必须存储在cookie或本地存储中。
如果它需要持久化，这些地方显然是存储它的地方。(SPA可以将其保存在内存中(也容易受到XSS的攻击(。
但我被告知这是非常不安全的，因为这两个存储可以通过跨站点脚本访问。
HttpOnly cookie不会被XSS攻击访问，但XSS可以用来发出包含它的HTTP请求，所以这不是一个完美的防御。
坦率地说，如果你很容易受到XSS的攻击，那么你就会遇到严重的问题。对XSS应用通常的防御措施(例如，用户输入转义和强大的CSP(，不要因为拥有想要提供给JavaScript的数据而陷入困境，而不允许受损的前端使用JavaScript访问数据。