Fix CSRF for HTMX POST requests

1 files changed, 8 insertions, 0 deletions

diff --git a/kitchen/templates/kitchen/base.html b/kitchen/templates/kitchen/base.html
index 0bdc5f3..6bd33bf 100644
--- a/kitchen/templates/kitchen/base.html
+++ b/kitchen/templates/kitchen/base.html
@@ -6,6 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}Kitchen{% endblock %}</title>
   <script src="{% static 'kitchen/htmx.min.js' %}"></script>
+  {% csrf_token %}
+  <script>
+    // Add CSRF token to all HTMX requests
+    document.addEventListener('htmx:configRequest', function(evt) {
+      const token = document.querySelector('[name=csrfmiddlewaretoken]');
+      if (token) evt.detail.headers['X-CSRFToken'] = token.value;
+    });
+  </script>
   <style>
     :root {
       --bg-dark: #15131c;