Dynamic htmx localStorage hx-header XSS question

Question

I'd like to add an dynamic header to my hx-headers in htmx like so.

<form
  hx-post="api/auth/login-signup"
  hx-headers='js:{"Authorization": localStorage.accessToken}'

I want to make sure that this will not be vulnerable to XSS. I assume that if I sanitize the Authorization header on the server I will be ok?

Answer 1

Use session bro.

In the conf of you server.js Eg:

const session = require("express-session");


const store = new session.MemoryStore(); 
app.use( 
 session({ 
  secret: "some-key", 
  name: "_ssid",
  resave: true, 
  saveUninitialized: false,
  cookie: { 
    secure: false
    maxAge: 3600000, 
    httpOnly: true, 
  }, 
  store, 
 }) 
);`

After you can manage the session like that Eg:

app.post("/login", (req, res) => {
 const { username, password } = req.body; //Here result of the login form of your client htmx
 req.session.authenticated = true;
 req.session.user = username;
 res.json("sucess").status(201);
});

& you check the validity like that Eg:

function _auth(req, res, next) {
  if (req.session.authenticated) { sessionId:${req.session.id}`);
   next();
  } else {
    res.status(403).json({ msg: "Not Authenticated" });
  }
}

Calling the authorization inside your backend methode eg:

 app.get("/peoples", _auth, function (req, res) {
  ...
 }

So u store the & eveyone Will be happy (your RSSI also)

ps: exemple with nodeJS, Express & HTMX