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.
There's no XSS risk from the snippet in your gist, but I'd recommend not using any inline
<script>
tags so you can use a strong Content Security Policy (or make it easier to migrate to one in the future). I think any documentation examples should follow that guideline.