Add X-CSRFToken via htmx:configRequest event #196

valberg · 2022-03-01T15:30:22Z

Description

I wanted to hear if there is any interest in adding the X-CSRFToken to every HTMX request by grabbing the htmx:configRequest event?

I've had quite a good success by including the following in my base templates:

<script>
    // Make sure we have csrf_token in HTMX requests
    document.body.addEventListener('htmx:configRequest', (event) => {
        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
    })
</script>

Including this in django-htmx by either modifying django-htmx.js (and removing the non-debug guard in jinja.py) could be one way of doing it. Another could be a seperate {% htmx_csrf_header %} template tag.

Any thoughts?

The text was updated successfully, but these errors were encountered:

adamchainz · 2022-03-01T15:47:19Z

There's no need for any Javascript. You can use hx-headers - this is already documented in the example project CSRF demo:

django-htmx/example/example/templates/csrf-demo.html

Lines 4 to 22 in 2c1f95b

    
             <section> 
        
               <p> 
        
                 This form shows you how to implement CSRF with htmx, using <a href="https://dev.htmx.org/attributes/hx-headers/"> the<code>hx-headers</code> attribute</a>. 
        
               </p> 
        
             </section> 
        
             <section> 
        
               <!-- 
        
                 Note you can place the hx-headers attribute on your <body> tag so it 
        
                 affects all requests, reducing repetition. 
        
                 The header name may be changed with the CSRF_HEADER_NAME setting; 
        
                 https://docs.djangoproject.com/en/stable/ref/settings/#std:setting-CSRF_HEADER_NAME 
        
                 Note we use {{ csrf_token }} instead of {% csrf_token %} to get the 
        
                 variable rather than a rendered HTML <input>. 
        
               --> 
        
               <form hx-post="/csrf-demo/checker/" 
        
                     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' 
        
                     hx-target="#result">

I'm further adding a docs page in the Docs PR: https://github.com/adamchainz/django-htmx/pull/194/files#diff-3d3c9ddabd7ba7f0fa458351d17598c03548245af53febc5c09fd829bb42dea1

valberg · 2022-03-01T16:02:22Z

Oh yes I knew that :) But having to add that to each html tag where you want to do htmx requests "gets tedious". I started using hx-headers initially but kept on forgetting them, which is why I turned to the configRequest event - to remove friction :)

Anyway, I'll consider this as out-of-scope for django-htmx :)

valberg · 2022-03-01T16:04:07Z

Okay, my bad, I somehow totally missed the <body> part! That definitely makes my suggestion irrelevant! Thanks @adamchainz !

adamchainz closed this as completed Mar 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add X-CSRFToken via htmx:configRequest event #196

Add X-CSRFToken via htmx:configRequest event #196

valberg commented Mar 1, 2022

adamchainz commented Mar 1, 2022

valberg commented Mar 1, 2022

valberg commented Mar 1, 2022 •

edited

Loading

Add X-CSRFToken via htmx:configRequest event #196

Add X-CSRFToken via htmx:configRequest event #196

Comments

valberg commented Mar 1, 2022

Description

adamchainz commented Mar 1, 2022

valberg commented Mar 1, 2022

valberg commented Mar 1, 2022 • edited Loading

valberg commented Mar 1, 2022 •

edited

Loading