Handling CRSF in htmx is server-side platform dependent, but typically involves something like the following to add a token to a header or parameter:
In pure javascript you can listen to the htmx:configRequest
event and set the token there:
document.body.addEventListener('htmx:configRequest', function(evt) {
evt.detail.headers['X-CSRFToken'] = getToken();
});
Using the htmx javascript api, you can clean the above up a bit:
htmx.on('htmx:configRequest', function(evt) {
evt.detail.headers['X-CSRFToken'] = getToken();
});
Finally, if you are using hyperscript, you can add the following to the body tag:
<body _="on htmx:configRequest(headers) set headers['X-CSRFToken'] to getToken()">
...
</body>
Below are examples of setting the CSRT for various server side platforms.
@adamchainz did you see my fork of your gist? I kinda combine your gist with @1cg suggestion of meta tag and drop
app.js
Is dropping
app.js
problematic from the XSS prevention pov?As for updating CSRF token, I need to test this tomorrow. it's past midnight my place, I need to 😴 😄