Getting a Csrf token inside a react render function

Question

I'm creating a webpage with a login/logout option, since I'm using spring, and I want it to be secure, I use Csrf as described here.

What works in regular html:

<form method="post">
  <input type="submit" value="Log out" />
  <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
</form>

The only difference is I am trying to put it inside a react component, in the render function, it would look like this:

<form method="post">
  <input type="submit" value="Log out" />
  <input type="hidden" thName={_csrf.parameterName} thValue={_csrf.token}/>
</form>

But for some reason that doesn't work.

Another thing might work but I'm not sure if it's good practice or not is:

<form method="post">
  <input type="submit" value="Log out" />
  <input type="hidden" thName={this.getCsrfName} thValue={this.getCsrfToken}/>
</form>

I'm using thyme-leaf by the way.

Is there any way to access the token and the name inside react without it being bad practice? Also if my second try is the correct one, how would I write the getCsrfName() or getCsrfToken() functions?

Whats with the thName property? Why not using name and value? React JSX code only allows for valid props. Also is the _csrf object available in JS or are you trying to do this at compiletime? — Per Svensson, Oct 18 '17 at 11:54
I guess that name and value is fine too. And I'm not sure about that, the _csrf object is something that spring provides, no? — Wolfyaskingstuff, Oct 18 '17 at 11:58
Im not a java man myself but the syntax "${_csrf.parameterName}" makes me think that your doing this compile time. On a .html page or a .jsp page for example. Then you need to string escape it. name={_csrf.parameterName} will become undefine otherwise. :) Try it. — Per Svensson, Oct 18 '17 at 12:00
@PerSvensson Tried it. But it came back with a "_csrf is not defined" error. — Wolfyaskingstuff, Oct 18 '17 at 12:05
I think that it should be defined because I am providing a tag in the page header — Wolfyaskingstuff, Oct 18 '17 at 12:07
Aha.... no i think you need to pull it down from the meta yourself. — Per Svensson, Oct 18 '17 at 12:08
_csrf as such is not a browser standard implementation so you need to make it all yourself. — Per Svensson, Oct 18 '17 at 12:08
https://stackoverflow.com/questions/7524585/how-do-i-get-the-information-from-a-meta-tag-with-javascript — Per Svensson, Oct 18 '17 at 12:09
Oh, littlebit unclear that you had the token in the meta. The meta tag is just another dom node. document.querySelector("meta[property='og:type']").content document.querySelector("meta[property='csrf']").content etc. — Per Svensson, Oct 18 '17 at 12:18

Getting a Csrf token inside a react render function

0 Answers0