Split a JWT between payload and signature

Context: I’m looking at storage solutions for JWT tokens on a single page application.

  1. Storing the JWT in the local storage is unsafe and prone to XSS attacks.
  2. Storing the JWT in a secure / HTTP only cookie is safer, but prone to CSRF attacks.

I’m studying the following scenario:

Upon authentication, a refresh token is stored in an http only secure cookie. It can only be used to get an access token.

Upon authorisation, the backend responds with a JWT access token. The header and payload part of the JWT are inside the response body. The token signature is not sent and is set in an http only secure cookie (same-site strict if possible, but let’s assume it’s not the case). The header + payload is stored in memory.

When making requests, the header + payload is sent via XHR/fetch by the SPA in an Authorisation header. The signature is sent along with the cookies. The backend concatenates both and verify the signature.

Would such a mechanism be safe from XSS and CRSF attacks, or is it just adding un-necessary complexity ? Since the cookie does not contain the full JWT, this seems like a CSRF attack would not be able to make requests. And an XSS attack would at least (this is a mild protection at this point since an XSS attack is possible, but still), not be able to retrieve the full token.

Note: I’ve read this question which is similar, but overly broad so I’m posting this to get a more precise answer.