Passing a CSRF token in the request header about htmx HOT 11 CLOSED

For readers as of 2021, I followed @rschroll's suggestion, but the event is renamed in the version that I'm using (1.1.0 at the time of this comment):

document.body.addEventListener('htmx:configRequest', (event) => {
  event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})

Thanks @rschroll!

from htmx.

@1cg would it make sense to add a sentence or two to the docs?

from htmx.

If you're not using form submissions, you can insert the CSRF token into all htmx requests with a bit of JS. Here's what I have in a Django template:

document.body.addEventListener('configRequest.htmx', (event) => {
    event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})

from htmx.

@mblayman For Django, I just wanted to add, this code snippet should be placed at the end of body (at least it didn't work for me when placed in head after xhtm.js loading).

from htmx.

For any future readers, I was running into a problem where I was using hx-delete and got Forbidden (CSRF token missing or incorrect.): even with @rschroll 's code snippet. It turns out I just needed to move it to the bottom of my base.html file after all other content. I am using Django 3.2, htmx 1.1.0.

from htmx.

Hi There,

Huh, seems like it should "just work" with rails forms, unless we aren't including hidden inputs properly....

from htmx.

Thanks for your reply.
It's weird but this event is never triggered...

from htmx.

I'm afraid the best advice I can give is to enable logging (https://htmx.org/docs#events). This may help us see if the events are getting gobbled up by some other handler.

Maybe someone else has more insight.

from htmx.

Hey fdeage, I have added another plugin that does something similar to what you want here:

2305aed

That code should definitely work for what you are trying to do.

from htmx.

Thanks @chg20, I'll give it a try!

from htmx.

For readers as of 2021, I followed @rschroll's suggestion, but the event is renamed in the version that I'm using (1.1.0 at the time of this comment):

document.body.addEventListener('htmx:configRequest', (event) => {
  event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})

Thanks @rschroll!

It probably should be X-CSRF-Token instead of X-CSRFToken, but the idea is there and it works.

from htmx.