get csrf token from page using javascript

Question

I am trying to extract the csrf token from a Django powered webpage using javascript.

My html template looks like this:

<div class = "debugging">
  <p id = "csrf">{% csrf_token %}</p>
</div>

When I use this script below, I can see the token value in the console, but can't actually extract it:

<script>
var csrfToken = document.getElementById("csrf");
console.log(csrfToken.innerHTML);
</script>

It returns in console:

<input type="hidden" name="csrfmiddlewaretoken" 
value="AAIawsx1XysoQpDyIqyzdPe3npopNCHRzFBQdvUdlr4TUPEq3Sr5C5bFqc">

So I tried:

var csrfToken = document.getElementById("csrf").attributes[0].value;
var csrfToken = document.getElementById("csrf").value;

both returned "undefined"

Any help is appreciated!

connexo · Accepted Answer · 2018-10-07 20:40:24Z

4

Your django seems to create an input element holding your token, so just select that using querySelector and read its value:

var csrfToken = document.querySelector("#csrf input").value;

Since your django code also generates a name="csrfmiddlewaretoken" on that input element, you can also do this:

var csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value;

answered Oct 7, 2018 at 20:40

connexo

57.3k15 gold badges112 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rameezmeans · Accepted Answer · 2021-02-08 22:11:21Z

1

I tried this in new Laravel. it is Vanilla JS and can be called anywhere. In JS or blade file.

var csrf = document.querySelector('meta[name="csrf-token"]').content;

answered Feb 8, 2021 at 22:11

rameezmeans

8501 gold badge12 silver badges24 bronze badges

Satyam Sagar · Accepted Answer · 2022-07-17 07:57:56Z

0

You could have used {{ csrf_token }} instead of {% csrf_token %} if you intend to get only the token value

answered Jul 17, 2022 at 7:57

Satyam Sagar

1