I am attempting to build an application that submits numerous fetch/XHR requests to a NodeJS backend. I'd like to implement CSRF token protection, but would like to avoid implementing server-side rendering/templating or middleware on the frontend (trying to go as vanilla JS as possible on frontend). This means I can't inject the token into a <meta> or <form> tag before the page renders. I don't have any <form> tags anyway.

How can I security convey the CSRF Token (generated on the server) to the frontend without injecting it directly into the index.html file on load (which would require server-side rendering/templating and middleware)?

Keep in mind that the server will be storing the token on its end in a session.

I can think of two ways:

1. Have server create cookie with 'samesite' set to strict and CSRF token included and have frontend read that cookie to send CSRF token to server in custom x-csrf-token headers as part of fetch/XHR calls. Thus, frontend learns of CSRF token via cookie.
2. Have server reply to user login POST with CSRF token in response body and have frontend read that response body to send CSRF token to server in custom x-csrf-token headers as part of subsequent fetch/XHR calls. Thus, frontend learns of CSRF token via successful login response body.

Are either of those ways secure? If not, what is a secure method of passing CSRF token to website frontend after it has loaded (i.e., without pre-baking the CSRF token into a <meta> or <form> tag)?

I am attempting to build an application that submits numerous fetch/XHR requests to a NodeJS backend. I'd like to implement CSRF token protection, but would like to avoid implementing server-side rendering/templating or middleware on the frontend (trying to go as vanilla JS as possible on frontend). This means I can't inject the token into a <meta> or <form> tag before the page renders. I don't have any <form> tags anyway.

How can I security convey the CSRF Token (generated on the server) to the frontend without injecting it directly into the index.html file on load (which would require server-side rendering/templating and middleware)?

Keep in mind that the server will be storing the token on its end in a session. Additionally, both the frontend and backend will live at the same domain.

I can think of two ways:

1. Have server create cookie with 'samesite' set to strict and CSRF token included and have frontend read that cookie to send CSRF token to server in custom x-csrf-token headers as part of fetch/XHR calls. Thus, frontend learns of CSRF token via cookie.
2. Have server reply to user login POST with CSRF token in response body and have frontend read that response body to send CSRF token to server in custom x-csrf-token headers as part of subsequent fetch/XHR calls. Thus, frontend learns of CSRF token via successful login response body.

Are either of those ways secure? If not, what is a secure method of passing CSRF token to website frontend after it has loaded (i.e., without pre-baking the CSRF token into a <meta> or <form> tag)?