Comments (11)
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:
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.
Related Issues (20)
- HX-Location feature: push url options (example of working code, tiny change) HOT 3
- poll trigger for table content - how to keep/disable scroll on update HOT 1
- v2.0.0 hx-swap="delete" + hx-retarget="body" triggers uncaught exception HOT 1
- Extension Performance Improvments
- hx-swap="delete" should be allowed to work even with no request at all HOT 1
- Fetch hx-vals programatically HOT 2
- sha384sum is giving me the wrong answer for 2.0.1/dist/htmx.min.js HOT 1
- Does new extension released with core? HOT 2
- feature request: out-of-order rendering support
- `htmx:beforeRequest` and `htmx:beforeSend` event does not send on load trigger HOT 1
- `'htmx.d.ts' is not a module` HOT 5
- hx-trigger from:html with data-bs-theme HOT 1
- hx-swap-oob not working as expected HOT 2
- triggerEvent relies on a non-null target existing; therefore beforeSwap won't fire if target is null (possible when hx-retarget is used)
- Add the `pushUrl` option for `htmx.ajax()` calls
- UX is broken for streaming HTML HOT 2
- I am using the hx-boost feature and I am experiencing strange problems. Javascripts such as dropdown and modal do not work
- Trigger modifier "from" prevents default behaviour of some input fields HOT 4
- Abort trigger aborts, but the file upload form resumes uploading from scratch.
- Extension: class-tools.js documentation points at the wrong URL as of 7/25/2024
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from htmx.